@databiosphere/findable-ui 17.0.0 → 19.0.0

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/menuItems.js

@@ -0,0 +1,12 @@
+import { ListItemText, MenuItem } from "@mui/material";
+import React from "react";
+import { handleToggleGrouping } from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { MENU_ITEM_PROPS } from "../../constants";
+export const MenuItems = ({ closeMenu, groupingByColumnId, tableInstance, }) => {
+    const columnByMenuItem = [...groupingByColumnId.values()];
+    return columnByMenuItem.map(([menuItem, column]) => (React.createElement(MenuItem, { ...MENU_ITEM_PROPS, key: column.id, disabled: !column.getCanGroup(), onClick: () => {
+            handleToggleGrouping(tableInstance, column);
+            closeMenu();
+        }, selected: column.getIsGrouped() },
+        React.createElement(ListItemText, { disableTypography: true }, menuItem))));
+};

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.d.ts

@@ -0,0 +1,7 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { UseMenu } from "../../../../../../../common/Menu/hooks/useMenu";
+export interface MenuItemsProps<T extends RowData> {
+    closeMenu: UseMenu<HTMLButtonElement>["onClose"];
+    groupingByColumnId: Map<string, [string, Column<T>]>;
+    tableInstance: Table<T>;
+}

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.js

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

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/constants.d.ts

@@ -0,0 +1,4 @@
+import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
+export declare const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps>;
+export declare const MENU_PROPS: Partial<MenuProps>;
+export declare const MENU_ITEM_PROPS: Partial<MenuItemProps>;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/constants.js

@@ -0,0 +1,13 @@
+export const LIST_ITEM_TEXT_PROPS = {
+    primaryTypographyProps: {
+        color: "primary",
+        component: "span",
+        variant: "inherit",
+    },
+};
+export const MENU_PROPS = {
+    variant: "menu",
+};
+export const MENU_ITEM_PROPS = {
+    component: "li",
+};

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/types.d.ts

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

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/types.js

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

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/utils.d.ts

@@ -0,0 +1,17 @@
+import { Column, GroupingState, RowData, Table } from "@tanstack/react-table";
+/**
+ * Retrieves the button label for the column grouping dropdown.
+ * Currently, the grouping state supports grouping by a single column only.
+ * @param groupingByColumnId - Map of column groupings by column ID.
+ * @param groupingState - Grouping state.
+ * @returns button label.
+ */
+export declare function getButtonLabel<T extends RowData>(groupingByColumnId: Map<string, [string, Column<T>]>, groupingState: GroupingState): string;
+/**
+ * Retrieves a map of column groupings by column ID from the given table instance.
+ * Columns that are visible, group-able with a `string` header are included and are keyed by
+ * their column ID. The value is a tuple containing the column header and the column instance.
+ * @param table - Table.
+ * @returns map of column grouping by column id.
+ */
+export declare function getColumnGrouping<T extends RowData>(table: Table<T>): Map<string, [string, Column<T>]>;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/utils.js

@@ -0,0 +1,36 @@
+/**
+ * Retrieves the button label for the column grouping dropdown.
+ * Currently, the grouping state supports grouping by a single column only.
+ * @param groupingByColumnId - Map of column groupings by column ID.
+ * @param groupingState - Grouping state.
+ * @returns button label.
+ */
+export function getButtonLabel(groupingByColumnId, groupingState) {
+    const grouping = groupingByColumnId.get(groupingState[0]);
+    if (!grouping)
+        return "Group by";
+    return `Group by: ${grouping[0]}`;
+}
+/**
+ * Retrieves a map of column groupings by column ID from the given table instance.
+ * Columns that are visible, group-able with a `string` header are included and are keyed by
+ * their column ID. The value is a tuple containing the column header and the column instance.
+ * @param table - Table.
+ * @returns map of column grouping by column id.
+ */
+export function getColumnGrouping(table) {
+    const groupingByColumnId = new Map();
+    for (const column of table.getAllColumns()) {
+        const { columnDef: { header }, getCanGroup, getIsVisible, id, } = column;
+        if (!getCanGroup())
+            continue;
+        if (!getIsVisible())
+            continue;
+        // Currently, headers are configured as strings.
+        // Only include columns that have a string header (for now).
+        if (typeof header !== "string")
+            continue;
+        groupingByColumnId.set(id, [header, column]);
+    }
+    return groupingByColumnId;
+}

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.d.ts

