@databiosphere/findable-ui 20.0.0 → 21.0.0

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

@@ -1,17 +1,7 @@
-import { Column, GroupingState, RowData, Table } from "@tanstack/react-table";
+import { Column, RowData } 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.
+ * @param columns - Columns.
  * @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>]>;
+export declare function getButtonLabel<T extends RowData>(columns: Column<T>[]): string;

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

@@ -1,36 +1,31 @@
+import { isStringHeaderColumn } from "../../../../common/typeGuards";
 /**
  * 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.
+ * @param columns - Columns.
  * @returns button label.
  */
-export function getButtonLabel(groupingByColumnId, groupingState) {
-    const grouping = groupingByColumnId.get(groupingState[0]);
-    if (!grouping)
+export function getButtonLabel(columns) {
+    const headers = columns
+        .filter(isColumnGrouped)
+        .filter(isStringHeaderColumn)
+        .map(mapGroupedHeader);
+    if (headers.length === 0)
         return "Group by";
-    return `Group by: ${grouping[0]}`;
+    return `Group by: ${headers.join(", ")}`;
 }
 /**
- * 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.
+ * Returns true if the column is grouped.
+ * @param column - Column.
+ * @returns true if the column is grouped.
  */
-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;
+function isColumnGrouped(column) {
+    return column.getIsGrouped();
+}
+/**
+ * Maps a column to its header.
+ * @param column - Column.
+ * @returns header.
+ */
+function mapGroupedHeader(column) {
+    return column.columnDef.header;
 }

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.d.ts

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

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { DropdownButton } from "../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { StyledDropdownMenu } from "./columnVisibility.styles";
+import { MenuItems } from "./components/MenuItems/menuItems";
+import { MENU_PROPS } from "./constants";
+export const ColumnVisibility = ({ tableInstance, }) => {
+    const { options: { enableHiding }, } = tableInstance;
+    if (!enableHiding)
+        return null;
+    return (React.createElement(StyledDropdownMenu, { ...MENU_PROPS, button: (props) => (React.createElement(DropdownButton, { ...props }, "Edit Columns")) }, () => [
+        React.createElement(MenuItems, { key: "column-visibility", tableInstance: tableInstance }),
+    ]));
+};

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledDropdownMenu: import("@emotion/styled").StyledComponent<import("../../../../../common/DropdownMenu/dropdownMenu").DropdownMenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.styles.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { DropdownMenu } from "../../../../../common/DropdownMenu/dropdownMenu";
+export const StyledDropdownMenu = styled(DropdownMenu) `
+  .MuiListItemButton-root {
+    gap: 8px;
+
+    &.Mui-disabled {
+      opacity: 1;
+    }
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/constants.d.ts

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

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/constants.js

@@ -0,0 +1,7 @@
+export const LIST_ITEM_TEXT_PROPS = {
+    primaryTypographyProps: {
+        color: "primary",
+        component: "span",
+        variant: "inherit",
+    },
+};

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/menuItems.d.ts

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

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

@@ -0,0 +1,22 @@
+import { Checkbox, ListItemButton, ListItemText } from "@mui/material";
+import React, { Fragment } from "react";
+import { CheckedIcon } from "../../../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { handleResetVisibilityState } from "../../../../../TableFeatures/ColumnVisibility/utils";
+import { LIST_ITEM_TEXT_PROPS } from "./constants";
+import { StyledMenuItem } from "./menuItems.styles";
+import { getCanHideColumns, getVisibleColumnCount, isToggleVisibilityDisabled, } from "./utils";
+export const MenuItems = ({ tableInstance, }) => {
+    const { getAllColumns } = tableInstance;
+    const columns = getCanHideColumns(getAllColumns());
+    const visibleCount = getVisibleColumnCount(columns);
+    return (React.createElement(Fragment, null,
+        columns.map((column) => {
+            const isDisabled = isToggleVisibilityDisabled(column, visibleCount);
+            return (React.createElement(ListItemButton, { key: column.id, component: "li", disabled: isDisabled, onClick: () => column.toggleVisibility() },
+                React.createElement(Checkbox, { checked: column.getIsVisible(), checkedIcon: React.createElement(CheckedIcon, null), disabled: isDisabled, icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true }, column.columnDef.header)));
+        }),
+        React.createElement(StyledMenuItem, { component: "li", onClick: () => handleResetVisibilityState(tableInstance) },
+            React.createElement(ListItemText, { ...LIST_ITEM_TEXT_PROPS }, "Reset"))));
+};

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/menuItems.styles.d.ts

@@ -0,0 +1,2 @@
+import { MenuItem } from "@mui/material";
+export declare const StyledMenuItem: typeof MenuItem;

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/menuItems.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { MenuItem } from "@mui/material";
+export const StyledMenuItem = styled(MenuItem) `
+  &:hover {
+    background-color: transparent;
+
+    .MuiListItemText-root {
+      .MuiListItemText-primary {
+        text-decoration: underline;
+        text-decoration-skip-ink: none;
+        text-underline-color: currentColor;
+        text-underline-position: from-font;
+      }
+    }
+  }
+`;

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

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

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

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

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/utils.d.ts

@@ -0,0 +1,26 @@
+import { Column, RowData } from "@tanstack/react-table";
+/**
+ * Returns columns that are enabled to be hidden.
+ * @param columns - Columns.
+ * @returns columns that are enabled to be hidden.
+ */
+export declare function getCanHideColumns<T extends RowData>(columns: Column<T>[]): (Column<T> & {
+    columnDef: {
+        header: string;
+    };
+})[];
+/**
+ * Returns the number of visible columns, excluding grouped columns.
+ * @param columns - Columns.
+ * @returns number of visible, un-grouped columns.
+ */
+export declare function getVisibleColumnCount<T extends RowData>(columns: Column<T>[]): number;
+/**
+ * Returns whether the column visibility toggle is disabled.
+ * - If the column is grouped, the toggle is disabled.
+ * - If the column is visible and the count of visible, un-grouped columns is 1, the toggle is disabled.
+ * @param column - Column.
+ * @param visibleCount - Count of visible, un-grouped columns.
+ * @returns true if the column visibility toggle is disabled.
+ */
+export declare function isToggleVisibilityDisabled<T extends RowData>(column: Column<T>, visibleCount: number): boolean;

package/lib/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/utils.js

@@ -0,0 +1,32 @@
+import { isStringHeaderColumn } from "../../../../../../common/typeGuards";
+/**
+ * Returns columns that are enabled to be hidden.
+ * @param columns - Columns.
+ * @returns columns that are enabled to be hidden.
+ */
+export function getCanHideColumns(columns) {
+    return columns
+        .filter(isStringHeaderColumn) // Currently, headers are configured as strings. Only include columns that have a string header (for now).
+        .filter(({ getCanHide }) => getCanHide());
+}
+/**
+ * Returns the number of visible columns, excluding grouped columns.
+ * @param columns - Columns.
+ * @returns number of visible, un-grouped columns.
+ */
+export function getVisibleColumnCount(columns) {
+    return columns.filter(({ getIsGrouped, getIsVisible }) => getIsVisible() && !getIsGrouped()).length;
+}
+/**
+ * Returns whether the column visibility toggle is disabled.
+ * - If the column is grouped, the toggle is disabled.
+ * - If the column is visible and the count of visible, un-grouped columns is 1, the toggle is disabled.
+ * @param column - Column.
+ * @param visibleCount - Count of visible, un-grouped columns.
+ * @returns true if the column visibility toggle is disabled.
+ */
+export function isToggleVisibilityDisabled(column, visibleCount) {
+    if (column.getIsGrouped())
+        return true;
+    return column.getIsVisible() && visibleCount === 1;
+}

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

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

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

@@ -0,0 +1,3 @@
+export const MENU_PROPS = {
+    variant: "menu",
+};

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

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

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

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

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

@@ -1,11 +1,11 @@
 import React, { Fragment } from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ROW_DIRECTION } from "../../common/entities";
-import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
-import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
+import { isAnyRowSelected } from "../../common/utils";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
 import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
+import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
@@ -13,24 +13,17 @@ export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const { exploreState } = useExploreState();
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
-    const { getSelectedRowModel, options: { enableGrouping }, resetColumnVisibility, } = tableInstance;
+    const { getSelectedRowModel, options: { enableGrouping, enableHiding }, } = tableInstance;
     const { enableDownload, rowPreviewView } = listView || {};
     const isLastPage = currentPage === pages;
-    const editColumnOptions = getEditColumnOptions(tableInstance);
     const showToolbar = rowDirection === ROW_DIRECTION.DEFAULT &&
-        (editColumnOptions || enableDownload || enableGrouping);
-    /**
-     * Resets column visibility to default state.
-     */
-    const onResetColumnVisibility = () => {
-        resetColumnVisibility(false);
-    };
+        (enableHiding || enableDownload || enableGrouping);
     return (React.createElement(Fragment, null,
         showToolbar && (React.createElement(Toolbar, { variant: "table" },
             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(ColumnVisibility, { tableInstance: tableInstance })))),
         React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };

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

@@ -1,4 +1,4 @@
-import { getRowModel, getRowPosition, initInitialState } from "./utils";
+import { getRowModel, getRowPosition } from "./utils";
 export const ROW_POSITION = {
     createCell: (cell, column, row, table) => {
         row.getRowPosition = () => {
@@ -11,7 +11,9 @@ export const ROW_POSITION = {
             return getRowModel(table, rowModel);
         };
     },
-    getInitialState: (initialState) => {
-        return initInitialState(initialState);
+    getDefaultOptions: () => {
+        return {
+            enableRowPosition: false,
+        };
     },
 };

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

@@ -1,3 +1,6 @@
+export interface RowPositionOptions {
+    enableRowPosition?: boolean;
+}
 export interface RowPositionRow {
     getRowPosition: () => number;
 }

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

@@ -1,4 +1,4 @@
-import { InitialTableState, RowData, RowModel, Table, TableState } from "@tanstack/react-table";
+import { RowData, RowModel, Table } from "@tanstack/react-table";
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
@@ -13,9 +13,3 @@ export declare function getRowModel<T extends RowData>(table: Table<T>, rowModel
  * @returns row position.
  */
 export declare function getRowPosition<T extends RowData>(rowId: string, table: Table<T>): number;
-/**
- * Returns the initial table state.
- * @param initialState - Initial state.
- * @returns initial state.
- */
-export declare function initInitialState(initialState?: InitialTableState): Partial<TableState>;

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

@@ -1,5 +1,3 @@
-import { ACCESSOR_KEYS } from "../../../TableCreator/common/constants";
-import { DEFAULT_PAGINATION } from "../constants";
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
@@ -42,21 +40,3 @@ function calculateRowPosition(table, index) {
     const { pagination: { pageIndex, pageSize }, } = getState();
     return pageIndex * pageSize + (index + 1);
 }
-/**
- * Returns the initial table state.
- * @param initialState - Initial state.
- * @returns initial state.
- */
-export function initInitialState(initialState) {
-    return {
-        ...initialState,
-        columnVisibility: {
-            [ACCESSOR_KEYS.ROW_POSITION]: false,
-            ...initialState?.columnVisibility,
-        },
-        pagination: {
-            ...DEFAULT_PAGINATION,
-            ...initialState?.pagination,
-        },
-    };
-}

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

@@ -31,7 +31,7 @@ export const ROW_PREVIEW = {
     },
     getDefaultOptions: (table) => {
         return {
-            enableRowPreview: true,
+            enableRowPreview: false,
             onRowPreviewChange: makeStateUpdater("rowPreview", table),
         };
     },

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

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

package/lib/components/Table/table.d.ts

@@ -1,9 +1,8 @@
-import { ColumnDef, CoreOptions, InitialTableState, RowData } from "@tanstack/react-table";
+import { ColumnDef, CoreOptions, RowData } from "@tanstack/react-table";
 import { ListConfig, ListViewConfig } from "../../config/entities";
 export interface TableProps<T extends RowData> {
     columns: ColumnDef<T>[];
     getRowId?: CoreOptions<T>["getRowId"];
-    initialState: InitialTableState;
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
@@ -16,11 +15,10 @@ export interface TableProps<T extends RowData> {
  * @param tableProps - Set of props required for displaying the table.
  * @param tableProps.columns - Set of columns to display.
  * @param tableProps.getRowId - Function to customize the row ID.
- * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
  * @param tableProps.tableOptions - TanStack table options.
  * @returns Configured table element for display.
  */
-export declare const TableComponent: <T extends RowData>({ columns, getRowId, initialState, items, listView, tableOptions, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends RowData>({ columns, getRowId, items, listView, tableOptions, }: TableProps<T>) => JSX.Element;
 export declare const Table: typeof TableComponent;

package/lib/components/Table/table.js

@@ -12,8 +12,9 @@ import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializ
 import { TABLET } from "../../theme/common/breakpoints";
 import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
 import { NoResults } from "../NoResults/noResults";
+import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
 import { ROW_DIRECTION } from "./common/entities";
-import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getGridTemplateColumns, getTableStatePagination, isClientFilteringEnabled, } from "./common/utils";
+import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, } from "./common/utils";
 import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
@@ -28,20 +29,19 @@ import { GridTable } from "./table.styles";
  * @param tableProps - Set of props required for displaying the table.
  * @param tableProps.columns - Set of columns to display.
  * @param tableProps.getRowId - Function to customize the row ID.
- * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
  * @param tableProps.tableOptions - TanStack table options.
  * @returns Configured table element for display.
  */
-export const TableComponent = ({ columns, getRowId, initialState, items, listView, tableOptions, }) => {
+export const TableComponent = ({ columns, getRowId, items, listView, tableOptions, }) => {
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
     const { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
-    const { columnsVisibility, enableRowSelection, grouping, rowSelection, sorting, } = entityPageState[tabValue];
+    const { columnVisibility, grouping, rowSelection, sorting } = entityPageState[tabValue];
     const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
-    const { disablePagination = false, enableRowPreview = false } = listView || {};
+    const { disablePagination = false } = listView || {};
     const clientFiltering = isClientFilteringEnabled(exploreMode);
     const rowDirection = tabletDown
         ? ROW_DIRECTION.VERTICAL
@@ -65,13 +65,6 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
                 : 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 = useCallback((updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowPreview) : updater,
@@ -86,7 +79,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         });
     }, [exploreDispatch, rowSelection]);
     const state = {
-        columnVisibility: columnsVisibility,
+        columnVisibility,
         grouping,
         pagination,
         rowPreview,
@@ -94,20 +87,11 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         sorting,
     };
     /**
-     * TODO: Refactor `ListConfig` to follow the API patterns of the TanStack Table library.
      * TODO: Update `ColumnConfig` to follow the `ColumnDef` API of TanStack Table.
      * - Standardize column definitions to leverage the full power of TanStack Table's feature set and improve compatibility.
-     * TODO: Deprecate the following properties:
-     * - `defaultSort` in `ListConfig`: Replace this with TanStack Table's `tableOptions.initialState.sorting` feature.
-     * - `columnVisible` in `ColumnConfig`: Replace this with TanStack Table's `tableOptions.initialState.columnVisibility` feature.
-     * TODO: Define `columnVisibility` and `sorting` directly within `ListConfig` via the `tableOptions.initialState` property.
+     * TODO: Define `sorting` directly within `ListConfig` via the `tableOptions.initialState` property.
      * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
-     * - It will also allow for direct configuration of other TanStack Table options such as `columnOrder` via `tableOptions.initialState.columnOrder`.
-     *
-     * Current Workaround:
-     * - The `initialState` property from `tableOptions` is destructured to separate it from other options. This allows the remaining properties in `tableOptions` to be passed directly to the TanStack Table configuration without breaking the current ListConfig `defaultSort` and `columnVisible` properties.
      */
-    const { initialState: _initialState, ...restTableOptions } = tableOptions ?? {};
     const tableInstance = useReactTable({
         _features: [ROW_POSITION, ROW_PREVIEW],
         columns,
@@ -115,8 +99,6 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         enableColumnFilters: true, // client-side filtering.
         enableFilters: true, // client-side filtering.
         enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
-        enableRowPreview,
-        enableRowSelection,
         getCoreRowModel: getCoreRowModel(),
         getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: clientFiltering
@@ -126,16 +108,14 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         getPaginationRowModel: getPaginationRowModel(),
         getRowId,
         getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
-        initialState: { ...initialState, ..._initialState }, // `sorting` and `columnVisibility` are managed by the ExploreState.
         manualPagination: true,
         manualSorting: !clientFiltering,
-        onColumnVisibilityChange,
         onRowPreviewChange,
         onRowSelectionChange,
         onSortingChange,
         pageCount,
         state,
-        ...restTableOptions,
+        ...tableOptions,
     });
     const { getAllColumns, getRowModel, getState, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
     const allColumns = getAllColumns();
@@ -143,8 +123,6 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
     const { rows } = getRowModel();
     const noResults = !loading && (!rows || rows.length === 0);
     const scrollTop = useScroll();
-    const visibleColumns = getVisibleFlatColumns();
-    const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
     const handleTableNextPage = () => {
         let nextPage = tableNextPage;
         if (!clientFiltering) {
@@ -226,7 +204,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         React.createElement(GridPaper, null,
             React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
             React.createElement(TableContainer, null,
-                React.createElement(GridTable, { collapsable: true, gridTemplateColumns: gridTemplateColumns },
+                React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
                     React.createElement(TableHead, { 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 })))));

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

@@ -9,13 +9,10 @@
 export function buildBaseColumnDef(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;
+    componentConfig, header, id, meta, width, ...columnDef } = baseColumnConfig;
     return {
         ...columnDef,
         accessorKey: id,
-        enableHiding: !disableHiding,
         header,
         id,
         meta: {

package/lib/components/TableCreator/options/columnTrackSizing/typeGuards.d.ts

@@ -0,0 +1,7 @@
+import { GridTrackMinMax, GridTrackSize } from "../../../../config/entities";
+/**
+ * Type guard to determine if the given track size represents a size range (min-max).
+ * @param width - Grid table track size.
+ * @returns `true` if the given grid track size is a `GridTrackMinMax`, otherwise `false`.
+ */
+export declare function isGridTrackMinMax(width?: GridTrackSize): width is GridTrackMinMax;

package/lib/components/TableCreator/options/columnTrackSizing/typeGuards.js

@@ -0,0 +1,8 @@
+/**
+ * Type guard to determine if the given track size represents a size range (min-max).
+ * @param width - Grid table track size.
+ * @returns `true` if the given grid track size is a `GridTrackMinMax`, otherwise `false`.
+ */
+export function isGridTrackMinMax(width) {
+    return width?.min !== undefined;
+}

package/lib/components/TableCreator/options/columnTrackSizing/utils.d.ts

@@ -0,0 +1,30 @@
+import { Column, RowData } from "@tanstack/react-table";
+/**
+ * Generates the grid track sizing for a table using a grid layout.
+ * Creates a string value for the `grid-template-columns` CSS property based on the visible columns.
+ * It ensures proper sizing for grouped, system, and non-system columns.
+ * - Grouped columns are excluded from grid sizing as they flex across the table.
+ * - System columns (e.g., "rowPosition" and "rowSelection") have pre-defined sizing.
+ * - Non-system columns collectively fill the table's width. If their total fractional sizing is less than `1fr`, the first non-system column is assigned `1fr` to ensure the table is filled.
+ * @param visibleColumns - Visible columns.
+ * @returns string defining the CSS `grid-template-columns` value for the table.
+ */
+export declare function getColumnTrackSizing<T extends RowData>(visibleColumns: Column<T>[]): string;
+/**
+ * Determines the CSS grid track size for a given column.
+ * Calculates the track size for a column based on its width configuration.
+ * If the column's width is defined as a min-max range, it returns a `minmax()` CSS function.
+ * Otherwise, it defaults to the column's width or `1fr` if no width is specified.
+ * @param column - Column.
+ * @returns A string representing the CSS track size for the column. This can be a `minmax()` function or a fixed/flexible value (e.g., `auto`, `1fr`, `200px`).
+ */
+export declare function getColumnTrackSize<T extends RowData>(column: Column<T>): string;
+/**
+ * Extracts the fractional value (`fr`) from a CSS track size string.
+ * This function parses a CSS track size (e.g., `1fr`, `minmax(168px, 0.5fr)`)
+ * and extracts the numeric fractional value that appears before `fr`.
+ * If the input does not contain a valid fractional value, the function returns `0`.
+ * @param columnTrackSize - The CSS track size string e.g. `1fr`, `minmax(100px, 0.5fr)`, `200px`, or `auto`.
+ * @returns The fractional value as a number, or `0` if no fractional value is found.
+ */
+export declare function extractFractionalValue(columnTrackSize: string): number;