@databiosphere/findable-ui 44.0.0 → 45.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "44.0.0"
+  ".": "45.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [45.1.0](https://github.com/DataBiosphere/findable-ui/compare/v45.0.0...v45.1.0) (2025-09-18)
+
+
+### Features
+
+* extend row selection feature to handle validation messages for each row ([#666](https://github.com/DataBiosphere/findable-ui/issues/666)) ([#669](https://github.com/DataBiosphere/findable-ui/issues/669)) ([04fc041](https://github.com/DataBiosphere/findable-ui/commit/04fc0411cae9f1ae9c47d8f384e599413cffe639))
+* update row selection component to display disabled state ([#663](https://github.com/DataBiosphere/findable-ui/issues/663)) ([#667](https://github.com/DataBiosphere/findable-ui/issues/667)) ([c2c9fb2](https://github.com/DataBiosphere/findable-ui/commit/c2c9fb24e458858dd6d26be2be8e74f4e3e976da))
+* update table row to display disabled state ([#665](https://github.com/DataBiosphere/findable-ui/issues/665)) ([#668](https://github.com/DataBiosphere/findable-ui/issues/668)) ([2c6000f](https://github.com/DataBiosphere/findable-ui/commit/2c6000f86d0066b91409032f9970284f6b4b6443))
+
+## [45.0.0](https://github.com/DataBiosphere/findable-ui/compare/v44.0.0...v45.0.0) (2025-09-10)
+
+
+### ⚠ BREAKING CHANGES
+
+* refactor existing tabletoolbar with download button component ([#652](https://github.com/DataBiosphere/findable-ui/issues/652)) (#656)
+
+### Features
+
+* create download button ([#651](https://github.com/DataBiosphere/findable-ui/issues/651)) ([#655](https://github.com/DataBiosphere/findable-ui/issues/655)) ([2c4959a](https://github.com/DataBiosphere/findable-ui/commit/2c4959ac3f30e81d65466d3b3edfa559997053d6))
+* create new tabletoolbar  with download button - independent of explorestate ([#653](https://github.com/DataBiosphere/findable-ui/issues/653)) ([028558a](https://github.com/DataBiosphere/findable-ui/commit/028558a3f0d7bc51da5bc30a1e847b04c41c32c0))
+* create new tabletoolbar with download button - independent of explorestate ([#653](https://github.com/DataBiosphere/findable-ui/issues/653)) ([#657](https://github.com/DataBiosphere/findable-ui/issues/657)) ([028558a](https://github.com/DataBiosphere/findable-ui/commit/028558a3f0d7bc51da5bc30a1e847b04c41c32c0))
+* implement tanstack custom feature to support download table data ([#650](https://github.com/DataBiosphere/findable-ui/issues/650)) ([#654](https://github.com/DataBiosphere/findable-ui/issues/654)) ([c897fbb](https://github.com/DataBiosphere/findable-ui/commit/c897fbb68003af09fe04ccbfed18ec71fe8ef5a7))
+* refactor existing tabletoolbar with download button component ([#652](https://github.com/DataBiosphere/findable-ui/issues/652)) ([#656](https://github.com/DataBiosphere/findable-ui/issues/656)) ([f4d5695](https://github.com/DataBiosphere/findable-ui/commit/f4d5695c28e1f4a6d7a3df2d684d4472005f33c0))
+
+
+### Code Refactoring
+
+* align table download feature more closely with tanstack standards ([#659](https://github.com/DataBiosphere/findable-ui/issues/659)) ([#660](https://github.com/DataBiosphere/findable-ui/issues/660)) ([46d3bb3](https://github.com/DataBiosphere/findable-ui/commit/46d3bb315f8aaf4ed25c7c5c81e364d7c000f332))
+
 ## [44.0.0](https://github.com/DataBiosphere/findable-ui/compare/v43.0.0...v44.0.0) (2025-08-28)
 
 

package/lib/components/DataDictionary/components/Table/options/core/constants.js

@@ -1,7 +1,8 @@
 import { getCoreRowModel } 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 = {
-    _features: [ROW_POSITION, ROW_PREVIEW],
+    _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
     getCoreRowModel: getCoreRowModel(),
 };

package/lib/components/DataDictionary/components/Table/options/hook.js

@@ -1,3 +1,4 @@
+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";
@@ -22,6 +23,7 @@ export const useTableOptions = () => {
         ...GROUPING_OPTIONS,
         ...PAGINATION_OPTIONS,
         ...SORTING_OPTIONS,
+        ...TABLE_DOWNLOAD_OPTIONS,
         ...VISIBILITY_OPTIONS,
     };
 };

package/lib/components/Detail/components/Table/common/utils.js

@@ -9,7 +9,7 @@ export function generateColumnDefinitions(columns) {
             ...column,
             meta: {
                 ...column.meta,
-                header: column.meta?.header || column.header,
+                header: column.meta?.header ?? column.header,
             },
         };
     });

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0 && !leafOrSubRows)
             return null; // Hide sub rows that are not already leaf or sub rows.
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -10,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { 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) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Detail/components/Table/table.js

@@ -6,8 +6,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";
@@ -18,7 +21,12 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
     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,
             ...columns,
@@ -27,6 +35,7 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
         enableSorting: false,
         filterFns: { arrIncludesSome },
         getCoreRowModel: getCoreRowModel(),
+        ...TABLE_DOWNLOAD_OPTIONS,
         ...tableOptions,
     });
     return (React.createElement(TableContainer, { className: className, sx: tableContainerSx },

package/lib/components/Index/table/hook.js

@@ -11,8 +11,11 @@ import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../Table/common/columnDef";
 import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, 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 { 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";
@@ -97,7 +100,12 @@ export const useTable = ({ entityListType, }) => {
      * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
      */
     const table = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW],
+        _features: [
+            ROW_POSITION,
+            ROW_PREVIEW,
+            ROW_SELECTION_VALIDATION,
+            TABLE_DOWNLOAD,
+        ],
         columns: columnDefs,
         data: listItems || [],
         enableColumnFilters: true, // client-side filtering.
@@ -122,6 +130,7 @@ export const useTable = ({ entityListType, }) => {
         onRowSelectionChange,
         onSortingChange,
         pageCount,
+        ...TABLE_DOWNLOAD_OPTIONS,
         state,
         ...tableOptions,
     });

package/lib/components/Table/common/columnDef.js

@@ -10,6 +10,7 @@ export const COLUMN_DEF = {
         enableGrouping: false,
         enableHiding: false,
         enableSorting: false,
+        enableTableDownload: false,
         header: "",
         id: COLUMN_IDENTIFIER.ROW_POSITION,
         meta: {
@@ -25,6 +26,7 @@ export const COLUMN_DEF = {
         enableGrouping: false,
         enableHiding: false,
         enableSorting: false,
+        enableTableDownload: false,
         header: HeadSelectionCell,
         id: COLUMN_IDENTIFIER.ROW_SELECTION,
         meta: {

package/lib/components/Table/common/utils.d.ts

@@ -22,12 +22,6 @@ export declare function buildCategoryViews<T extends RowData>(columns: Column<T>
  * @returns column header.
  */
 export declare function getColumnHeader<T extends RowData>(column: Column<T>): string;
-/**
- * Returns filtered entity results as a blob.
- * @param rows - Table rows.
- * @returns filtered entity results as a blob.
- */
-export declare function generateDownloadBlob<T extends RowData>(rows: Row<T>[]): Blob | undefined;
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see

package/lib/components/Table/common/utils.js

@@ -1,6 +1,5 @@
 import { memo, sortingFns, } from "@tanstack/react-table";
 import { EXPLORE_MODE } from "../../../hooks/useExploreMode/types";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
@@ -60,46 +59,6 @@ export function getColumnHeader(column) {
     // Return header from meta or id.
     return meta?.header || id;
 }
-/**
- * Format data to TSV string.
- * @param data - Table data.
- * @returns table data formatted into a TSV string.
- */
-function formatDataToTSV(data) {
-    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(rows) {
-    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
@@ -166,28 +125,6 @@ export function getTableStatePagination(pageIndex = 0, pageSize) {
         pageSize,
     };
 }
-/**
- * Returns the list of table headers, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of headers.
- */
-function getHeadersTableData(rows) {
-    return rows[0]
-        .getAllCells()
-        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-        .map((cell) => cell.column.columnDef.header);
-}
-/**
- * Returns the list of table data, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of data.
- */
-function getRowsTableData(rows) {
-    return rows.map((row) => row
-        .getAllCells()
-        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-        .map((cell) => cell.getValue()));
-}
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Partial<TooltipProps>;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.js

@@ -0,0 +1,13 @@
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    disableInteractive: true,
+    slotProps: {
+        popper: {
+            modifiers: [
+                { name: "offset", options: { offset: [0, -4] } },
+                { name: "preventOverflow", options: { padding: 8 } },
+            ],
+        },
+        tooltip: { sx: { maxWidth: "220px" } },
+    },
+};

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -1,13 +1,17 @@
-import { Checkbox as MCheckbox } from "@mui/material";
+import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
 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 = ({ row, }) => {
-    const { getIsSelected, getToggleSelectedHandler } = row;
-    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), 
-        /*
-         * 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() }));
+    const { getCanSelect, getIsSelected, getSelectionValidation, getToggleSelectedHandler, } = row;
+    return (React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: getSelectionValidation?.() },
+        React.createElement("span", null,
+            React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), disabled: !getCanSelect(), icon: getCanSelect() ? React.createElement(UncheckedIcon, null) : React.createElement(UncheckedDisabledIcon, null), 
+                /*
+                 * 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() }))));
 };

package/lib/components/Table/components/TableFeatures/TableDownload/tableDownload.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableDownloadProps } from "./types";
+export declare const TableDownload: <T extends RowData>({ className, table, }: TableDownloadProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableFeatures/TableDownload/tableDownload.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { DownloadIcon } from "../../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { StyledButton } from "./tableDownload.styles";
+export const TableDownload = ({ className, table, }) => {
+    if (!table.options.enableTableDownload)
+        return null;
+    return (React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, className: className, onClick: () => table.downloadData(), startIcon: React.createElement(DownloadIcon, null) }, "Download TSV"));
+};

package/lib/components/Table/components/{DownloadEntityResults/downloadEntityResults.styles.js → TableFeatures/TableDownload/tableDownload.styles.js}

@@ -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} {
     display: none;

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

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

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

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

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,8 +1,10 @@
 export interface StyledTableRowProps {
     canExpand?: boolean;
+    canSelect?: boolean;
     isExpanded?: boolean;
     isGrouped?: boolean;
     isPreview?: boolean;
+    isSelected?: boolean;
 }
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -5,9 +5,11 @@ import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 export const StyledTableRow = styled(MTableRow, {
     shouldForwardProp: (prop) => prop !== "canExpand" &&
+        prop !== "canSelect" &&
         prop !== "isExpanded" &&
+        prop !== "isGrouped" &&
         prop !== "isPreview" &&
-        prop !== "isGrouped",
+        prop !== "isSelected",
 }) `
   && {
     transition: background-color 300ms ease-in;
@@ -42,5 +44,17 @@ 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/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -13,7 +13,7 @@ export const CollapsableRows = ({ rows, tableInstance, virtualizer, }) => {
         const row = rows[rowIndex];
         if (grouping.length > 0 && row.depth > 0)
             return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
-        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Table/components/TableRows/tableRows.js

@@ -11,7 +11,7 @@ export const TableRows = ({ rows, virtualizer, }) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
         const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
-        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        return (React.createElement(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 }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -3,8 +3,8 @@ import React, { Fragment } from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ViewToggle } from "../../../Index/components/EntityView/components/controls/ViewToggle/viewToggle";
 import { isAnyRowSelected } from "../../common/utils";
-import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
 import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
@@ -16,14 +16,14 @@ export const TableToolbar = ({ listView, tableInstance, }) => {
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
     const { getSelectedRowModel } = tableInstance;
-    const { enableDownload, rowPreviewView } = listView || {};
+    const { rowPreviewView } = listView || {};
     return (React.createElement(Fragment, null,
         React.createElement(StyledToolbar, null,
             React.createElement(Grid, { ...GRID_PROPS, gap: 6 },
                 React.createElement(ViewToggle, null),
                 isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: currentPage === pages ? rows : pageSize * currentPage, totalResult: rows }))),
             React.createElement(Grid, { ...GRID_PROPS },
-                enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+                React.createElement(TableDownload, { table: tableInstance }),
                 React.createElement(ColumnGrouping, { tableInstance: tableInstance }),
                 React.createElement(ColumnVisibility, { tableInstance: tableInstance }))),
         React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));

package/lib/components/Table/components/TableToolbar2/tableToolbar2.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableToolbar2Props } from "./types";
+export declare const TableToolbar2: <T extends RowData>({ table, }: TableToolbar2Props<T>) => JSX.Element;

package/lib/components/Table/components/TableToolbar2/tableToolbar2.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
+import { StyledStack, StyledToolbar } from "./tableToolbar2.styles";
+export const TableToolbar2 = ({ table, }) => {
+    return (React.createElement(StyledToolbar, null,
+        React.createElement(StyledStack, null,
+            React.createElement(TableDownload, { table: table }))));
+};

package/lib/components/Table/components/TableToolbar2/tableToolbar2.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledToolbar: import("@emotion/styled").StyledComponent<import("@mui/material").ToolbarOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "disableGutters"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar2/tableToolbar2.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Toolbar as MToolbar, Stack } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+export const StyledToolbar = styled(MToolbar) `
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  display: flex;
+  padding: 16px;
+`;
+export const StyledStack = styled(Stack) `
+  align-items: center;
+  flex: 1;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+`;

package/lib/components/Table/components/TableToolbar2/types.d.ts

@@ -0,0 +1,4 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface TableToolbar2Props<T extends RowData> {
+    table: Table<T>;
+}

package/lib/components/Table/components/TableToolbar2/types.js

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

package/lib/components/Table/featureOptions/tableDownload/constants.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableDownloadOptions } from "../../features/TableDownload/types";
+export declare const TABLE_DOWNLOAD_OPTIONS: Pick<TableDownloadOptions<RowData>, "enableTableDownload">;

package/lib/components/Table/featureOptions/tableDownload/constants.js

@@ -0,0 +1,3 @@
+export const TABLE_DOWNLOAD_OPTIONS = {
+    enableTableDownload: false,
+};

package/lib/components/Table/features/RowSelectionValidation/constants.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const ROW_SELECTION_VALIDATION: TableFeature;

package/lib/components/Table/features/RowSelectionValidation/constants.js

@@ -0,0 +1,14 @@
+import { getSelectionValidation } from "./utils";
+export const ROW_SELECTION_VALIDATION = {
+    createRow: (row, table) => {
+        row.getSelectionValidation = () => {
+            return getSelectionValidation(row, table);
+        };
+    },
+    getDefaultOptions: () => {
+        return {
+            enableRowSelectionValidation: false,
+            getRowSelectionValidation: undefined,
+        };
+    },
+};

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

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+export interface RowSelectionValidationOptions<T extends RowData> {
+    enableRowSelectionValidation?: boolean;
+    getRowSelectionValidation?: (row: Row<T>) => string | undefined;
+}
+export interface RowSelectionValidationRow {
+    getSelectionValidation?: () => string | undefined;
+}

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

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

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

@@ -0,0 +1,8 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export declare function getSelectionValidation<T extends RowData>(row: Row<T>, table: Table<T>): string | undefined;

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

@@ -0,0 +1,11 @@
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export function getSelectionValidation(row, table) {
+    if (!table.options.enableRowSelectionValidation)
+        return;
+    return table.options.getRowSelectionValidation?.(row);
+}

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

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const TABLE_DOWNLOAD: TableFeature;

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

@@ -0,0 +1,10 @@
+import { downloadData, getCanTableDownload, onTableDownload } from "./utils";
+export const TABLE_DOWNLOAD = {
+    createColumn: (column, table) => {
+        column.getCanTableDownload = () => getCanTableDownload(column, table);
+    },
+    createTable: (table) => {
+        table.downloadData = () => downloadData(table);
+    },
+    getDefaultOptions: () => ({ enableTableDownload: false, onTableDownload }),
+};

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

@@ -0,0 +1,14 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Format data to TSV string.
+ * @param data - Table data.
+ * @returns table data formatted into a TSV string.
+ */
+export declare function formatDataToTSV(data: unknown[][]): string;
+export declare function getBlob<T extends RowData>(table: Table<T>): Blob | undefined;
+/**
+ * Filters table columns from column.getCanDownload API.
+ * @param table - Table.
+ * @returns Columns configured to be downloadable.
+ */
+export declare function getDownloadableColumns<T extends RowData>(table: Table<T>): Column<T>[];