@@ -1,9 +1,8 @@
 import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
 import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
 export interface DropdownMenuProps {
-    Button?: DXDropdownMenuProps["Button"];
-    buttonLabel?: string;
+    button?: DXDropdownMenuProps["button"];
     children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
     className?: string;
 }
-export declare const DropdownMenu: ({ Button, buttonLabel, children, className, ...props }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ button, children, className, ...props }: DropdownMenuProps) => JSX.Element;

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.js

@@ -1,18 +1,10 @@
 import React from "react";
-import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
 import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
 const DEFAULT_MENU_PROPS = {
     anchorOrigin: { horizontal: "left", vertical: "bottom" },
     transformOrigin: { horizontal: "left", vertical: "top" },
 };
-export const DropdownMenu = ({ Button = (props) => renderButton({ children: buttonLabel, ...props }), buttonLabel = "Edit", children, className, ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */ }) => {
-    return (React.createElement(RowSelectionDropdownMenu, { ...DEFAULT_MENU_PROPS, className: className, Button: Button, ...props }, ({ closeMenu }) => children({ closeMenu })));
+export const DropdownMenu = ({ button = (props) => (React.createElement(DropdownButton, { ...props }, "Edit")), children, className, ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */ }) => {
+    return (React.createElement(RowSelectionDropdownMenu, { ...DEFAULT_MENU_PROPS, className: className, button: button, ...props }, ({ closeMenu }) => children({ closeMenu })));
 };
-/**
- * Return the dropdown button.
- * @param props - Button props e.g. "onClick".
- * @returns button element.
- */
-function renderButton(props) {
-    return React.createElement(DXDropdownButton, { ...props });
-}

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

@@ -5,6 +5,7 @@ import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
@@ -12,12 +13,12 @@ export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const { exploreState } = useExploreState();
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
-    const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
+    const { getSelectedRowModel, options: { enableGrouping }, resetColumnVisibility, } = tableInstance;
     const { enableDownload, rowPreviewView } = listView || {};
     const isLastPage = currentPage === pages;
     const editColumnOptions = getEditColumnOptions(tableInstance);
     const showToolbar = rowDirection === ROW_DIRECTION.DEFAULT &&
-        (editColumnOptions || enableDownload);
+        (editColumnOptions || enableDownload || enableGrouping);
     /**
      * Resets column visibility to default state.
      */
@@ -29,6 +30,7 @@ export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
             isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
             React.createElement(ToolbarActions, null,
                 enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+                React.createElement(ColumnGrouping, { tableInstance: tableInstance }),
                 React.createElement(CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions })))),
         React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };

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

