@databiosphere/findable-ui 44.0.0 → 45.0.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [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/table.js

@@ -6,8 +6,10 @@ 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 { 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 +20,7 @@ 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, TABLE_DOWNLOAD],
         columns: generateColumnDefinitions([
             COLUMN_DEF.ROW_POSITION,
             ...columns,
@@ -27,6 +29,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,10 @@ 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 { 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 +99,7 @@ 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, TABLE_DOWNLOAD],
         columns: columnDefs,
         data: listItems || [],
         enableColumnFilters: true, // client-side filtering.
@@ -122,6 +124,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/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/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/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>[];

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,13 @@
 import { RowData } from "@tanstack/react-table";
 import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+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 {
+}
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {
+}
 export type CustomFeatureTableState = RowPreviewTableState;

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.0.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/table.tsx

@@ -20,8 +20,10 @@ 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 { 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 +60,7 @@ 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, TABLE_DOWNLOAD],
     columns: generateColumnDefinitions([
       COLUMN_DEF.ROW_POSITION as ColumnDef<T>,
       ...columns,
@@ -67,6 +69,7 @@ export const Table = <T extends RowData>({
     enableSorting: false,
     filterFns: { arrIncludesSome },
     getCoreRowModel: getCoreRowModel(),
+    ...TABLE_DOWNLOAD_OPTIONS,
     ...tableOptions,
   });
   return (