@databiosphere/findable-ui 18.0.0 → 19.0.0

package/lib/config/entities.d.ts

@@ -1,5 +1,5 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnMeta, ColumnSort, RowData, Table, TableOptions } from "@tanstack/react-table";
+import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -70,19 +70,19 @@ export interface CategoryConfig {
 }
 /**
  * Column configuration.
+ * TanStack ColumnDef properties not currently supported include:
+ * - `enableMultiSort` - Note, table multi-sort is managed via table options.
  */
-export interface ColumnConfig<T = any, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> {
+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;
-    disableSorting?: boolean;
     header: string;
     id: string;
     meta?: ColumnMeta<T, unknown>;
-    tooltip?: string;
     width: GridTrackSize;
-}
+};
 /**
  * Interface used to define the configuration of a component.
  * This will be used by @see ComponentCreator to create a React component with the given props and
@@ -213,7 +213,6 @@ export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
     enableRowPreview?: boolean;
-    enableRowSelection?: boolean;
     enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
@@ -250,6 +249,7 @@ export interface Override {
 }
 export interface SavedFilter {
     filters: SelectedFilter[];
+    grouping?: GroupingState;
     sorting?: ColumnSort[];
     title: string;
 }

package/lib/config/utils.d.ts

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { EntityConfig, SiteConfig } from "./entities";
 /**
  * Returns context default config for config provider.
@@ -10,12 +9,6 @@ export declare function getDefaultConfig(): SiteConfig;
  * @returns context default entity config for config provider.
  */
 export declare function getDefaultEntityConfig(): EntityConfig;
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export declare function getDefaultSorting(entityConfig: EntityConfig): ColumnSort[];
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

package/lib/config/utils.js

@@ -46,18 +46,6 @@ export function getDefaultEntityConfig() {
         route: "",
     };
 }
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export function getDefaultSorting(entityConfig) {
-    const columnSort = entityConfig.list.defaultSort;
-    if (!columnSort) {
-        return [];
-    }
-    return [columnSort];
-}
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { GroupingState, Updater } from "@tanstack/react-table";
+import { ExploreActionKind } from "../../../exploreState";
+export type UpdateGroupingAction = {
+    payload: UpdateGroupingPayload;
+    type: ExploreActionKind.UpdateGrouping;
+};
+export type UpdateGroupingPayload = {
+    updaterOrValue: Updater<GroupingState>;
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { resolveUpdater } from "../../../../components/Table/options/updater";
+/**
+ * Builds the next grouping state for the current entity type.
+ * Uses TanStack updater to update the grouping state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the grouping state.
+ * @returns grouping state.
+ */
+export function buildNextGrouping(state, updaterOrValue) {
+    const grouping = resolveUpdater(updaterOrValue, getOldGrouping(state));
+    if (grouping.length > 1) {
+        // Explore state only supports single-column grouping.
+        return grouping.slice(-1);
+    }
+    return grouping;
+}
+/**
+ * Retrieves the current "old" grouping state from the explore state, for the current entity type.
+ * @param state - Explore state.
+ * @returns old grouping state.
+ */
+function getOldGrouping(state) {
+    const { entityPageState, tabValue } = state;
+    const { grouping = [] } = entityPageState[tabValue];
+    return grouping;
+}

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

@@ -1,4 +1,4 @@
-import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
+import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
 import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
@@ -6,6 +6,7 @@ export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnsVisibility: VisibilityState;
     enableRowSelection: boolean;
+    grouping: GroupingState;
     rowPreview: RowPreviewState;
     rowSelection: RowSelectionState;
     sorting: ColumnSort[];
@@ -24,8 +25,6 @@ export interface EntityState {
 }
 export type EntityStateByCategoryGroupConfigKey = Map<CategoryGroupConfigKey, EntityState>;
 export type CategoryGroupConfigKey = CategoryGroupConfig["key"];
-export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
-    sorting?: ColumnSort[];
-}
+export type EntityStateSavedFilter = SavedFilter;
 export type ListItem = any;
 export type SavedFilterByCategoryValueKey = Map<CategoryValueKey, EntityStateSavedFilter>;

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

@@ -1,6 +1,5 @@
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
-import { getDefaultSorting } from "../../../config/utils";
 import { SELECT_CATEGORY_KEY } from "../constants";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
 import { DEFAULT_CATEGORY_GROUP_SAVED_FILTERS, DEFAULT_ENTITY_STATE, INITIAL_STATE, } from "./constants";
