@databiosphere/findable-ui 17.0.0 → 19.0.0

package/src/components/TableCreator/options/grouping/constants.ts

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

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

@@ -0,0 +1,17 @@
+import { GroupingOptions, GroupingState, Updater } from "@tanstack/react-table";
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateGrouping } from "../../../../providers/exploreState/actions/updateGrouping/dispatch";
+import { GROUPING_OPTIONS } from "./constants";
+
+export function useGroupingOptions(): GroupingOptions {
+  const { exploreDispatch } = useExploreState();
+
+  const onGroupingChange = useCallback(
+    (updaterOrValue: Updater<GroupingState>): void =>
+      exploreDispatch(updateGrouping({ updaterOrValue })),
+    [exploreDispatch]
+  );
+
+  return { ...GROUPING_OPTIONS, onGroupingChange };
+}

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

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

package/src/components/TableCreator/options/rowSelection/constants.ts

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

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

@@ -0,0 +1,8 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+import { ROW_SELECTION_OPTIONS } from "./constants";
+
+export function useRowSelectionOptions<
+  T extends RowData
+>(): RowSelectionOptions<T> {
+  return { ...(ROW_SELECTION_OPTIONS as RowSelectionOptions<T>) };
+}

package/src/components/TableCreator/options/sorting/constants.ts

@@ -0,0 +1,10 @@
+import { RowData, SortingOptions } from "@tanstack/react-table";
+
+export const SORTING_OPTIONS: Pick<
+  SortingOptions<RowData>,
+  "enableSorting" | "enableSortingInteraction" | "enableSortingRemoval"
+> = {
+  enableSorting: true,
+  enableSortingInteraction: true,
+  enableSortingRemoval: false, // false i.e. toggling the sorting on a column will not remove sorting on the column.
+};

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

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

package/src/components/TableCreator/tableCreator.tsx

