@databiosphere/findable-ui 20.0.0 → 21.0.0

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.tsx

@@ -0,0 +1,28 @@
+import { RowData } from "@tanstack/react-table";
+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";
+import { ColumnVisibilityProps } from "./types";
+
+export const ColumnVisibility = <T extends RowData>({
+  tableInstance,
+}: ColumnVisibilityProps<T>): JSX.Element | null => {
+  const {
+    options: { enableHiding },
+  } = tableInstance;
+  if (!enableHiding) return null;
+  return (
+    <StyledDropdownMenu
+      {...MENU_PROPS}
+      button={(props) => (
+        <DropdownButton {...props}>Edit Columns</DropdownButton>
+      )}
+    >
+      {(): JSX.Element[] => [
+        <MenuItems key="column-visibility" tableInstance={tableInstance} />,
+      ]}
+    </StyledDropdownMenu>
+  );
+};

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/constants.ts

@@ -0,0 +1,9 @@
+import { ListItemTextProps } from "@mui/material";
+
+export const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps> = {
+  primaryTypographyProps: {
+    color: "primary",
+    component: "span",
+    variant: "inherit",
+  },
+};

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/menuItems.styles.ts

@@ -0,0 +1,17 @@
+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;
+      }
+    }
+  }
+` as typeof MenuItem;

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/menuItems.tsx

@@ -0,0 +1,53 @@
+import { Checkbox, ListItemButton, ListItemText } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+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 { MenuItemsProps } from "./types";
+import {
+  getCanHideColumns,
+  getVisibleColumnCount,
+  isToggleVisibilityDisabled,
+} from "./utils";
+
+export const MenuItems = <T extends RowData>({
+  tableInstance,
+}: MenuItemsProps<T>): JSX.Element => {
+  const { getAllColumns } = tableInstance;
+  const columns = getCanHideColumns(getAllColumns());
+  const visibleCount = getVisibleColumnCount(columns);
+  return (
+    <Fragment>
+      {columns.map((column) => {
+        const isDisabled = isToggleVisibilityDisabled(column, visibleCount);
+        return (
+          <ListItemButton
+            key={column.id}
+            component="li"
+            disabled={isDisabled}
+            onClick={() => column.toggleVisibility()}
+          >
+            <Checkbox
+              checked={column.getIsVisible()}
+              checkedIcon={<CheckedIcon />}
+              disabled={isDisabled}
+              icon={<UncheckedIcon />}
+            />
+            <ListItemText disableTypography>
+              {column.columnDef.header}
+            </ListItemText>
+          </ListItemButton>
+        );
+      })}
+      <StyledMenuItem
+        component="li"
+        onClick={() => handleResetVisibilityState(tableInstance)}
+      >
+        <ListItemText {...LIST_ITEM_TEXT_PROPS}>Reset</ListItemText>
+      </StyledMenuItem>
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/types.ts

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

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/components/MenuItems/utils.ts

@@ -0,0 +1,44 @@
+import { Column, RowData } from "@tanstack/react-table";
+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<T extends RowData>(
+  columns: Column<T>[]
+): (Column<T> & { columnDef: { header: string } })[] {
+  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<T extends RowData>(
+  columns: Column<T>[]
+): number {
+  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<T extends RowData>(
+  column: Column<T>,
+  visibleCount: number
+): boolean {
+  if (column.getIsGrouped()) return true;
+  return column.getIsVisible() && visibleCount === 1;
+}

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/constants.ts

@@ -0,0 +1,5 @@
+import { MenuProps } from "@mui/material";
+
+export const MENU_PROPS: Partial<MenuProps> = {
+  variant: "menu",
+};

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/types.ts

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

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -3,11 +3,11 @@ import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 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";
@@ -28,23 +28,13 @@ export const TableToolbar = <T extends RowData>({
   const { currentPage, pages, pageSize, rows } = paginationState;
   const {
     getSelectedRowModel,
-    options: { enableGrouping },
-    resetColumnVisibility,
+    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 = (): void => {
-    resetColumnVisibility(false);
-  };
-
+    (enableHiding || enableDownload || enableGrouping);
   return (
     <Fragment>
       {showToolbar && (
@@ -69,11 +59,7 @@ export const TableToolbar = <T extends RowData>({
               />
             )}
             <ColumnGrouping tableInstance={tableInstance} />
-            <CheckboxMenu
-              label="Edit Columns"
-              onReset={onResetColumnVisibility}
-              options={editColumnOptions}
-            />
+            <ColumnVisibility tableInstance={tableInstance} />
           </ToolbarActions>
         </Toolbar>
       )}

package/src/components/Table/features/RowPosition/constants.ts

@@ -6,10 +6,9 @@ import {
   RowModel,
   Table,
   TableFeature,
-  TableState,
+  TableOptionsResolved,
 } from "@tanstack/react-table";
-import { InitialTableState } from "@tanstack/table-core/src/types";
-import { getRowModel, getRowPosition, initInitialState } from "./utils";
+import { getRowModel, getRowPosition } from "./utils";
 
 export const ROW_POSITION: TableFeature = {
   createCell: <T extends RowData, TValue>(
@@ -28,7 +27,11 @@ export const ROW_POSITION: TableFeature = {
       return getRowModel(table, rowModel);
     };
   },
-  getInitialState: (initialState?: InitialTableState): Partial<TableState> => {
-    return initInitialState(initialState);
+  getDefaultOptions: <T extends RowData>(): Partial<
+    TableOptionsResolved<T>
+  > => {
+    return {
+      enableRowPosition: false,
+    };
   },
 };

package/src/components/Table/features/RowPosition/types.ts

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

package/src/components/Table/features/RowPosition/utils.ts

@@ -1,12 +1,4 @@
-import {
-  InitialTableState,
-  RowData,
-  RowModel,
-  Table,
-  TableState,
-} from "@tanstack/react-table";
-import { ACCESSOR_KEYS } from "../../../TableCreator/common/constants";
-import { DEFAULT_PAGINATION } from "../constants";
+import { RowData, RowModel, Table } from "@tanstack/react-table";
 
 /**
  * Returns row model, with getter for row position.
@@ -62,24 +54,3 @@ function calculateRowPosition<T extends RowData>(
   } = getState();
   return pageIndex * pageSize + (index + 1);
 }
-
-/**
- * Returns the initial table state.
- * @param initialState - Initial state.
- * @returns initial state.
- */
-export function initInitialState(
-  initialState?: InitialTableState
-): Partial<TableState> {
-  return {
-    ...initialState,
-    columnVisibility: {
-      [ACCESSOR_KEYS.ROW_POSITION]: false,
-      ...initialState?.columnVisibility,
-    },
-    pagination: {
-      ...DEFAULT_PAGINATION,
-      ...initialState?.pagination,
-    },
-  };
-}

package/src/components/Table/features/RowPreview/constants.ts

@@ -52,7 +52,7 @@ export const ROW_PREVIEW: TableFeature = {
     table: Table<T>
   ): Partial<TableOptionsResolved<T>> => {
     return {
-      enableRowPreview: true,
+      enableRowPreview: false,
       onRowPreviewChange: makeStateUpdater("rowPreview", table),
     };
   },

package/src/components/Table/features/entities.ts

@@ -1,5 +1,5 @@
 import { RowData } from "@tanstack/react-table";
-import { RowPositionRow } from "./RowPosition/types";
+import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import {
   RowPreviewInstance,
   RowPreviewOptions,
@@ -9,6 +9,6 @@ import {
 
 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/src/components/Table/table.tsx

@@ -8,13 +8,11 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  InitialTableState,
   RowData,
   RowSelectionState,
   TableState,
   Updater,
   useReactTable,
-  VisibilityState,
 } from "@tanstack/react-table";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
@@ -37,11 +35,11 @@ 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";
@@ -57,7 +55,6 @@ import { GridTable } from "./table.styles";
 export interface TableProps<T extends RowData> {
   columns: ColumnDef<T>[];
   getRowId?: CoreOptions<T>["getRowId"];
-  initialState: InitialTableState;
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
@@ -71,7 +68,6 @@ 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.
@@ -80,7 +76,6 @@ export interface TableProps<T extends RowData> {
 export const TableComponent = <T extends RowData>({
   columns,
   getRowId,
-  initialState,
   items,
   listView,
   tableOptions,
@@ -98,16 +93,10 @@ TableProps<T>): JSX.Element => {
     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
@@ -136,17 +125,6 @@ TableProps<T>): JSX.Element => {
     });
   };
 
-  const onColumnVisibilityChange = (
-    updater: Updater<VisibilityState>
-  ): void => {
-    // TODO(cc) memoize `onColumnVisibilityChange` with `useCallback`.
-    exploreDispatch({
-      payload:
-        typeof updater === "function" ? updater(columnsVisibility) : updater,
-      type: ExploreActionKind.UpdateColumnVisibility,
-    });
-  };
-
   const onRowPreviewChange = useCallback(
     (updater: Updater<RowPreviewState>): void => {
       exploreDispatch({
@@ -170,7 +148,7 @@ TableProps<T>): JSX.Element => {
   );
 
   const state: Partial<TableState> = {
-    columnVisibility: columnsVisibility,
+    columnVisibility,
     grouping,
     pagination,
     rowPreview,
@@ -178,21 +156,11 @@ TableProps<T>): JSX.Element => {
     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,
@@ -200,8 +168,6 @@ TableProps<T>): JSX.Element => {
     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
@@ -211,16 +177,14 @@ TableProps<T>): JSX.Element => {
     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,
@@ -235,8 +199,6 @@ TableProps<T>): JSX.Element => {
   const { rows } = getRowModel();
   const noResults = !loading && (!rows || rows.length === 0);
   const scrollTop = useScroll();
-  const visibleColumns = getVisibleFlatColumns();
-  const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
 
   const handleTableNextPage = (): void => {
     let nextPage = tableNextPage;
@@ -335,7 +297,7 @@ TableProps<T>): JSX.Element => {
         <TableContainer>
           <GridTable
             collapsable={true}
-            gridTemplateColumns={gridTemplateColumns}
+            gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
           >
             <TableHead
               rowDirection={rowDirection}

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

@@ -15,10 +15,7 @@ export function buildBaseColumnDef<T>(
   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,
@@ -28,7 +25,6 @@ export function buildBaseColumnDef<T>(
   return {
     ...columnDef,
     accessorKey: id,
-    enableHiding: !disableHiding,
     header,
     id,
     meta: {

package/src/components/TableCreator/options/columnTrackSizing/typeGuards.ts

@@ -0,0 +1,12 @@
+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 function isGridTrackMinMax(
+  width?: GridTrackSize
+): width is GridTrackMinMax {
+  return (width as GridTrackMinMax)?.min !== undefined;
+}

package/src/components/TableCreator/options/columnTrackSizing/utils.ts

@@ -0,0 +1,99 @@
+import { Column, RowData } from "@tanstack/react-table";
+import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
+import { isGridTrackMinMax } from "./typeGuards";
+
+/**
+ * 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 function getColumnTrackSizing<T extends RowData>(
+  visibleColumns: Column<T>[]
+): string {
+  // Precompute track sizing.
+  const trackSizing: string[] = [];
+
+  let columnCount = 0; // Non-system column count.
+  let firstNonSystemColumnIndex = -1;
+  let totalFractionalSize = 0;
+
+  for (const [i, column] of visibleColumns.entries()) {
+    if (column.getIsGrouped()) continue;
+
+    // Get the column's track size.
+    const columnTrackSize = getColumnTrackSize(column);
+    trackSizing.push(columnTrackSize);
+
+    // Extract the fractional value (if it exists), and accumulate the total.
+    const frSize = extractFractionalValue(columnTrackSize);
+    if (frSize) totalFractionalSize += frSize;
+
+    // Skip system columns; track the first non-system column index.
+    if (isSystemColumn(column)) continue;
+    if (firstNonSystemColumnIndex < 0) firstNonSystemColumnIndex = i;
+
+    columnCount++;
+  }
+
+  // Adjust track sizing for the first non-system column when:
+  // - the table is a single-column table, or
+  // - the total `fr` value is less than 1.
+  if (
+    firstNonSystemColumnIndex >= 0 &&
+    (columnCount === 1 || totalFractionalSize < 1)
+  ) {
+    trackSizing[firstNonSystemColumnIndex] = "1fr";
+  }
+
+  return trackSizing.join(" ");
+}
+
+/**
+ * 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 function getColumnTrackSize<T extends RowData>(
+  column: Column<T>
+): string {
+  const width = column.columnDef.meta?.width || "1fr";
+  if (isGridTrackMinMax(width)) {
+    return `minmax(${width.min}, ${width.max})`;
+  }
+  return width;
+}
+
+/**
+ * Returns true if the column is a system column "rowPosition" or "rowSelection".
+ * @param column - Column.
+ * @returns true if the column is a system column.
+ */
+function isSystemColumn<T extends RowData>(column: Column<T>): boolean {
+  return (
+    column.id === COLUMN_IDENTIFIER.ROW_POSITION ||
+    column.id === COLUMN_IDENTIFIER.ROW_SELECTION
+  );
+}
+
+/**
+ * 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 function extractFractionalValue(columnTrackSize: string): number {
+  const match = columnTrackSize.match(/([\d.]+)fr/);
+  if (!match) return 0;
+  const value = parseFloat(match[1]);
+  return Number.isNaN(value) ? 0 : value;
+}

package/src/components/TableCreator/options/hook.ts

@@ -2,30 +2,27 @@ import { RowData, TableOptions } from "@tanstack/react-table";
 import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
+import { useInitialState } from "./initialState/hook";
 import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
+import { useVisibilityOptions } from "./visibility/hook";
 
 export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
-  const {
-    entityConfig: {
-      list: { defaultSort, tableOptions },
-    },
-  } = useConfig();
+  const { entityConfig } = useConfig();
+  const tableOptions = entityConfig.list.tableOptions;
   const expandedOptions = useExpandedOptions<T>();
   const groupingOptions = useGroupingOptions();
   const rowSelectionOptions = useRowSelectionOptions<T>();
   const sortingOptions = useSortingOptions<T>();
+  const visibilityOptions = useVisibilityOptions();
+  const initialState = useInitialState<T>(tableOptions);
   return {
     ...expandedOptions,
     ...groupingOptions,
     ...rowSelectionOptions,
     ...sortingOptions, // TODO(cc) merge of all sorting options.
+    ...visibilityOptions,
     ...tableOptions,
-    initialState: {
-      ...tableOptions?.initialState,
-      sorting: defaultSort
-        ? [defaultSort] // TODO(cc) deprecate `defaultSort` in favor of `initialState.sorting`.
-        : tableOptions?.initialState?.sorting,
-    },
+    initialState,
   };
 }