@@ -45,8 +44,13 @@ function buildSavedFilterByCategoryValueKey(savedFilters) {
     if (!savedFilters)
         return;
     const savedFilterByCategoryValueKey = new Map();
-    for (const { filters, sorting, title } of savedFilters) {
-        savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
+    for (const { filters, grouping, sorting, title } of savedFilters) {
+        savedFilterByCategoryValueKey.set(title, {
+            filters,
+            grouping,
+            sorting,
+            title,
+        });
     }
     return savedFilterByCategoryValueKey;
 }
@@ -95,14 +99,22 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
  * @returns column visibility.
  */
 function initColumnVisibility(entityConfig) {
-    const { list: { columns, tableOptions: { initialState: { columnVisibility = {} } = {} } = {}, }, listView: { enableRowSelection = false } = {}, } = entityConfig;
+    const { list: { columns, tableOptions: { enableRowSelection, initialState: { columnVisibility = {} } = {}, } = {}, }, } = entityConfig;
     return {
-        [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibilty` is initialized from columns configuration.
-        [ACCESSOR_KEYS.SELECT]: enableRowSelection,
+        [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.
     };
 }
+/**
+ * Returns the initial `enableRowSelection` option for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial `enableRowSelection` option.
+ */
+function initEnableRowSelection(entityConfig) {
+    return Boolean(entityConfig.list.tableOptions?.enableRowSelection);
+}
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -115,10 +127,11 @@ function initEntityPageState(config) {
             [entity.route]: {
                 categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
                 columnsVisibility: initColumnVisibility(entity),
-                enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+                enableRowSelection: initEnableRowSelection(entity),
+                grouping: initGrouping(entity),
                 rowPreview: undefined,
                 rowSelection: {},
-                sorting: getDefaultSorting(entity),
+                sorting: initSorting(entity),
             },
         };
     }, {});
@@ -169,6 +182,26 @@ function initFilterState(decodedFilterParam) {
     }
     return filterState;
 }
+/**
+ * Returns the initial table grouping state for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial grouping state.
+ */
+function initGrouping(entityConfig) {
+    const { list: { tableOptions: { initialState: { grouping = [] } = {} } = {} }, } = entityConfig;
+    return grouping;
+}
+/**
+ * Returns the initial table sorting state for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial sorting state.
+ */
+function initSorting(entityConfig) {
+    const { list: { defaultSort, tableOptions: { initialState: { sorting = [] } = {} } = {}, }, } = entityConfig;
+    if (defaultSort)
+        return [defaultSort];
+    return sorting;
+}
 /**
  * Returns the explore state reducer initial arguments.
  * @param config - Site config.

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

@@ -1,4 +1,4 @@
-import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
+import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } 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";
@@ -45,6 +45,7 @@ export type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
     entityListType: string;
     filters: SelectedFilter[];
+    grouping?: GroupingState;
     sorting?: ColumnSort[];
 }
 /**

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

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { ExploreState, ListItems, PaginationState } from "../exploreState";
@@ -48,13 +47,16 @@ export declare function getEntityState(state: ExploreState, categoryGroupConfigK
  */
 export declare function getEntityStateSavedFilter(state: ExploreState, categoryValueKey: CategoryValueKey): EntityStateSavedFilter | undefined;
 /**
- * Returns entity state "saved filter" sorting for the given category value key.
+ * Retrieves a specified property from the "saved filter" for the given category value key.
+ * This function fetches a property (e.g., "sorting" or "grouping") from the saved filter
+ * associated with a given `selectedValue`.
  * @param state - Explore state.
  * @param selectedValue - Key of category value that has been de/selected.
  * @param selected - True if value is selected, false if de-selected.
- * @returns sorting.
+ * @param propertyName - The name of the property to retrieve from the saved filter. Should be one of the predefined keys: "sorting" or "grouping".
+ * @returns value of the specified property from the saved filter, or undefined if `selected` is false.
  */
-export declare function getEntityStateSavedSorting(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean): ColumnSort[] | undefined;
+export declare function getEntityStateSavedProperty<K extends "sorting" | "grouping">(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean, propertyName: K): EntityStateSavedFilter[K] | undefined;
 /**
  * Returns the filter count.
  * @param filterState - Filter state.

package/lib/providers/exploreState/utils.js

@@ -67,17 +67,20 @@ export function getEntityStateSavedFilter(state, categoryValueKey) {
     return entityState.savedFilterByCategoryValueKey?.get(categoryValueKey);
 }
 /**
- * Returns entity state "saved filter" sorting for the given category value key.
+ * Retrieves a specified property from the "saved filter" for the given category value key.
+ * This function fetches a property (e.g., "sorting" or "grouping") from the saved filter
+ * associated with a given `selectedValue`.
  * @param state - Explore state.
  * @param selectedValue - Key of category value that has been de/selected.
  * @param selected - True if value is selected, false if de-selected.
- * @returns sorting.
+ * @param propertyName - The name of the property to retrieve from the saved filter. Should be one of the predefined keys: "sorting" or "grouping".
+ * @returns value of the specified property from the saved filter, or undefined if `selected` is false.
  */
-export function getEntityStateSavedSorting(state, selectedValue, selected) {
+export function getEntityStateSavedProperty(state, selectedValue, selected, propertyName) {
     if (!selected)
         return;
     const savedFilter = getEntityStateSavedFilter(state, selectedValue);
-    return savedFilter?.sorting;
+    return savedFilter?.[propertyName];
 }
 /**
  * Returns the filter count.

package/lib/providers/exploreState.d.ts

@@ -3,6 +3,7 @@ import { AzulSearchIndex } from "../apis/azul/common/entities";
 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 { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
 import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ResetExploreResponsePayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowPreviewPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export type CatalogState = string | undefined;
@@ -103,6 +104,7 @@ export declare enum ExploreActionKind {
     UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
     UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateGrouping = "UPDATE_GROUPING",
     UpdateRowPreview = "UPDATE_ROW_PREVIEW",
     UpdateRowSelection = "UPDATE_ROW_SELECTION",
     UpdateSorting = "UPDATE_SORTING"
@@ -110,7 +112,7 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction;
+export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateGroupingAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */

package/lib/providers/exploreState.js

@@ -3,9 +3,10 @@ import { useAuthentication } from "../hooks/useAuthentication/useAuthentication"
 import { buildCategoryViews, buildNextFilterState, } from "../hooks/useCategoryFilter";
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
+import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { DEFAULT_PAGINATION_STATE, INITIAL_STATE, } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
-import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedSorting, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
+import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedProperty, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -70,6 +71,7 @@ export var ExploreActionKind;
     ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateGrouping"] = "UPDATE_GROUPING";
     ExploreActionKind["UpdateRowPreview"] = "UPDATE_ROW_PREVIEW";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
@@ -93,7 +95,9 @@ function exploreReducer(state, action, exploreContext) {
             const rowPreview = closeRowPreview(state.rowPreview);
             const rowSelection = {};
             const savedFilterState = buildEntityStateSavedFilterState(payload.categoryKey, payload.selectedValue, payload.selected);
-            const savedSorting = getEntityStateSavedSorting(state, payload.selectedValue, payload.selected);
+            const savedGrouping = getEntityStateSavedProperty(state, payload.selectedValue, payload.selected, "grouping");
+            const savedSorting = getEntityStateSavedProperty(state, payload.selectedValue, payload.selected, "sorting");
+            const grouping = savedGrouping || []; // Reset grouping to default if saved grouping is not available.
             const sorting = savedSorting || []; // Reset sorting to default if saved sorting is not available.
             updateEntityStateByCategoryGroupConfigKey(state, {
                 filterState,
@@ -101,7 +105,7 @@ function exploreReducer(state, action, exploreContext) {
             });
             return {
                 ...state,
-                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection, sorting }),
+                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }),
                 filterCount: getFilterCount(filterState),
                 filterState,
                 paginationState: resetPage(state.paginationState),
@@ -250,7 +254,7 @@ function exploreReducer(state, action, exploreContext) {
          * - closes row preview, without updating the entity page state row preview.
          */
         case ExploreActionKind.UpdateEntityFilters: {
-            const { entityListType, filters: filterState, sorting } = payload;
+            const { entityListType, filters: filterState, grouping = [], sorting = [], } = payload;
             const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(entityListType, state.entityPageState);
             const rowPreview = closeRowPreview(state.entityPageState[entityListType].rowPreview);
             const rowSelection = {};
@@ -261,7 +265,7 @@ function exploreReducer(state, action, exploreContext) {
             }, categoryGroupConfigKey);
             return {
                 ...state,
-                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection, sorting }, categoryGroupConfigKey),
+                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }, categoryGroupConfigKey),
                 rowPreview: closeRowPreview(state.rowPreview),
             };
         }
@@ -295,6 +299,12 @@ function exploreReducer(state, action, exploreContext) {
                 rowPreview,
             };
         }
+        /**
+         * Update grouping
+         **/
+        case ExploreActionKind.UpdateGrouping: {
+            return updateGroupingAction(state, payload);
+        }
         /**
          * Update row preview
          */

package/lib/views/ExploreView/exploreView.js

@@ -152,7 +152,7 @@ function renderComponent(componentsConfig, response) {
 function renderList(exploreState, entityConfig, entityListType) {
     const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig, defaultSort, tableOptions } = list;
+    const { columns: columnsConfig } = list;
     if (!exploreState || !tabValue) {
         return React.createElement(React.Fragment, null); //TODO: return the loading UI component
     }
@@ -161,7 +161,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading, tableOptions: tableOptions }));
+    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

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

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -3,6 +3,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -13,6 +14,7 @@ export const CollapsableRows = <T extends RowData>({
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {rows.map((row) => {

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -26,9 +26,9 @@ export const TableRows = <T extends RowData>({
       {rows.map((row) => {
         return (
           <TableRow
-            id={getRowId(row)}
-            isPreview={row.getIsPreview()}
             key={row.id}
+            isGrouped={row.getIsGrouped()}
+            isPreview={row.getIsPreview()}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
@@ -50,18 +50,3 @@ export const TableRows = <T extends RowData>({
     </Fragment>
   );
 };
-
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId<T extends RowData>(row: Row<T>): string | undefined {
-  const { depth, getIsGrouped, id } = row;
-  if (getIsGrouped()) {
-    return `grouped-row-${id}`;
-  }
-  if (depth > 0) {
-    return `sub-row-${id}`;
-  }
-}

package/src/components/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.tsx

@@ -8,7 +8,7 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import React, { Fragment } from "react";
+import React from "react";
 import { formatCountSize } from "../../../../../../utils/formatCountSize";
 import { formatFileSize } from "../../../../../../utils/formatFileSize";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -81,37 +81,33 @@ export const ExportFileSummaryForm = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            <TableRow>
-              {fileSummaryFacet.terms.map(
-                ({ count, name, selected, size = 0 }) => (
-                  <Fragment key={name}>
-                    <TableCell>
-                      <FormControlLabel
-                        control={
-                          <Checkbox
-                            checked={selected}
-                            checkedIcon={<CheckedIcon />}
-                            icon={
-                              error ? <UncheckedErrorIcon /> : <UncheckedIcon />
-                            }
-                            onChange={(): void => {
-                              onClearError(error, ERROR.FILE_SUMMARY_ERROR);
-                              onFilter(fileSummaryFacet.name, name, selected);
-                            }}
-                          />
-                        }
-                        key={name}
-                        label={name}
-                      />
-                    </TableCell>
-                    <TableCell>{formatCountSize(count)}</TableCell>
-                    {hasFileSize && (
-                      <TableCell>{formatFileSize(size)}</TableCell>
-                    )}
-                  </Fragment>
-                )
-              )}
-            </TableRow>
+            {fileSummaryFacet.terms.map(
+              ({ count, name, selected, size = 0 }) => (
+                <TableRow key={name}>
+                  <TableCell>
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={selected}
+                          checkedIcon={<CheckedIcon />}
+                          icon={
+                            error ? <UncheckedErrorIcon /> : <UncheckedIcon />
+                          }
+                          onChange={(): void => {
+                            onClearError(error, ERROR.FILE_SUMMARY_ERROR);
+                            onFilter(fileSummaryFacet.name, name, selected);
+                          }}
+                        />
+                      }
+                      key={name}
+                      label={name}
+                    />
+                  </TableCell>
+                  <TableCell>{formatCountSize(count)}</TableCell>
+                  {hasFileSize && <TableCell>{formatFileSize(size)}</TableCell>}
+                </TableRow>
+              )
+            )}
           </TableBody>
         </GridTable>
       </GridPaper>