@@ -1,17 +1,12 @@
 import {
   CellContext,
   ColumnDef,
-  ColumnSort,
   CoreOptions,
   HeaderContext,
   RowData,
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
-import {
-  ColumnConfig,
-  ListConfig,
-  ListViewConfig,
-} from "../../config/entities";
+import { ColumnConfig, ListViewConfig } from "../../config/entities";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
@@ -26,16 +21,15 @@ import { HeadSelectionCell } from "../Table/components/TableHead/components/Head
 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";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
-  defaultSort: ColumnSort | undefined;
   getRowId?: CoreOptions<T>["getRowId"];
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
-  tableOptions?: ListConfig<T>["tableOptions"];
 }
 
 const createCell = <T extends RowData = RowData, TData = unknown>(
@@ -63,13 +57,12 @@ const createRowSelectionCell = <T extends RowData>() =>
 
 export const TableCreator = <T extends RowData>({
   columns,
-  defaultSort,
   getRowId,
   items,
   listView,
   loading,
-  tableOptions,
 }: TableCreatorProps<T>): JSX.Element => {
+  const tableOptions = useTableOptions<T>();
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
       columns.reduce(
@@ -95,7 +88,7 @@ export const TableCreator = <T extends RowData>({
       ),
     [columns]
   );
-  const initialState = getInitialState(columns, defaultSort);
+  const initialState = getInitialState(columns);
   return (
     <TableCreatorContainer>
       <Loading

package/src/components/common/DropdownMenu/dropdownMenu.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
 
-export const Menu = styled(MMenu)`
+export const StyledMenu = styled(MMenu)`
   .MuiPaper-menu {
     margin: 4px 0;
   }

package/src/components/common/DropdownMenu/dropdownMenu.tsx

@@ -1,48 +1,50 @@
 import { MenuProps as MMenuProps } from "@mui/material";
-import React, { ElementType, Fragment, MouseEvent, useState } from "react";
+import React, { Fragment } from "react";
+import { useMenu } from "../Menu/hooks/useMenu";
 import { DEFAULT_DROPDOWN_MENU_PROPS } from "./common/constants";
 import {
   DropdownMenuButtonProps,
   DropdownMenuIconButtonProps,
   DropdownMenuItemProps,
 } from "./common/entities";
-import { Menu } from "./dropdownMenu.styles";
+import { StyledMenu } from "./dropdownMenu.styles";
 
 export interface DropdownMenuProps
   extends Omit<MMenuProps, "children" | "open"> {
-  Button:
-    | ElementType<DropdownMenuButtonProps>
-    | ElementType<DropdownMenuIconButtonProps>;
+  button: (
+    props:
+      | Pick<DropdownMenuButtonProps, "onClick" | "open">
+      | Pick<DropdownMenuIconButtonProps, "onClick" | "open">
+  ) => JSX.Element;
   children?: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
   className?: string;
 }
 
 export const DropdownMenu = ({
-  Button,
+  button,
   children,
   className,
   ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
 }: DropdownMenuProps): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const closeMenu = (): void => setAnchorEl(null);
+  const {
+    anchorEl,
+    onClose: closeMenu,
+    onOpen: openMenu,
+    open,
+  } = useMenu<HTMLButtonElement>();
   return (
     <Fragment>
-      <Button
-        onClick={(event: MouseEvent<HTMLButtonElement>): void =>
-          setAnchorEl(event.currentTarget)
-        }
-        open={Boolean(anchorEl)}
-      />
-      <Menu
+      {button({ onClick: openMenu, open })}
+      <StyledMenu
         {...DEFAULT_DROPDOWN_MENU_PROPS}
         anchorEl={anchorEl}
         className={className}
         onClose={closeMenu}
-        open={Boolean(anchorEl)}
+        open={open}
         {...props}
       >
         {children ? children({ closeMenu }) : null}
-      </Menu>
+      </StyledMenu>
     </Fragment>
   );
 };

package/src/components/common/Menu/hooks/useMenu.ts

@@ -1,13 +1,12 @@
-import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent, useCallback, useMemo, useState } from "react";
 
-export interface UseMenu {
-  anchorEl: MPopperProps["anchorEl"];
+export interface UseMenu<E extends HTMLElement> {
+  anchorEl: E | null;
   onClose: () => void;
   onDisableScrollLock: () => void;
   onEnableScrollLock: () => void;
-  onOpen: (event: MouseEvent<HTMLElement>) => void;
-  onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+  onOpen: (event: MouseEvent<E>) => void;
+  onToggleOpen: (event: MouseEvent<E>) => void;
   open: boolean;
 }
 
@@ -15,8 +14,8 @@ export interface UseMenu {
  * Menu functionality for menu dropdown, with menu position.
  * @returns menu functionality.
  */
-export const useMenu = (): UseMenu => {
-  const [anchorEl, setAnchorEl] = useState<MPopperProps["anchorEl"]>(null);
+export const useMenu = <E extends HTMLElement>(): UseMenu<E> => {
+  const [anchorEl, setAnchorEl] = useState<E | null>(null);
   const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
 
   // Closes menu.
@@ -35,13 +34,13 @@ export const useMenu = (): UseMenu => {
   }, []);
 
   // Opens menu.
-  const onOpen = useCallback((event: MouseEvent<HTMLElement>): void => {
+  const onOpen = useCallback((event: MouseEvent<E>): void => {
     setAnchorEl(event.currentTarget);
   }, []);
 
   // Toggles menu open/close.
   const onToggleOpen = useCallback(
-    (event: MouseEvent<HTMLElement>): void => {
+    (event: MouseEvent<E>): void => {
       if (open) {
         setAnchorEl(null);
       } else {

package/src/config/entities.ts

@@ -1,8 +1,10 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import {
   CellContext,
+  ColumnDef,
   ColumnMeta,
   ColumnSort,
+  GroupingState,
   RowData,
   Table,
   TableOptions,
@@ -87,24 +89,24 @@ 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<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
-  T = any,
+export type ColumnConfig<
+  T extends RowData,
+  TValue = unknown,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
   C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any
-> {
+> = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
   columnPinned?: boolean; // Column is pinned to the top when table rows are collapsable.
   columnVisible?: boolean; // Column is visible. Default is "true".
   componentConfig: ComponentConfig<C, T>;
   disableHiding?: boolean; // Disables hiding of column. Column is unavailable for "Edit Columns" functionality when "true".
-  disableSorting?: boolean; // Disables sorting for the column.
   header: string;
   id: string; // The unique identifier for the column.
   meta?: ColumnMeta<T, unknown>;
-  tooltip?: string; // TODO review need to define `tooltip` field - it is currently not in use.
   width: GridTrackSize;
-}
+};
 
 /**
  * Interface used to define the configuration of a component.
@@ -256,7 +258,6 @@ export type GridTrackSize =
 /**
  * List configuration.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model can receive any model as type
 export interface ListConfig<T extends RowData> {
   columns: ColumnConfig<T>[];
   defaultSort?: ColumnSort; // Establishes initial table state "sorting" state.
@@ -270,7 +271,6 @@ export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
   enableRowPreview?: boolean;
-  enableRowSelection?: boolean;
   enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
@@ -312,6 +312,7 @@ export interface Override {
 
 export interface SavedFilter {
   filters: SelectedFilter[];
+  grouping?: GroupingState;
   sorting?: ColumnSort[];
   title: string;
 }
@@ -324,7 +325,7 @@ export interface TrackFilterAppliedPayload {
   searchTerm: string;
   section: string;
   selected: boolean;
-  value: string;
+  value: unknown;
 }
 
 /**

package/src/config/utils.ts

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { EXPLORE_MODE } from "../hooks/useExploreMode";
 import { getConfig } from "./config";
 import { EntityConfig, SiteConfig } from "./entities";
@@ -51,19 +50,6 @@ export function getDefaultEntityConfig(): EntityConfig {
   };
 }
 
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export function getDefaultSorting(entityConfig: EntityConfig): ColumnSort[] {
-  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/src/hooks/useCategoryFilter.ts

@@ -273,7 +273,11 @@ function sortCategoryValueViews(
   cvv0: SelectCategoryValueView,
   cvv1: SelectCategoryValueView
 ): number {
-  return COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
+  return !cvv0.label
+    ? 1
+    : !cvv1.label
+    ? -1
+    : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
 }
 
 /**

package/src/hooks/useFileManifest/common/utils.ts

@@ -70,7 +70,7 @@ function bindFacets(
 function bindFacetTerms(
   facetName: string,
   responseTerms: AzulTerm[],
-  searchTermNames: string[]
+  searchTermNames: unknown[]
 ): Term[] {
   return responseTerms.reduce((accum: Term[], responseTerm) => {
     // Default term name to "Unspecified" if term name is null.
@@ -203,7 +203,7 @@ export function isFacetTermSelected(
 function listFacetSearchTermNames(
   facetName: string,
   searchTermsBySearchKey: SelectedSearchTermsBySearchKey
-): string[] {
+): unknown[] {
   return [...(searchTermsBySearchKey.get(facetName) ?? [])];
 }
 

package/src/providers/exploreState/actions/updateGrouping/action.ts

@@ -0,0 +1,26 @@
+import { ExploreState } from "../../../exploreState";
+import { updateEntityPageState } from "../../utils";
+import { UpdateGroupingPayload } from "./types";
+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: ExploreState,
+  payload: UpdateGroupingPayload
+): ExploreState {
+  const grouping = buildNextGrouping(state, payload.updaterOrValue);
+  return {
+    ...state,
+    entityPageState: updateEntityPageState(
+      state.tabValue,
+      state.entityPageState,
+      { grouping }
+    ),
+  };
+}

package/src/providers/exploreState/actions/updateGrouping/dispatch.ts

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

package/src/providers/exploreState/actions/updateGrouping/types.ts

@@ -0,0 +1,11 @@
+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/src/providers/exploreState/actions/updateGrouping/utils.ts

@@ -0,0 +1,33 @@
+import { GroupingState, Updater } from "@tanstack/react-table";
+import { resolveUpdater } from "../../../../components/Table/options/updater";
+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 function buildNextGrouping(
+  state: ExploreState,
+  updaterOrValue: Updater<GroupingState>
+): GroupingState {
+  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: ExploreState): GroupingState {
+  const { entityPageState, tabValue } = state;
+  const { grouping = [] } = entityPageState[tabValue];
+  return grouping;
+}

package/src/providers/exploreState/entities.ts

@@ -1,5 +1,6 @@
 import {
   ColumnSort,
+  GroupingState,
   RowSelectionState,
   VisibilityState,
 } from "@tanstack/react-table";
@@ -22,6 +23,7 @@ export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
   columnsVisibility: VisibilityState;
   enableRowSelection: boolean;
+  grouping: GroupingState;
   rowPreview: RowPreviewState;
   rowSelection: RowSelectionState;
   sorting: ColumnSort[];
@@ -48,9 +50,7 @@ export type EntityStateByCategoryGroupConfigKey = Map<
 
 export type CategoryGroupConfigKey = CategoryGroupConfig["key"];
 
-export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
-  sorting?: ColumnSort[];
-}
+export type EntityStateSavedFilter = SavedFilter;
 
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO revisit when adding react query or similar
 export type ListItem = any;

package/src/providers/exploreState/initializer/utils.ts

@@ -1,4 +1,8 @@
-import { VisibilityState } from "@tanstack/react-table";
+import {
+  ColumnSort,
+  GroupingState,
+  VisibilityState,
+} from "@tanstack/react-table";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
@@ -10,7 +14,6 @@ import {
   SavedFilter,
   SiteConfig,
 } from "../../../config/entities";
-import { getDefaultSorting } from "../../../config/utils";
 import { ExploreState } from "../../exploreState";
 import { SELECT_CATEGORY_KEY } from "../constants";
 import {
@@ -73,8 +76,13 @@ function buildSavedFilterByCategoryValueKey(
   if (!savedFilters) return;
   const savedFilterByCategoryValueKey: 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;
 }
@@ -145,18 +153,29 @@ function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
   const {
     list: {
       columns,
-      tableOptions: { initialState: { columnVisibility = {} } = {} } = {},
+      tableOptions: {
+        enableRowSelection,
+        initialState: { columnVisibility = {} } = {},
+      } = {},
     },
-    listView: { enableRowSelection = false } = {},
   } = 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: EntityConfig): boolean {
+  return Boolean(entityConfig.list.tableOptions?.enableRowSelection);
+}
+
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -169,10 +188,11 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
       [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),
       },
     };
   }, {} as EntityPageStateMapper);
@@ -230,6 +250,34 @@ function initFilterState(decodedFilterParam: string): SelectedFilter[] {
   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: EntityConfig): GroupingState {
+  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: EntityConfig): ColumnSort[] {
+  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/src/providers/exploreState/payloads/entities.ts

@@ -1,5 +1,6 @@
 import {
   ColumnSort,
+  GroupingState,
   RowSelectionState,
   VisibilityState,
 } from "@tanstack/react-table";
@@ -62,6 +63,7 @@ export type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
   entityListType: string;
   filters: SelectedFilter[];
+  grouping?: GroupingState;
   sorting?: ColumnSort[];
 }
 /**