@@ -6,9 +6,9 @@ export const ROW_POSITION = {
         };
     },
     createTable: (table) => {
-        const originalGetRowModel = table.getRowModel.bind(table);
         table.getRowModel = () => {
-            return getRowModel(table, originalGetRowModel);
+            const rowModel = table.getPaginationRowModel();
+            return getRowModel(table, rowModel);
         };
     },
     getInitialState: (initialState) => {

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

@@ -2,10 +2,10 @@ import { InitialTableState, RowData, RowModel, Table, TableState } from "@tansta
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
- * @param getRowModel - Table getRowModel function.
+ * @param rowModel - Row model.
  * @returns row model.
  */
-export declare function getRowModel<T extends RowData>(table: Table<T>, getRowModel: Table<T>[`getRowModel`]): RowModel<T>;
+export declare function getRowModel<T extends RowData>(table: Table<T>, rowModel: RowModel<T>): RowModel<T>;
 /**
  * Returns the position of the row in the table.
  * @param rowId - Row ID.

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

@@ -3,13 +3,18 @@ import { DEFAULT_PAGINATION } from "../constants";
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
- * @param getRowModel - Table getRowModel function.
+ * @param rowModel - Row model.
  * @returns row model.
  */
-export function getRowModel(table, getRowModel) {
-    const rowModel = getRowModel();
-    rowModel.rows.forEach(({ id }, i) => {
-        rowModel.rowsById[id].getRowPosition = () => calculateRowPosition(table, i);
+export function getRowModel(table, rowModel) {
+    let i = 0;
+    rowModel.flatRows.forEach(({ getIsGrouped, id }) => {
+        const isGroupedRow = getIsGrouped();
+        const index = isGroupedRow ? -1 : i; // Capture the current value of i for this iteration.
+        rowModel.rowsById[id].getRowPosition = () => calculateRowPosition(table, index);
+        if (isGroupedRow)
+            return; // Iterate only for non-grouped rows.
+        i++;
     });
     return rowModel;
 }
@@ -31,6 +36,8 @@ export function getRowPosition(rowId, table) {
  * @returns row position.
  */
 function calculateRowPosition(table, index) {
+    if (index < 0)
+        return index; // Grouped rows have a position of -1.
     const { getState } = table;
     const { pagination: { pageIndex, pageSize }, } = getState();
     return pageIndex * pageSize + (index + 1);

package/lib/components/Table/options/updater.d.ts

@@ -0,0 +1,10 @@
+import { Updater } from "@tanstack/react-table";
+/**
+ * Utility function to resolve TanStack updater into a new value.
+ * If the updater is a function, it is called with the `old` value to compute the new value.
+ * If the updater is not a function, it is returned as-is.
+ * @param updaterOrValue - The updater, either a function or a direct value.
+ * @param old - The (old) value.
+ * @returns Resolved value.
+ */
+export declare function resolveUpdater<T>(updaterOrValue: Updater<T>, old: T): T;

package/lib/components/Table/options/updater.js

@@ -0,0 +1,24 @@
+/**
+ * Type guard to check if the given value is TanStack's updater function.
+ * TanStack updater can either be a function that computes the new value based on the old value,
+ * or a direct value. This type guard identifies whether the provided updater is a function.
+ * @param updaterOrValue - The value to check.
+ * @returns True if the value is a function, false otherwise.
+ */
+function isUpdaterFunction(updaterOrValue) {
+    return typeof updaterOrValue === "function";
+}
+/**
+ * Utility function to resolve TanStack updater into a new value.
+ * If the updater is a function, it is called with the `old` value to compute the new value.
+ * If the updater is not a function, it is returned as-is.
+ * @param updaterOrValue - The updater, either a function or a direct value.
+ * @param old - The (old) value.
+ * @returns Resolved value.
+ */
+export function resolveUpdater(updaterOrValue, old) {
+    if (isUpdaterFunction(updaterOrValue)) {
+        return updaterOrValue(old);
+    }
+    return updaterOrValue;
+}

package/lib/components/Table/table.js

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, SORT_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
@@ -39,7 +39,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
     const { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
-    const { columnsVisibility, enableRowSelection, rowSelection, sorting } = entityPageState[tabValue];
+    const { columnsVisibility, enableRowSelection, grouping, rowSelection, sorting, } = entityPageState[tabValue];
     const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
     const { disablePagination = false, enableRowPreview = false } = listView || {};
     const clientFiltering = isClientFilteringEnabled(exploreMode);
@@ -48,39 +48,46 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         : ROW_DIRECTION.DEFAULT;
     const pagination = useMemo(() => getTableStatePagination(currentPage - 1, pageSize), [currentPage, pageSize]);
     const onSortingChange = (updater) => {
+        // TODO(cc) memoize `onSortingChange` with `useCallback`.
+        // TODO(cc) copy `onSortingChange` to ../options/sorting/hook.ts see src/components/Table/options/grouping/hook.ts for example.
         exploreDispatch({
             payload: typeof updater === "function" ? updater(sorting) : updater,
             type: ExploreActionKind.UpdateSorting,
         });
         // Execute GTM tracking.
+        // TODO(cc) update tracking to handle sorting of multiple columns.
+        // TODO(cc) GTM tracking when `onSortingChange` is triggered only tracks the first column sorted, and takes the value from explore state which is not updated yet.
         track(EVENT_NAME.ENTITY_TABLE_SORTED, {
             [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-            [EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
-            [EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+            [EVENT_PARAM.COLUMN_NAME]: sorting?.[0]?.id, // TODO(cc) sorting should always be at least `[]` and never `undefined`.
+            [EVENT_PARAM.SORT_DIRECTION]: sorting?.[0]?.desc // TODO(cc) sorting should always be at least `[]` and never `undefined`.
                 ? SORT_DIRECTION.DESC
                 : SORT_DIRECTION.ASC,
         });
     };
     const onColumnVisibilityChange = (updater) => {
+        // TODO(cc) memoize `onColumnVisibilityChange` with `useCallback`.
         exploreDispatch({
             payload: typeof updater === "function" ? updater(columnsVisibility) : updater,
             type: ExploreActionKind.UpdateColumnVisibility,
         });
     };
-    const onRowPreviewChange = (updater) => {
+    const onRowPreviewChange = useCallback((updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowPreview) : updater,
             type: ExploreActionKind.UpdateRowPreview,
         });
-    };
-    const onRowSelectionChange = (updater) => {
+    }, [exploreDispatch, rowPreview]);
+    const onRowSelectionChange = useCallback((updater) => {
+        // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowSelection) : updater,
             type: ExploreActionKind.UpdateRowSelection,
         });
-    };
+    }, [exploreDispatch, rowSelection]);
     const state = {
         columnVisibility: columnsVisibility,
+        grouping,
         pagination,
         rowPreview,
         rowSelection,
@@ -107,11 +114,9 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         data: items,
         enableColumnFilters: true, // client-side filtering.
         enableFilters: true, // client-side filtering.
-        enableMultiSort: clientFiltering,
+        enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
         enableRowPreview,
         enableRowSelection,
-        enableSorting: true, // client-side filtering.
-        enableSortingRemoval: false, // client-side filtering.
         getCoreRowModel: getCoreRowModel(),
         getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: clientFiltering
@@ -135,8 +140,8 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
     const { getAllColumns, getRowModel, getState, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
     const allColumns = getAllColumns();
     const { columnFilters } = getState();
-    const { rows: results } = getRowModel();
-    const noResults = !loading && (!results || results.length === 0);
+    const { rows } = getRowModel();
+    const noResults = !loading && (!rows || rows.length === 0);
     const scrollTop = useScroll();
     const visibleColumns = getVisibleFlatColumns();
     const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
@@ -195,8 +200,8 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
                     loading: false,
                     paginationResponse: {
                         ...DEFAULT_PAGINATION_STATE,
-                        pageSize: results.length,
-                        rows: results.length,
+                        pageSize: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
+                        rows: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
                     },
                     selectCategories: buildCategoryViews(allColumns, columnFilters),
                 },
@@ -209,7 +214,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         columnFilters,
         exploreDispatch,
         listItems,
-        results,
+        rows,
     ]);
     function canNextPage() {
         return currentPage < pages;
@@ -223,7 +228,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
             React.createElement(TableContainer, null,
                 React.createElement(GridTable, { collapsable: true, gridTemplateColumns: gridTemplateColumns },
                     React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-                    React.createElement(TableBody, { rowDirection: rowDirection, tableInstance: tableInstance }))),
+                    React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
             !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 })))));
 };
 // TODO(Dave) review whether memo is necessary - flash between tabs / loading state.

