@databiosphere/findable-ui 44.0.0 → 45.1.0

package/lib/components/Table/features/TableDownload/onDownload/utils.js

@@ -0,0 +1,63 @@
+import { getColumnHeader } from "../../../common/utils";
+/**
+ * Format data to TSV string.
+ * @param data - Table data.
+ * @returns table data formatted into a TSV string.
+ */
+export function formatDataToTSV(data) {
+    return data
+        .map((row) => {
+        return row
+            .map((value) => {
+            // Use empty string in place of undefined and null.
+            if (value === undefined || value === null)
+                return "";
+            // Convert unknown value to string.
+            let valueStr;
+            // Test if object / array.
+            if (typeof value === "object") {
+                if (Array.isArray(value)) {
+                    // Handle array.
+                    valueStr = value.join(", ") || "";
+                }
+                else {
+                    // Handle object.
+                    valueStr = JSON.stringify(value);
+                }
+            }
+            else {
+                // Handle primitive.
+                valueStr = String(value);
+            }
+            // Quote if necessary.
+            return /[\t\r\n"]/.test(valueStr)
+                ? `"${valueStr.replaceAll('"', '""')}"`
+                : valueStr;
+        })
+            .join("\t");
+    })
+        .join("\n");
+}
+export function getBlob(table) {
+    const rows = table.getRowModel().rows;
+    if (rows.length === 0)
+        return;
+    // Get downloadable columns based on getCanDownload property.
+    const downloadableColumns = getDownloadableColumns(table);
+    // Extract column IDs for filtering.
+    const downloadableColumnIds = downloadableColumns.map((column) => column.id);
+    // Get table headers from downloadable columns.
+    const tableHeaders = downloadableColumns.map(getColumnHeader);
+    // Get row data but only for downloadable columns.
+    const tableData = rows.map((row) => downloadableColumnIds.map((columnId) => row.getValue(columnId)));
+    const tsv = formatDataToTSV([tableHeaders, ...tableData]);
+    return new Blob([tsv], { type: "text/tab-separated-values" });
+}
+/**
+ * Filters table columns from column.getCanDownload API.
+ * @param table - Table.
+ * @returns Columns configured to be downloadable.
+ */
+export function getDownloadableColumns(table) {
+    return table.getAllColumns().filter((column) => column.getCanTableDownload());
+}

package/lib/components/Table/features/TableDownload/types.d.ts

@@ -0,0 +1,15 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface TableDownloadColumn {
+    getCanTableDownload: () => boolean;
+}
+export interface TableDownloadColumnDef {
+    enableTableDownload?: boolean;
+}
+export interface TableDownloadInstance {
+    downloadData: () => void;
+}
+export interface TableDownloadOptions<T extends RowData> {
+    downloadFilename?: string;
+    enableTableDownload?: boolean;
+    onTableDownload?: (table: Table<T>) => void;
+}

package/lib/components/Table/features/TableDownload/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/features/TableDownload/utils.d.ts

@@ -0,0 +1,19 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Function that downloads the table data as a TSV file.
+ * Uses the onDownload callback, or a custom download function if provided.
+ * @param table - Table.
+ */
+export declare function downloadData<T extends RowData>(table: Table<T>): void;
+/**
+ * Returns true if column can be downloaded.
+ * @param column - Column.
+ * @param table - Table.
+ * @returns True if column can be downloaded.
+ */
+export declare function getCanTableDownload<T extends RowData, TValue>(column: Column<T, TValue>, table: Table<T>): boolean;
+/**
+ * Default download function that downloads the table data as a TSV file.
+ * @param table - Table.
+ */
+export declare function onTableDownload<T extends RowData>(table: Table<T>): void;

package/lib/components/Table/features/TableDownload/utils.js

@@ -0,0 +1,46 @@
+import { getBlob } from "./onDownload/utils";
+/**
+ * Function that downloads the table data as a TSV file.
+ * Uses the onDownload callback, or a custom download function if provided.
+ * @param table - Table.
+ */
+export function downloadData(table) {
+    table.options.onTableDownload?.(table);
+}
+/**
+ * Returns true if column can be downloaded.
+ * @param column - Column.
+ * @param table - Table.
+ * @returns True if column can be downloaded.
+ */
+export function getCanTableDownload(column, table) {
+    return ((column.columnDef.enableTableDownload ?? true) &&
+        (table.options.enableTableDownload ?? false));
+}
+/**
+ * Default download function that downloads the table data as a TSV file.
+ * @param table - Table.
+ */
+export function onTableDownload(table) {
+    // Check if download is enabled.
+    if (!(table.options.enableTableDownload ?? false))
+        return;
+    // Generate the blob.
+    const blob = getBlob(table);
+    if (!blob)
+        return;
+    // Create an object URL for the blob.
+    const url = URL.createObjectURL(blob);
+    // Create a download link.
+    const anchorEl = document.createElement("a");
+    anchorEl.href = url;
+    anchorEl.download = table.options.downloadFilename || "table-data.tsv";
+    // Append to the document body for better cross-browser support.
+    document.body.appendChild(anchorEl);
+    // Trigger the download.
+    anchorEl.click();
+    // Remove the element after triggering download.
+    document.body.removeChild(anchorEl);
+    // Clean up.
+    URL.revokeObjectURL(url);
+}

package/lib/components/Table/features/entities.d.ts

@@ -1,8 +1,14 @@
 import { RowData } from "@tanstack/react-table";
 import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+import { RowSelectionValidationOptions, RowSelectionValidationRow } from "./RowSelectionValidation/types";
+import { TableDownloadColumn, TableDownloadInstance, TableDownloadOptions } from "./TableDownload/types";
+export type CustomFeatureColumn = TableDownloadColumn;
+export interface CustomFeatureInstance<T extends RowData> extends TableDownloadInstance, RowPreviewInstance<T> {
+}
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
-export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
-export type CustomFeatureOptions = RowPreviewOptions & RowPositionOptions;
-export type CustomFeatureRow = RowPositionRow & RowPreviewRow;
+export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions, RowSelectionValidationOptions<T> {
+}
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow, RowSelectionValidationRow {
+}
 export type CustomFeatureTableState = RowPreviewTableState;

package/lib/components/TableCreator/options/hook.js

@@ -2,7 +2,6 @@ import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
 import { useInitialState } from "./initialState/hook";
-import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
 import { useVisibilityOptions } from "./visibility/hook";
 export function useTableOptions() {
@@ -10,14 +9,12 @@ export function useTableOptions() {
     const tableOptions = entityConfig.list.tableOptions;
     const expandedOptions = useExpandedOptions();
     const groupingOptions = useGroupingOptions();
-    const rowSelectionOptions = useRowSelectionOptions();
     const sortingOptions = useSortingOptions();
     const visibilityOptions = useVisibilityOptions();
     const initialState = useInitialState(tableOptions);
     return {
         ...expandedOptions,
         ...groupingOptions,
-        ...rowSelectionOptions,
         ...sortingOptions, // TODO(cc) merge of all sorting options.
         ...visibilityOptions,
         ...tableOptions,

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const UncheckedDisabledIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.js

@@ -0,0 +1,8 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+export const UncheckedDisabledIcon = ({ fontSize = "xsmall", viewBox = "0 0 18 18", ...props }) => {
+    return (React.createElement(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props },
+        React.createElement("path", { d: "M4 0.5H14C15.933 0.5 17.5 2.067 17.5 4V14C17.5 15.933 15.933 17.5 14 17.5H4C2.067 17.5 0.5 15.933 0.5 14V4C0.5 2.067 2.067 0.5 4 0.5Z", stroke: PALETTE.SMOKE_MAIN }),
+        React.createElement("rect", { x: "0.5", y: "0.5", width: "17", height: "17", rx: "3.5", fill: PALETTE.SMOKE_LIGHT, stroke: PALETTE.SMOKE_MAIN })));
+};

package/lib/config/entities.d.ts

@@ -215,7 +215,6 @@ export interface ListConfig<T extends RowData> {
  */
 export interface ListViewConfig {
     disablePagination?: boolean;
-    enableDownload?: boolean;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "44.0.0",
+  "version": "45.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Table/options/core/constants.ts

@@ -1,11 +1,12 @@
 import { CoreOptions, getCoreRowModel, RowData } from "@tanstack/react-table";
 import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
+import { TABLE_DOWNLOAD } from "../../../../../Table/features/TableDownload/constants";
 
 export const CORE_OPTIONS: Pick<
   CoreOptions<RowData>,
   "_features" | "getCoreRowModel"
 > = {
-  _features: [ROW_POSITION, ROW_PREVIEW],
+  _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
   getCoreRowModel: getCoreRowModel(),
 };

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -1,5 +1,6 @@
 import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
+import { TABLE_DOWNLOAD_OPTIONS } from "../../../../Table/featureOptions/tableDownload/constants";
 import { useColumnFiltersOptions } from "./columnFilters/hook";
 import { CORE_OPTIONS } from "./core/constants";
 import { EXPANDED_OPTIONS } from "./expanded/constants";
@@ -30,6 +31,7 @@ export const useTableOptions = <T extends RowData = Attribute>(): Omit<
     ...GROUPING_OPTIONS,
     ...PAGINATION_OPTIONS,
     ...SORTING_OPTIONS,
+    ...TABLE_DOWNLOAD_OPTIONS,
     ...VISIBILITY_OPTIONS,
   } as TableOptions<T>;
 };

package/src/components/Detail/components/Table/common/utils.ts

@@ -13,7 +13,7 @@ export function generateColumnDefinitions<T extends RowData>(
       ...column,
       meta: {
         ...column.meta,
-        header: column.meta?.header || (column.header as string),
+        header: column.meta?.header ?? (column.header as string),
       },
     };
   });

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -31,6 +31,7 @@ export const CollapsableRows = <T extends RowData>({
             key={row.id}
             id={row.id}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -37,9 +37,11 @@ export const TableRows = <T extends RowData>({
             key={row.id}
             id={row.id}
             canExpand={row.getCanExpand()}
+            canSelect={row.getCanSelect()}
             isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
             onClick={() => handleToggleExpanded(row)}
           >
             {row.getVisibleCells().map((cell) => {

package/src/components/Detail/components/Table/table.tsx

@@ -20,8 +20,11 @@ import { arrIncludesSome } from "../../../Table/columnDef/columnFilters/filterFn
 import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { TABLE_DOWNLOAD_OPTIONS } from "../../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../../Table/features/RowSelectionValidation/constants";
+import { TABLE_DOWNLOAD } from "../../../Table/features/TableDownload/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
 import { TableBody } from "./components/TableBody/tableBody";
@@ -58,7 +61,12 @@ export const Table = <T extends RowData>({
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};
   const tableInstance = useReactTable({
-    _features: [ROW_POSITION, ROW_PREVIEW],
+    _features: [
+      ROW_POSITION,
+      ROW_PREVIEW,
+      ROW_SELECTION_VALIDATION,
+      TABLE_DOWNLOAD,
+    ],
     columns: generateColumnDefinitions([
       COLUMN_DEF.ROW_POSITION as ColumnDef<T>,
       ...columns,
@@ -67,6 +75,7 @@ export const Table = <T extends RowData>({
     enableSorting: false,
     filterFns: { arrIncludesSome },
     getCoreRowModel: getCoreRowModel(),
+    ...TABLE_DOWNLOAD_OPTIONS,
     ...tableOptions,
   });
   return (

package/src/components/Index/table/hook.ts

@@ -34,9 +34,12 @@ import {
   sortingFn,
 } from "../../Table/common/utils";
 import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
+import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { RowPreviewState } from "../../Table/features/RowPreview/entities";
+import { ROW_SELECTION_VALIDATION } from "../../Table/features/RowSelectionValidation/constants";
+import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
 import { createCell } from "./coreOptions/columns/cellFactory";
@@ -162,7 +165,12 @@ UseTableProps): UseTable<T> => {
    * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
    */
   const table = useReactTable<T>({
-    _features: [ROW_POSITION, ROW_PREVIEW],
+    _features: [
+      ROW_POSITION,
+      ROW_PREVIEW,
+      ROW_SELECTION_VALIDATION,
+      TABLE_DOWNLOAD,
+    ],
     columns: columnDefs,
     data: listItems || [],
     enableColumnFilters: true, // client-side filtering.
@@ -187,6 +195,7 @@ UseTableProps): UseTable<T> => {
     onRowSelectionChange,
     onSortingChange,
     pageCount,
+    ...TABLE_DOWNLOAD_OPTIONS,
     state,
     ...tableOptions,
   });

package/src/components/Table/common/columnDef.ts

@@ -12,6 +12,7 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
+    enableTableDownload: false,
     header: "",
     id: COLUMN_IDENTIFIER.ROW_POSITION,
     meta: {
@@ -27,6 +28,7 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
+    enableTableDownload: false,
     header: HeadSelectionCell,
     id: COLUMN_IDENTIFIER.ROW_SELECTION,
     meta: {

package/src/components/Table/common/utils.ts

@@ -11,7 +11,6 @@ import {
 } from "@tanstack/react-table";
 import { Category } from "../../../common/categories/models/types";
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode/types";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 /**
  * Internal model of a category term count keyed by category term.
@@ -24,11 +23,6 @@ type CountByTerms = Map<any, number>;
  */
 type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 
-/**
- * Model of possible table data values.
- */
-type TableData = number | string | string[];
-
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
@@ -100,49 +94,6 @@ export function getColumnHeader<T extends RowData>(column: Column<T>): string {
   return meta?.header || id;
 }
 
-/**
- * Format data to TSV string.
- * @param data - Table data.
- * @returns table data formatted into a TSV string.
- */
-function formatDataToTSV(data: TableData[][]): string {
-  return data
-    .map((row) => {
-      return row
-        .map((data) => {
-          // Use empty string in place of undefined and null.
-          if (data === undefined || data === null) return "";
-          // Convert to string.
-          const dataString = Array.isArray(data)
-            ? data.join(", ")
-            : String(data);
-          // Quote if necessary.
-          return /[\t\r\n"]/.test(dataString)
-            ? `"${dataString.replaceAll('"', '""')}"`
-            : dataString;
-        })
-        .join("\t");
-    })
-    .join("\n");
-}
-
-/**
- * Returns filtered entity results as a blob.
- * @param rows - Table rows.
- * @returns filtered entity results as a blob.
- */
-export function generateDownloadBlob<T extends RowData>(
-  rows: Row<T>[]
-): Blob | undefined {
-  if (rows.length === 0) {
-    return;
-  }
-  const tableHeaders = getHeadersTableData(rows);
-  const tableData = getRowsTableData(rows);
-  const tsv = formatDataToTSV([tableHeaders, ...tableData]);
-  return new Blob([tsv], { type: "text/tab-separated-values" });
-}
-
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -225,32 +176,6 @@ export function getTableStatePagination(
   };
 }
 
-/**
- * Returns the list of table headers, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of headers.
- */
-function getHeadersTableData<T extends RowData>(rows: Row<T>[]): TableData[] {
-  return rows[0]
-    .getAllCells()
-    .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-    .map((cell) => cell.column.columnDef.header as TableData);
-}
-
-/**
- * Returns the list of table data, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of data.
- */
-function getRowsTableData<T extends RowData>(rows: Row<T>[]): TableData[][] {
-  return rows.map((row) =>
-    row
-      .getAllCells()
-      .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-      .map((cell) => cell.getValue() as TableData)
-  );
-}
-
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.

package/src/components/Table/components/TableCell/components/RowSelectionCell/constants.ts

@@ -0,0 +1,15 @@
+import { TooltipProps } from "@mui/material";
+
+export const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  arrow: true,
+  disableInteractive: true,
+  slotProps: {
+    popper: {
+      modifiers: [
+        { name: "offset", options: { offset: [0, -4] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+      ],
+    },
+    tooltip: { sx: { maxWidth: "220px" } },
+  },
+};

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -1,24 +1,36 @@
-import { Checkbox as MCheckbox } from "@mui/material";
+import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedDisabledIcon } from "../../../../../common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { TOOLTIP_PROPS } from "./constants";
 
 export const RowSelectionCell = <T extends RowData, TValue = unknown>({
   row,
 }: CellContext<T, TValue>): JSX.Element => {
-  const { getIsSelected, getToggleSelectedHandler } = row;
+  const {
+    getCanSelect,
+    getIsSelected,
+    getSelectionValidation,
+    getToggleSelectedHandler,
+  } = row;
   return (
-    <MCheckbox
-      checked={getIsSelected()}
-      checkedIcon={<CheckedIcon />}
-      icon={<UncheckedIcon />}
-      /*
-       * Prevents click events from bubbling up to parent components
-       * (such as CardActionArea or Accordion) when the checkbox is activated.
-       */
-      onClick={(e) => e.stopPropagation()}
-      onChange={getToggleSelectedHandler()}
-    />
+    <Tooltip {...TOOLTIP_PROPS} title={getSelectionValidation?.()}>
+      <span>
+        <MCheckbox
+          checked={getIsSelected()}
+          checkedIcon={<CheckedIcon />}
+          disabled={!getCanSelect()}
+          icon={getCanSelect() ? <UncheckedIcon /> : <UncheckedDisabledIcon />}
+          /*
+           * Prevents click events from bubbling up to parent components
+           * (such as CardActionArea or Accordion) when the checkbox is activated.
+           */
+          onClick={(e) => e.stopPropagation()}
+          onChange={getToggleSelectedHandler()}
+        />
+      </span>
+    </Tooltip>
   );
 };

package/src/components/Table/components/{DownloadEntityResults/downloadEntityResults.styles.ts → TableFeatures/TableDownload/tableDownload.styles.ts}

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../styles/common/mixins/breakpoints";
 
 export const StyledButton = styled(Button)`
   ${bpDownSm} {

package/src/components/Table/components/TableFeatures/TableDownload/tableDownload.tsx

@@ -0,0 +1,23 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { DownloadIcon } from "../../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { StyledButton } from "./tableDownload.styles";
+import { TableDownloadProps } from "./types";
+
+export const TableDownload = <T extends RowData>({
+  className,
+  table,
+}: TableDownloadProps<T>): JSX.Element | null => {
+  if (!table.options.enableTableDownload) return null;
+  return (
+    <StyledButton
+      {...BUTTON_PROPS.SECONDARY_CONTAINED}
+      className={className}
+      onClick={() => table.downloadData()}
+      startIcon={<DownloadIcon />}
+    >
+      Download TSV
+    </StyledButton>
+  );
+};

package/src/components/Table/components/TableFeatures/TableDownload/types.ts

@@ -0,0 +1,7 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+
+export interface TableDownloadProps<T extends RowData>
+  extends BaseComponentProps {
+  table: Table<T>;
+}

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -6,17 +6,21 @@ import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export interface StyledTableRowProps {
   canExpand?: boolean;
+  canSelect?: boolean;
   isExpanded?: boolean;
   isGrouped?: boolean;
   isPreview?: boolean;
+  isSelected?: boolean;
 }
 
 export const StyledTableRow = styled(MTableRow, {
   shouldForwardProp: (prop) =>
     prop !== "canExpand" &&
+    prop !== "canSelect" &&
     prop !== "isExpanded" &&
+    prop !== "isGrouped" &&
     prop !== "isPreview" &&
-    prop !== "isGrouped",
+    prop !== "isSelected",
 })<StyledTableRowProps>`
   && {
     transition: background-color 300ms ease-in;
@@ -54,5 +58,19 @@ export const StyledTableRow = styled(MTableRow, {
       css`
         background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
+
+    ${({ isSelected }) =>
+      isSelected &&
+      css`
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
+      `}
+
+    ${({ canSelect }) =>
+      !canSelect &&
+      css`
+        .MuiTableCell-root {
+          color: ${PALETTE.INK_LIGHT};
+        }
+      `}
   }
 `;

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -33,6 +33,7 @@ export const CollapsableRows = <T extends RowData>({
             data-index={rowIndex}
             ref={virtualizer.measureElement}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -30,10 +30,12 @@ export const TableRows = <T extends RowData>({
           <StyledTableRow
             key={row.id}
             canExpand={getCanExpand()}
+            canSelect={row.getCanSelect()}
             data-index={rowIndex}
             isExpanded={getIsExpanded()}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
+            isSelected={row.getIsSelected()}
             onClick={() => handleToggleExpanded(row)}
             ref={virtualizer.measureElement}
           >