@databiosphere/findable-ui 20.0.0 → 21.0.0

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

@@ -0,0 +1,83 @@
+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(visibleColumns) {
+    // Precompute track sizing.
+    const trackSizing = [];
+    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(column) {
+    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(column) {
+    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) {
+    const match = columnTrackSize.match(/([\d.]+)fr/);
+    if (!match)
+        return 0;
+    const value = parseFloat(match[1]);
+    return Number.isNaN(value) ? 0 : value;
+}

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

@@ -1,25 +1,26 @@
 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() {
-    const { entityConfig: { list: { defaultSort, tableOptions }, }, } = useConfig();
+    const { entityConfig } = useConfig();
+    const tableOptions = entityConfig.list.tableOptions;
     const expandedOptions = useExpandedOptions();
     const groupingOptions = useGroupingOptions();
     const rowSelectionOptions = useRowSelectionOptions();
     const sortingOptions = useSortingOptions();
+    const visibilityOptions = useVisibilityOptions();
+    const initialState = useInitialState(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,
     };
 }

package/lib/components/TableCreator/options/initialState/columnVisibility.d.ts

@@ -0,0 +1,7 @@
+import { RowData, TableOptions, VisibilityState } from "@tanstack/react-table";
+/**
+ * Returns initial column visibility state.
+ * @param tableOptions - Table options.
+ * @returns column visibility state.
+ */
+export declare function getInitialColumnVisibilityState<T extends RowData>(tableOptions?: Partial<TableOptions<T>> | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>): VisibilityState;

package/lib/components/TableCreator/options/initialState/columnVisibility.js

@@ -0,0 +1,16 @@
+import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
+/**
+ * Returns initial column visibility state.
+ * @param tableOptions - Table options.
+ * @returns column visibility state.
+ */
+export function getInitialColumnVisibilityState(tableOptions) {
+    const { initialState } = tableOptions || {};
+    const enableRowPosition = Boolean(tableOptions?.enableRowPosition);
+    const enableRowSelection = Boolean(tableOptions?.enableRowSelection);
+    return {
+        [COLUMN_IDENTIFIER.ROW_POSITION]: enableRowPosition,
+        [COLUMN_IDENTIFIER.ROW_SELECTION]: enableRowSelection,
+        ...initialState?.columnVisibility,
+    };
+}

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

@@ -0,0 +1,2 @@
+import { InitialTableState, RowData, TableOptions } from "@tanstack/react-table";
+export declare function useInitialState<T extends RowData>(tableOptions?: Partial<TableOptions<T>> | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>): InitialTableState;

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

@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+import { getInitialColumnVisibilityState } from "./columnVisibility";
+export function useInitialState(tableOptions) {
+    const { initialState } = tableOptions || {};
+    const columnVisibility = getInitialColumnVisibilityState(tableOptions);
+    return useMemo(() => ({
+        ...initialState,
+        columnVisibility,
+    }), [initialState, columnVisibility]);
+}

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

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

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

@@ -0,0 +1,3 @@
+export const VISIBILITY_OPTIONS = {
+    enableHiding: true,
+};

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

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

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

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateVisibility } from "../../../../providers/exploreState/actions/updateVisibility/dispatch";
+import { VISIBILITY_OPTIONS } from "./constants";
+export function useVisibilityOptions() {
+    const { exploreDispatch } = useExploreState();
+    const onColumnVisibilityChange = useCallback((updaterOrValue) => {
+        exploreDispatch(updateVisibility({ updaterOrValue }));
+    }, [exploreDispatch]);
+    return { ...VISIBILITY_OPTIONS, onColumnVisibilityChange };
+}

package/lib/components/TableCreator/tableCreator.js

@@ -3,23 +3,14 @@ import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
-import { arrIncludesSome, getInitialState, sortingFn, } from "../Table/common/utils";
-import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
-import { COLUMN_CONFIGS } from "./common/constants";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
     return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
 };
-const createHeaderSelectionCell = () => function CellCreator({ table }) {
-    return React.createElement(HeadSelectionCell, { tableInstance: table });
-};
-const createRowSelectionCell = () => function CellCreator({ row }) {
-    return React.createElement(RowSelectionCell, { row: row });
-};
 export const TableCreator = ({ columns, getRowId, items, listView, loading, }) => {
     const tableOptions = useTableOptions();
     const columnDefs = useMemo(() => columns.reduce((acc, columnConfig) => {
@@ -33,15 +24,10 @@ export const TableCreator = ({ columns, getRowId, items, listView, loading, }) =
     }, [
         /* Initialize column definitions with the "row position" column */
         COLUMN_DEF.ROW_POSITION,
-        /* Initialize column definitions with the "select" column */
-        {
-            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
-            cell: createRowSelectionCell(),
-            header: createHeaderSelectionCell(),
-        },
+        /* Initialize column definitions with the "row selection" column */
+        COLUMN_DEF.ROW_SELECTION,
     ]), [columns]);
-    const initialState = getInitialState(columns);
     return (React.createElement(TableCreatorContainer, null,
         React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
-        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));
+        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));
 };