package/lib/components/TableCreator/common/constants.d.ts

@@ -1,7 +1,7 @@
 import { RowData } from "@tanstack/react-table";
-import { BaseColumnConfig } from "./entities";
+import { ColumnConfig } from "../../../config/entities";
 export declare const ACCESSOR_KEYS: {
     ROW_POSITION: string;
     SELECT: string;
 };
-export declare const COLUMN_CONFIGS: Record<string, BaseColumnConfig<RowData, unknown>>;
+export declare const COLUMN_CONFIGS: Record<string, ColumnConfig<RowData>>;

package/lib/components/TableCreator/common/constants.js

@@ -9,7 +9,8 @@ export const COLUMN_CONFIGS = {
         columnVisible: false,
         componentConfig: { component: RowSelectionCell },
         disableHiding: true,
-        disableSorting: true,
+        enableGrouping: false,
+        enableSorting: false,
         header: ACCESSOR_KEYS.SELECT,
         id: ACCESSOR_KEYS.SELECT,
         meta: {

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

@@ -1,8 +1,11 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { BaseColumnConfig } from "./entities";
+import { ColumnConfig } from "../../../config/entities";
 /**
  * Builds a base column definition.
+ * The following properties are set by default:
+ * - Grouping is not enabled `enableGrouping: false`.
+ * - Sorting is enabled - `enableSorting: true`.
  * @param baseColumnConfig - Base column configuration.
  * @returns column definition.
  */
-export declare function buildBaseColumnDef<T, TValue>(baseColumnConfig: BaseColumnConfig<T, TValue>): ColumnDef<T>;
+export declare function buildBaseColumnDef<T>(baseColumnConfig: ColumnConfig<T>): ColumnDef<T>;

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

@@ -1,21 +1,28 @@
 /**
  * Builds a base column definition.
+ * The following properties are set by default:
+ * - Grouping is not enabled `enableGrouping: false`.
+ * - Sorting is enabled - `enableSorting: true`.
  * @param baseColumnConfig - Base column configuration.
  * @returns column definition.
  */
 export function buildBaseColumnDef(baseColumnConfig) {
-    const { columnPinned, disableHiding, disableSorting, header, id, meta, width, } = baseColumnConfig;
+    const { columnPinned, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Destructure to avoid passing it to the columnDef.
+    columnVisible, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Destructure to avoid passing it to the columnDef.
+    componentConfig, disableHiding, header, id, meta, width, ...columnDef } = baseColumnConfig;
     return {
+        ...columnDef,
         accessorKey: id,
         enableHiding: !disableHiding,
-        enableSorting: !disableSorting,
         header,
         id,
         meta: {
-            ...meta,
             columnPinned,
-            header: meta ? meta.header : header,
+            header: typeof header === "string" ? header : undefined,
             width,
+            ...meta,
         },
     };
 }

package/lib/components/TableCreator/options/expanded/constants.d.ts

@@ -0,0 +1,2 @@
+import { ExpandedOptions, RowData } from "@tanstack/react-table";
+export declare const EXPANDED_OPTIONS: Pick<ExpandedOptions<RowData>, "autoResetExpanded" | "enableExpanding" | "getExpandedRowModel">;

package/lib/components/TableCreator/options/expanded/constants.js

@@ -0,0 +1,6 @@
+import { getExpandedRowModel, } from "@tanstack/react-table";
+export const EXPANDED_OPTIONS = {
+    autoResetExpanded: false,
+    enableExpanding: false,
+    getExpandedRowModel: getExpandedRowModel(),
+};

package/lib/components/TableCreator/options/expanded/hook.d.ts

@@ -0,0 +1,2 @@
+import { ExpandedOptions, RowData } from "@tanstack/react-table";
+export declare function useExpandedOptions<T extends RowData>(): ExpandedOptions<T>;

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

@@ -0,0 +1,4 @@
+import { EXPANDED_OPTIONS } from "./constants";
+export function useExpandedOptions() {
+    return { ...EXPANDED_OPTIONS };
+}

package/lib/components/TableCreator/options/grouping/constants.d.ts

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

package/lib/components/TableCreator/options/grouping/constants.js

@@ -0,0 +1,5 @@
+import { getGroupedRowModel } from "@tanstack/react-table";
+export const GROUPING_OPTIONS = {
+    enableGrouping: false,
+    getGroupedRowModel: getGroupedRowModel(),
+};

package/lib/components/TableCreator/options/grouping/hook.d.ts

@@ -0,0 +1,2 @@
+import { GroupingOptions } from "@tanstack/react-table";
+export declare function useGroupingOptions(): GroupingOptions;

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

@@ -0,0 +1,9 @@
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateGrouping } from "../../../../providers/exploreState/actions/updateGrouping/dispatch";
+import { GROUPING_OPTIONS } from "./constants";
+export function useGroupingOptions() {
+    const { exploreDispatch } = useExploreState();
+    const onGroupingChange = useCallback((updaterOrValue) => exploreDispatch(updateGrouping({ updaterOrValue })), [exploreDispatch]);
+    return { ...GROUPING_OPTIONS, onGroupingChange };
+}

package/lib/components/TableCreator/options/hook.d.ts

@@ -0,0 +1,2 @@
+import { RowData, TableOptions } from "@tanstack/react-table";
+export declare function useTableOptions<T extends RowData>(): Partial<TableOptions<T>>;

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

@@ -0,0 +1,25 @@
+import { useConfig } from "../../../hooks/useConfig";
+import { useExpandedOptions } from "./expanded/hook";
+import { useGroupingOptions } from "./grouping/hook";
+import { useRowSelectionOptions } from "./rowSelection/hook";
+import { useSortingOptions } from "./sorting/hook";
+export function useTableOptions() {
+    const { entityConfig: { list: { defaultSort, tableOptions }, }, } = useConfig();
+    const expandedOptions = useExpandedOptions();
+    const groupingOptions = useGroupingOptions();
+    const rowSelectionOptions = useRowSelectionOptions();
+    const sortingOptions = useSortingOptions();
+    return {
+        ...expandedOptions,
+        ...groupingOptions,
+        ...rowSelectionOptions,
+        ...sortingOptions, // TODO(cc) merge of all sorting options.
+        ...tableOptions,
+        initialState: {
+            ...tableOptions?.initialState,
+            sorting: defaultSort
+                ? [defaultSort] // TODO(cc) deprecate `defaultSort` in favor of `initialState.sorting`.
+                : tableOptions?.initialState?.sorting,
+        },
+    };
+}

package/lib/components/TableCreator/options/rowSelection/constants.d.ts

@@ -0,0 +1,2 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+export declare const ROW_SELECTION_OPTIONS: Pick<RowSelectionOptions<RowData>, "enableRowSelection" | "enableSubRowSelection" | "enableMultiRowSelection">;

package/lib/components/TableCreator/options/rowSelection/constants.js

@@ -0,0 +1,5 @@
+export const ROW_SELECTION_OPTIONS = {
+    enableMultiRowSelection: false,
+    enableRowSelection: false,
+    enableSubRowSelection: false,
+};

package/lib/components/TableCreator/options/rowSelection/hook.d.ts

@@ -0,0 +1,2 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+export declare function useRowSelectionOptions<T extends RowData>(): RowSelectionOptions<T>;

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

@@ -0,0 +1,4 @@
+import { ROW_SELECTION_OPTIONS } from "./constants";
+export function useRowSelectionOptions() {
+    return { ...ROW_SELECTION_OPTIONS };
+}

package/lib/components/TableCreator/options/sorting/constants.d.ts

@@ -0,0 +1,2 @@
+import { RowData, SortingOptions } from "@tanstack/react-table";
+export declare const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting" | "enableSortingInteraction" | "enableSortingRemoval">;

package/lib/components/TableCreator/options/sorting/constants.js

@@ -0,0 +1,5 @@
+export const SORTING_OPTIONS = {
+    enableSorting: true,
+    enableSortingInteraction: true,
+    enableSortingRemoval: false, // false i.e. toggling the sorting on a column will not remove sorting on the column.
+};

package/lib/components/TableCreator/options/sorting/hook.d.ts

@@ -0,0 +1,2 @@
+import { RowData, SortingOptions } from "@tanstack/react-table";
+export declare function useSortingOptions<T extends RowData>(): SortingOptions<T>;

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

@@ -0,0 +1,4 @@
+import { SORTING_OPTIONS } from "./constants";
+export function useSortingOptions() {
+    return { ...SORTING_OPTIONS };
+}

package/lib/components/TableCreator/tableCreator.d.ts

@@ -1,12 +1,10 @@
-import { ColumnSort, CoreOptions, RowData } from "@tanstack/react-table";
-import { ColumnConfig, ListConfig, ListViewConfig } from "../../config/entities";
+import { CoreOptions, RowData } from "@tanstack/react-table";
+import { ColumnConfig, ListViewConfig } from "../../config/entities";
 export interface TableCreatorProps<T> {
     columns: ColumnConfig<T>[];
-    defaultSort: ColumnSort | undefined;
     getRowId?: CoreOptions<T>["getRowId"];
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
-    tableOptions?: ListConfig<T>["tableOptions"];
 }
-export declare const TableCreator: <T extends RowData>({ columns, defaultSort, getRowId, items, listView, loading, tableOptions, }: TableCreatorProps<T>) => JSX.Element;
+export declare const TableCreator: <T extends RowData>({ columns, getRowId, items, listView, loading, }: TableCreatorProps<T>) => JSX.Element;