package/lib/config/entities.d.ts

@@ -81,9 +81,7 @@ export interface CategoryConfig {
  */
 export type ColumnConfig<T extends RowData, TValue = unknown, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
     columnPinned?: boolean;
-    columnVisible?: boolean;
     componentConfig: ComponentConfig<C, T>;
-    disableHiding?: boolean;
     header: string;
     id: string;
     meta?: ColumnMeta<T, unknown>;
@@ -201,7 +199,6 @@ export type GridTrackSize = GridTrackAuto | GridTrackLength | GridTrackFlex | Gr
  */
 export interface ListConfig<T extends RowData> {
     columns: ColumnConfig<T>[];
-    defaultSort?: ColumnSort;
     tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 /**
@@ -210,7 +207,6 @@ export interface ListConfig<T extends RowData> {
 export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
-    enableRowPreview?: boolean;
     enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;

package/lib/providers/exploreState/actions/updateVisibility/action.d.ts

@@ -0,0 +1,10 @@
+import { ExploreState } from "../../../exploreState";
+import { UpdateColumnVisibilityPayload } from "./types";
+/**
+ * Reducer function to handle the "update column visibility" action.
+ * Updates the column visibility in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export declare function updateColumnVisibilityAction(state: ExploreState, payload: UpdateColumnVisibilityPayload): ExploreState;

package/lib/providers/exploreState/actions/updateVisibility/action.js

@@ -0,0 +1,16 @@
+import { updateEntityPageState } from "../../utils";
+import { buildNextColumnVisibility } from "./utils";
+/**
+ * Reducer function to handle the "update column visibility" action.
+ * Updates the column visibility in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export function updateColumnVisibilityAction(state, payload) {
+    const columnVisibility = buildNextColumnVisibility(state, payload.updaterOrValue);
+    return {
+        ...state,
+        entityPageState: updateEntityPageState(state.tabValue, state.entityPageState, { columnVisibility }),
+    };
+}

package/lib/providers/exploreState/actions/updateVisibility/dispatch.d.ts

@@ -0,0 +1,7 @@
+import { UpdateColumnVisibilityAction, UpdateColumnVisibilityPayload } from "./types";
+/**
+ * Action creator for updating column visibility in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export declare function updateVisibility(payload: UpdateColumnVisibilityPayload): UpdateColumnVisibilityAction;

package/lib/providers/exploreState/actions/updateVisibility/dispatch.js

@@ -0,0 +1,12 @@
+import { ExploreActionKind } from "../../../exploreState";
+/**
+ * Action creator for updating column visibility in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateVisibility(payload) {
+    return {
+        payload,
+        type: ExploreActionKind.UpdateColumnVisibility,
+    };
+}

package/lib/providers/exploreState/actions/updateVisibility/types.d.ts

@@ -0,0 +1,9 @@
+import { Updater, VisibilityState } from "@tanstack/react-table";
+import { ExploreActionKind } from "../../../exploreState";
+export type UpdateColumnVisibilityAction = {
+    payload: UpdateColumnVisibilityPayload;
+    type: ExploreActionKind.UpdateColumnVisibility;
+};
+export type UpdateColumnVisibilityPayload = {
+    updaterOrValue: Updater<VisibilityState>;
+};

package/lib/providers/exploreState/actions/updateVisibility/types.js

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

package/lib/providers/exploreState/actions/updateVisibility/utils.d.ts

@@ -0,0 +1,10 @@
+import { Updater, VisibilityState } from "@tanstack/react-table";
+import { ExploreState } from "../../../exploreState";
+/**
+ * Builds the next column visibility state for the current entity type.
+ * Uses TanStack updater to update the column visibility state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the column visibility state.
+ * @returns column visibility state.
+ */
+export declare function buildNextColumnVisibility(state: ExploreState, updaterOrValue: Updater<VisibilityState>): VisibilityState;

package/lib/providers/exploreState/actions/updateVisibility/utils.js

@@ -0,0 +1,21 @@
+import { resolveUpdater } from "../../../../components/Table/options/updater";
+/**
+ * Builds the next column visibility state for the current entity type.
+ * Uses TanStack updater to update the column visibility state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the column visibility state.
+ * @returns column visibility state.
+ */
+export function buildNextColumnVisibility(state, updaterOrValue) {
+    return resolveUpdater(updaterOrValue, getOldColumnVisibility(state));
+}
+/**
+ * Retrieves the current "old" state from the explore state, for the current entity type.
+ * @param state - Explore state.
+ * @returns old column visibility state.
+ */
+function getOldColumnVisibility(state) {
+    const { entityPageState, tabValue } = state;
+    const { columnVisibility = {} } = entityPageState[tabValue];
+    return columnVisibility;
+}

package/lib/providers/exploreState/entities.d.ts

@@ -4,7 +4,7 @@ import { RowPreviewState } from "../../components/Table/features/RowPreview/enti
 import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
-    columnsVisibility: VisibilityState;
+    columnVisibility: VisibilityState;
     enableRowSelection: boolean;
     grouping: GroupingState;
     rowPreview: RowPreviewState;

package/lib/providers/exploreState/initializer/utils.js

@@ -1,5 +1,4 @@
-import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
-import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
+import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import { SELECT_CATEGORY_KEY } from "../constants";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
 import { DEFAULT_CATEGORY_GROUP_SAVED_FILTERS, DEFAULT_ENTITY_STATE, INITIAL_STATE, } from "./constants";
@@ -99,13 +98,8 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
  * @returns column visibility.
  */
 function initColumnVisibility(entityConfig) {
-    const { list: { columns, tableOptions: { enableRowSelection, initialState: { columnVisibility = {} } = {}, } = {}, }, } = entityConfig;
-    return {
-        [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibility` is initialized from columns configuration.
-        [ACCESSOR_KEYS.SELECT]: Boolean(enableRowSelection),
-        ...getInitialTableColumnVisibility(columns),
-        ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
-    };
+    const { list: { tableOptions = {} }, } = entityConfig;
+    return getInitialColumnVisibilityState(tableOptions);
 }
 /**
  * Returns the initial `enableRowSelection` option for the specified entity list configuration.
@@ -126,7 +120,7 @@ function initEntityPageState(config) {
             ...acc,
             [entity.route]: {
                 categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
-                columnsVisibility: initColumnVisibility(entity),
+                columnVisibility: initColumnVisibility(entity),
                 enableRowSelection: initEnableRowSelection(entity),
                 grouping: initGrouping(entity),
                 rowPreview: undefined,
@@ -197,9 +191,7 @@ function initGrouping(entityConfig) {
  * @returns initial sorting state.
  */
 function initSorting(entityConfig) {
-    const { list: { defaultSort, tableOptions: { initialState: { sorting = [] } = {} } = {}, }, } = entityConfig;
-    if (defaultSort)
-        return [defaultSort];
+    const { list: { tableOptions: { initialState: { sorting = [] } = {} } = {} }, } = entityConfig;
     return sorting;
 }
 /**

package/lib/providers/exploreState/payloads/entities.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
+import { ColumnSort, GroupingState, RowSelectionState } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory, SelectedFilter } from "../../../common/entities";
 import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
 import { ListItems, PaginationResponse } from "../../exploreState";
@@ -35,10 +35,6 @@ export interface ProcessExploreResponsePayload {
  * Reset explore response payload.
  */
 export type ResetExploreResponsePayload = undefined;
-/**
- * Update column visibility payload.
- */
-export type UpdateColumnVisibilityPayload = VisibilityState;
 /**
  * Update entity filters payload.
  */

package/lib/providers/exploreState/utils.d.ts

@@ -104,7 +104,7 @@ export declare function updateEntityPageStateWithCommonCategoryGroupConfigKey(st
 export declare function updateEntityStateByCategoryGroupConfigKey(state: ExploreState, nextEntityState: Partial<EntityState>, categoryGroupConfigKey?: string): void;
 /**
  *  Updates the entity page state for each entity with row selection enabled,
- *  by updating the visibility of the "select" column based on user access and resetting row selection state.
+ *  by updating the visibility of the "rowSelection" column based on user access and resetting row selection state.
  * @param state - Explore state.
  * @param canEdit - User has edit access.
  * @returns new entity page state mapper with updated column visibility and row selection state.

package/lib/providers/exploreState/utils.js

@@ -1,4 +1,4 @@
-import { ACCESSOR_KEYS } from "../../components/TableCreator/common/constants";
+import { COLUMN_IDENTIFIER } from "../../components/Table/common/columnIdentifier";
 import { DEFAULT_ENTITY_STATE } from "./initializer/constants";
 /**
  * Returns the entity state saved filter state for the given category key.
@@ -179,7 +179,7 @@ export function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState
 }
 /**
  *  Updates the entity page state for each entity with row selection enabled,
- *  by updating the visibility of the "select" column based on user access and resetting row selection state.
+ *  by updating the visibility of the "rowSelection" column based on user access and resetting row selection state.
  * @param state - Explore state.
  * @param canEdit - User has edit access.
  * @returns new entity page state mapper with updated column visibility and row selection state.
@@ -191,9 +191,9 @@ export function updateSelectColumnVisibility(state, canEdit) {
                 ...acc,
                 [entityPath]: {
                     ...entityPageState,
-                    columnsVisibility: {
-                        ...entityPageState.columnsVisibility,
-                        [ACCESSOR_KEYS.SELECT]: canEdit,
+                    columnVisibility: {
+                        ...entityPageState.columnVisibility,
+                        [COLUMN_IDENTIFIER.ROW_SELECTION]: canEdit,
                     },
                     rowSelection: {},
                 },

package/lib/providers/exploreState.d.ts

@@ -4,8 +4,9 @@ import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
+import { UpdateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/types";
 import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
-import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ResetExploreResponsePayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowPreviewPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
+import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ResetExploreResponsePayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowPreviewPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export type CatalogState = string | undefined;
 /**
  * Explore context.
@@ -169,13 +170,6 @@ type SelectEntityTypeAction = {
     payload: string;
     type: ExploreActionKind.SelectEntityType;
 };
-/**
- * Update column visibility action.
- */
-type UpdateColumnVisibilityAction = {
-    payload: UpdateColumnVisibilityPayload;
-    type: ExploreActionKind.UpdateColumnVisibility;
-};
 /**
  * Update entity filters action.
  */

package/lib/providers/exploreState.js

@@ -4,6 +4,7 @@ import { buildCategoryViews, buildNextFilterState, } from "../hooks/useCategoryF
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
 import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
+import { updateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/action";
 import { DEFAULT_PAGINATION_STATE, INITIAL_STATE, } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
 import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedProperty, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
@@ -234,11 +235,7 @@ function exploreReducer(state, action, exploreContext) {
          * Update column visibility
          **/
         case ExploreActionKind.UpdateColumnVisibility: {
-            const columnsVisibility = payload;
-            return {
-                ...state,
-                entityPageState: updateEntityPageState(state.tabValue, state.entityPageState, { columnsVisibility }),
-            };
+            return updateColumnVisibilityAction(state, payload);
         }
         /**
          * Update entity filters.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Table/common/columnDef.ts

@@ -1,7 +1,9 @@
 import { ColumnDef, RowData } from "@tanstack/react-table";
 import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
-import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
 import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
+import { RowSelectionCell } from "../components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
@@ -10,9 +12,23 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableHiding: false,
     enableSorting: false,
     header: "",
-    id: ACCESSOR_KEYS.ROW_POSITION,
+    id: COLUMN_IDENTIFIER.ROW_POSITION,
     meta: {
       align: TABLE_CELL_PROPS.ALIGN.RIGHT,
+      columnPinned: false,
+      header: "",
+      width: "max-content",
+    },
+  },
+  ROW_SELECTION: {
+    cell: RowSelectionCell,
+    enableGrouping: false,
+    enableHiding: false,
+    enableSorting: false,
+    header: HeadSelectionCell,
+    id: COLUMN_IDENTIFIER.ROW_SELECTION,
+    meta: {
+      columnPinned: false,
       header: "",
       width: "max-content",
     },

package/src/components/Table/common/columnIdentifier.ts

@@ -0,0 +1,4 @@
+export const COLUMN_IDENTIFIER = {
+  ROW_POSITION: "rowPosition",
+  ROW_SELECTION: "rowSelection",
+};

package/src/components/Table/common/typeGuards.ts

@@ -0,0 +1,12 @@
+import { Column, RowData } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if a column's header is a string.
+ * @param column - Column.
+ * @returns true if the column has a string header.
+ */
+export function isStringHeaderColumn<T extends RowData>(
+  column: Column<T>
+): column is Column<T> & { columnDef: { header: string } } {
+  return typeof column.columnDef.header === "string";
+}