@databiosphere/findable-ui 17.0.0 → 19.0.0

package/src/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, Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import {
@@ -9,38 +9,41 @@ import {
 import { TableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
-  tableInstance: Table<T>;
+  rows: Row<T>[];
   virtualizer: Virtualizer<Window, Element>;
 }
 
 export const TableRows = <T extends RowData>({
-  tableInstance,
+  rows,
   virtualizer,
 }: TableRowsProps<T>): JSX.Element => {
-  const { getRowModel } = tableInstance;
-  const { rows } = getRowModel();
   const virtualItems = virtualizer.getVirtualItems();
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
-        const { getIsPreview } = row;
+        const { getIsGrouped, getIsPreview } = row;
         return (
           <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => (
-              <TableCell
-                key={cell.id}
-                align={getTableCellAlign(cell.column)}
-                padding={getTableCellPadding(cell.column.id)}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </TableCell>
-            ))}
+            {row.getVisibleCells().map((cell) => {
+              if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
+              if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
+              return (
+                <TableCell
+                  key={cell.id}
+                  align={getTableCellAlign(cell.column)}
+                  padding={getTableCellPadding(cell.column.id)}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              );
+            })}
           </TableRow>
         );
       })}

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.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/ColumnGrouping/columnGrouping.tsx

@@ -0,0 +1,54 @@
+import { ListItemText } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { DropdownButton } from "../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownMenu } from "../../../../../common/DropdownMenu/dropdownMenu";
+import { handleClearGroupingState } from "../../../TableFeatures/ColumnGrouping/utils";
+import { StyledMenuItem } from "./columnGrouping.styles";
+import { MenuItems } from "./components/MenuItems/menuItems";
+import { LIST_ITEM_TEXT_PROPS, MENU_ITEM_PROPS, MENU_PROPS } from "./constants";
+import { ColumnGroupingProps } from "./types";
+import { getButtonLabel, getColumnGrouping } from "./utils";
+
+export const ColumnGrouping = <T extends RowData>({
+  tableInstance,
+}: ColumnGroupingProps<T>): JSX.Element | null => {
+  const {
+    getState,
+    options: { enableGrouping },
+  } = tableInstance;
+  const { grouping } = getState();
+  const groupingByColumnId = getColumnGrouping(tableInstance);
+  if (!enableGrouping) return null;
+  if (groupingByColumnId.size === 0) return null;
+  return (
+    <DropdownMenu
+      {...MENU_PROPS}
+      button={(props) => (
+        <DropdownButton {...props}>
+          {getButtonLabel(groupingByColumnId, grouping)}
+        </DropdownButton>
+      )}
+    >
+      {({ closeMenu }): JSX.Element[] => [
+        <MenuItems
+          key="column-grouping"
+          closeMenu={closeMenu}
+          groupingByColumnId={groupingByColumnId}
+          tableInstance={tableInstance}
+        />,
+        <StyledMenuItem
+          {...MENU_ITEM_PROPS}
+          key="reset-grouping-state"
+          disabled={grouping.length === 0}
+          onClick={() => {
+            handleClearGroupingState(tableInstance);
+            closeMenu();
+          }}
+        >
+          <ListItemText {...LIST_ITEM_TEXT_PROPS}>Clear Grouping</ListItemText>
+        </StyledMenuItem>,
+      ]}
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { ListItemText, MenuItem } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { handleToggleGrouping } from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { MENU_ITEM_PROPS } from "../../constants";
+import { MenuItemsProps } from "./types";
+
+export const MenuItems = <T extends RowData>({
+  closeMenu,
+  groupingByColumnId,
+  tableInstance,
+}: MenuItemsProps<T>): JSX.Element[] => {
+  const columnByMenuItem = [...groupingByColumnId.values()];
+  return columnByMenuItem.map(([menuItem, column]) => (
+    <MenuItem
+      {...MENU_ITEM_PROPS}
+      key={column.id}
+      disabled={!column.getCanGroup()}
+      onClick={() => {
+        handleToggleGrouping(tableInstance, column);
+        closeMenu();
+      }}
+      selected={column.getIsGrouped()}
+    >
+      <ListItemText disableTypography>{menuItem}</ListItemText>
+    </MenuItem>
+  ));
+};

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

@@ -0,0 +1,8 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { UseMenu } from "../../../../../../../common/Menu/hooks/useMenu";
+
+export interface MenuItemsProps<T extends RowData> {
+  closeMenu: UseMenu<HTMLButtonElement>["onClose"];
+  groupingByColumnId: Map<string, [string, Column<T>]>;
+  tableInstance: Table<T>;
+}

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

@@ -0,0 +1,17 @@
+import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
+
+export const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps> = {
+  primaryTypographyProps: {
+    color: "primary",
+    component: "span",
+    variant: "inherit",
+  },
+};
+
+export const MENU_PROPS: Partial<MenuProps> = {
+  variant: "menu",
+};
+
+export const MENU_ITEM_PROPS: Partial<MenuItemProps> = {
+  component: "li",
+};

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

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

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/utils.ts

@@ -0,0 +1,45 @@
+import { Column, GroupingState, RowData, Table } from "@tanstack/react-table";
+
+/**
+ * Retrieves the button label for the column grouping dropdown.
+ * Currently, the grouping state supports grouping by a single column only.
+ * @param groupingByColumnId - Map of column groupings by column ID.
+ * @param groupingState - Grouping state.
+ * @returns button label.
+ */
+export function getButtonLabel<T extends RowData>(
+  groupingByColumnId: Map<string, [string, Column<T>]>,
+  groupingState: GroupingState
+): string {
+  const grouping = groupingByColumnId.get(groupingState[0]);
+  if (!grouping) return "Group by";
+  return `Group by: ${grouping[0]}`;
+}
+
+/**
+ * Retrieves a map of column groupings by column ID from the given table instance.
+ * Columns that are visible, group-able with a `string` header are included and are keyed by
+ * their column ID. The value is a tuple containing the column header and the column instance.
+ * @param table - Table.
+ * @returns map of column grouping by column id.
+ */
+export function getColumnGrouping<T extends RowData>(
+  table: Table<T>
+): Map<string, [string, Column<T>]> {
+  const groupingByColumnId = new Map<string, [string, Column<T>]>();
+  for (const column of table.getAllColumns()) {
+    const {
+      columnDef: { header },
+      getCanGroup,
+      getIsVisible,
+      id,
+    } = column;
+    if (!getCanGroup()) continue;
+    if (!getIsVisible()) continue;
+    // Currently, headers are configured as strings.
+    // Only include columns that have a string header (for now).
+    if (typeof header !== "string") continue;
+    groupingByColumnId.set(id, [header, column]);
+  }
+  return groupingByColumnId;
+}

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.tsx

@@ -1,10 +1,7 @@
 import { MenuProps as MMenuProps } from "@mui/material";
 import React from "react";
-import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
-import {
-  DropdownMenuButtonProps,
-  DropdownMenuItemProps,
-} from "../../../../../../../common/DropdownMenu/common/entities";
+import { DropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
 import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
 import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
 
@@ -14,16 +11,15 @@ const DEFAULT_MENU_PROPS: Partial<MMenuProps> = {
 };
 
 export interface DropdownMenuProps {
-  Button?: DXDropdownMenuProps["Button"];
-  buttonLabel?: string;
+  button?: DXDropdownMenuProps["button"];
   children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
   className?: string;
 }
 
 export const DropdownMenu = ({
-  Button = (props: DropdownMenuButtonProps): JSX.Element =>
-    renderButton({ children: buttonLabel, ...props }),
-  buttonLabel = "Edit",
+  button = (props): JSX.Element => (
+    <DropdownButton {...props}>Edit</DropdownButton>
+  ),
   children,
   className,
   ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
@@ -32,19 +28,10 @@ export const DropdownMenu = ({
     <RowSelectionDropdownMenu
       {...DEFAULT_MENU_PROPS}
       className={className}
-      Button={Button}
+      button={button}
       {...props}
     >
       {({ closeMenu }): JSX.Element[] => children({ closeMenu })}
     </RowSelectionDropdownMenu>
   );
 };
-
-/**
- * Return the dropdown button.
- * @param props - Button props e.g. "onClick".
- * @returns button element.
- */
-function renderButton(props: DropdownMenuButtonProps): JSX.Element {
-  return <DXDropdownButton {...props} />;
-}

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

@@ -7,6 +7,7 @@ import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
@@ -25,13 +26,17 @@ export const TableToolbar = <T extends RowData>({
   const { exploreState } = useExploreState();
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
-  const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
+  const {
+    getSelectedRowModel,
+    options: { enableGrouping },
+    resetColumnVisibility,
+  } = tableInstance;
   const { enableDownload, rowPreviewView } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
   const showToolbar =
     rowDirection === ROW_DIRECTION.DEFAULT &&
-    (editColumnOptions || enableDownload);
+    (editColumnOptions || enableDownload || enableGrouping);
 
   /**
    * Resets column visibility to default state.
@@ -63,6 +68,7 @@ export const TableToolbar = <T extends RowData>({
                 rows={tableInstance.getFilteredRowModel().rows}
               />
             )}
+            <ColumnGrouping tableInstance={tableInstance} />
             <CheckboxMenu
               label="Edit Columns"
               onReset={onResetColumnVisibility}

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

@@ -23,9 +23,9 @@ export const ROW_POSITION: TableFeature = {
     };
   },
   createTable: <T extends RowData>(table: Table<T>): void => {
-    const originalGetRowModel = table.getRowModel.bind(table);
     table.getRowModel = (): RowModel<T> => {
-      return getRowModel(table, originalGetRowModel);
+      const rowModel = table.getPaginationRowModel();
+      return getRowModel(table, rowModel);
     };
   },
   getInitialState: (initialState?: InitialTableState): Partial<TableState> => {

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

@@ -11,17 +11,21 @@ import { DEFAULT_PAGINATION } from "../constants";
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
- * @param getRowModel - Table getRowModel function.
+ * @param rowModel - Row model.
  * @returns row model.
  */
 export function getRowModel<T extends RowData>(
   table: Table<T>,
-  getRowModel: Table<T>[`getRowModel`]
+  rowModel: RowModel<T>
 ): RowModel<T> {
-  const rowModel = getRowModel();
-  rowModel.rows.forEach(({ id }, i) => {
+  let i = 0;
+  rowModel.flatRows.forEach(({ getIsGrouped, id }) => {
+    const isGroupedRow = getIsGrouped();
+    const index = isGroupedRow ? -1 : i; // Capture the current value of i for this iteration.
     rowModel.rowsById[id].getRowPosition = (): number =>
-      calculateRowPosition(table, i);
+      calculateRowPosition(table, index);
+    if (isGroupedRow) return; // Iterate only for non-grouped rows.
+    i++;
   });
   return rowModel;
 }
@@ -51,6 +55,7 @@ function calculateRowPosition<T extends RowData>(
   table: Table<T>,
   index: number
 ): number {
+  if (index < 0) return index; // Grouped rows have a position of -1.
   const { getState } = table;
   const {
     pagination: { pageIndex, pageSize },

package/src/components/Table/options/updater.ts

@@ -0,0 +1,29 @@
+import { Updater } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if the given value is TanStack's updater function.
+ * TanStack updater can either be a function that computes the new value based on the old value,
+ * or a direct value. This type guard identifies whether the provided updater is a function.
+ * @param updaterOrValue - The value to check.
+ * @returns True if the value is a function, false otherwise.
+ */
+function isUpdaterFunction<T>(
+  updaterOrValue: Updater<T>
+): updaterOrValue is (old: T) => T {
+  return typeof updaterOrValue === "function";
+}
+
+/**
+ * Utility function to resolve TanStack updater into a new value.
+ * If the updater is a function, it is called with the `old` value to compute the new value.
+ * If the updater is not a function, it is returned as-is.
+ * @param updaterOrValue - The updater, either a function or a direct value.
+ * @param old - The (old) value.
+ * @returns Resolved value.
+ */
+export function resolveUpdater<T>(updaterOrValue: Updater<T>, old: T): T {
+  if (isUpdaterFunction(updaterOrValue)) {
+    return updaterOrValue(old);
+  }
+  return updaterOrValue;
+}

package/src/components/Table/table.tsx

@@ -16,7 +16,7 @@ import {
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -98,8 +98,13 @@ TableProps<T>): JSX.Element => {
     rowPreview,
     tabValue,
   } = exploreState;
-  const { columnsVisibility, enableRowSelection, rowSelection, sorting } =
-    entityPageState[tabValue];
+  const {
+    columnsVisibility,
+    enableRowSelection,
+    grouping,
+    rowSelection,
+    sorting,
+  } = entityPageState[tabValue];
   const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
   const { disablePagination = false, enableRowPreview = false } =
     listView || {};
@@ -113,15 +118,19 @@ TableProps<T>): JSX.Element => {
   );
 
   const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
+    // TODO(cc) memoize `onSortingChange` with `useCallback`.
+    // TODO(cc) copy `onSortingChange` to ../options/sorting/hook.ts see src/components/Table/options/grouping/hook.ts for example.
     exploreDispatch({
       payload: typeof updater === "function" ? updater(sorting) : updater,
       type: ExploreActionKind.UpdateSorting,
     });
     // Execute GTM tracking.
+    // TODO(cc) update tracking to handle sorting of multiple columns.
+    // TODO(cc) GTM tracking when `onSortingChange` is triggered only tracks the first column sorted, and takes the value from explore state which is not updated yet.
     track(EVENT_NAME.ENTITY_TABLE_SORTED, {
       [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-      [EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
-      [EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+      [EVENT_PARAM.COLUMN_NAME]: sorting?.[0]?.id, // TODO(cc) sorting should always be at least `[]` and never `undefined`.
+      [EVENT_PARAM.SORT_DIRECTION]: sorting?.[0]?.desc // TODO(cc) sorting should always be at least `[]` and never `undefined`.
         ? SORT_DIRECTION.DESC
         : SORT_DIRECTION.ASC,
     });
@@ -130,6 +139,7 @@ TableProps<T>): JSX.Element => {
   const onColumnVisibilityChange = (
     updater: Updater<VisibilityState>
   ): void => {
+    // TODO(cc) memoize `onColumnVisibilityChange` with `useCallback`.
     exploreDispatch({
       payload:
         typeof updater === "function" ? updater(columnsVisibility) : updater,
@@ -137,22 +147,31 @@ TableProps<T>): JSX.Element => {
     });
   };
 
-  const onRowPreviewChange = (updater: Updater<RowPreviewState>): void => {
-    exploreDispatch({
-      payload: typeof updater === "function" ? updater(rowPreview) : updater,
-      type: ExploreActionKind.UpdateRowPreview,
-    });
-  };
+  const onRowPreviewChange = useCallback(
+    (updater: Updater<RowPreviewState>): void => {
+      exploreDispatch({
+        payload: typeof updater === "function" ? updater(rowPreview) : updater,
+        type: ExploreActionKind.UpdateRowPreview,
+      });
+    },
+    [exploreDispatch, rowPreview]
+  );
 
-  const onRowSelectionChange = (updater: Updater<RowSelectionState>): void => {
-    exploreDispatch({
-      payload: typeof updater === "function" ? updater(rowSelection) : updater,
-      type: ExploreActionKind.UpdateRowSelection,
-    });
-  };
+  const onRowSelectionChange = useCallback(
+    (updater: Updater<RowSelectionState>): void => {
+      // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
+      exploreDispatch({
+        payload:
+          typeof updater === "function" ? updater(rowSelection) : updater,
+        type: ExploreActionKind.UpdateRowSelection,
+      });
+    },
+    [exploreDispatch, rowSelection]
+  );
 
   const state: Partial<TableState> = {
     columnVisibility: columnsVisibility,
+    grouping,
     pagination,
     rowPreview,
     rowSelection,
@@ -180,11 +199,9 @@ TableProps<T>): JSX.Element => {
     data: items,
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
-    enableMultiSort: clientFiltering,
+    enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
     enableRowPreview,
     enableRowSelection,
-    enableSorting: true, // client-side filtering.
-    enableSortingRemoval: false, // client-side filtering.
     getCoreRowModel: getCoreRowModel(),
     getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
     getFacetedUniqueValues: clientFiltering
@@ -215,8 +232,8 @@ TableProps<T>): JSX.Element => {
   } = tableInstance;
   const allColumns = getAllColumns();
   const { columnFilters } = getState();
-  const { rows: results } = getRowModel();
-  const noResults = !loading && (!results || results.length === 0);
+  const { rows } = getRowModel();
+  const noResults = !loading && (!rows || rows.length === 0);
   const scrollTop = useScroll();
   const visibleColumns = getVisibleFlatColumns();
   const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
@@ -280,8 +297,8 @@ TableProps<T>): JSX.Element => {
           loading: false,
           paginationResponse: {
             ...DEFAULT_PAGINATION_STATE,
-            pageSize: results.length,
-            rows: results.length,
+            pageSize: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
+            rows: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
           },
           selectCategories: buildCategoryViews(allColumns, columnFilters),
         },
@@ -294,7 +311,7 @@ TableProps<T>): JSX.Element => {
     columnFilters,
     exploreDispatch,
     listItems,
-    results,
+    rows,
   ]);
 
   function canNextPage(): boolean {
@@ -325,6 +342,7 @@ TableProps<T>): JSX.Element => {
               tableInstance={tableInstance}
             />
             <TableBody
+              rows={rows}
               rowDirection={rowDirection}
               tableInstance={tableInstance}
             />

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

@@ -1,22 +1,20 @@
 import { RowData } from "@tanstack/react-table";
+import { ColumnConfig } from "../../../config/entities";
 import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { BaseColumnConfig } from "./entities";
 
 export const ACCESSOR_KEYS = {
   ROW_POSITION: "rowPosition",
   SELECT: "select",
 };
 
-export const COLUMN_CONFIGS: Record<
-  string,
-  BaseColumnConfig<RowData, unknown>
-> = {
+export const COLUMN_CONFIGS: Record<string, ColumnConfig<RowData>> = {
   SELECT: {
     columnPinned: false,
     columnVisible: false,
     componentConfig: { component: RowSelectionCell },
     disableHiding: true,
-    disableSorting: true,
+    enableGrouping: false,
+    enableSorting: false,
     header: ACCESSOR_KEYS.SELECT,
     id: ACCESSOR_KEYS.SELECT,
     meta: {

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

@@ -1,34 +1,41 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { BaseColumnConfig } from "./entities";
+import { ColumnConfig } from "../../../config/entities";
 
 /**
  * Builds a base column definition.
+ * The following properties are set by default:
+ * - Grouping is not enabled `enableGrouping: false`.
+ * - Sorting is enabled - `enableSorting: true`.
  * @param baseColumnConfig - Base column configuration.
  * @returns column definition.
  */
-export function buildBaseColumnDef<T, TValue>(
-  baseColumnConfig: BaseColumnConfig<T, TValue>
+export function buildBaseColumnDef<T>(
+  baseColumnConfig: ColumnConfig<T>
 ): ColumnDef<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,
-    disableSorting,
     header,
     id,
     meta,
     width,
+    ...columnDef
   } = baseColumnConfig;
   return {
+    ...columnDef,
     accessorKey: id,
     enableHiding: !disableHiding,
-    enableSorting: !disableSorting,
     header,
     id,
     meta: {
-      ...meta,
       columnPinned,
-      header: meta ? meta.header : header,
+      header: typeof header === "string" ? header : undefined,
       width,
+      ...meta,
     },
   };
 }

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

@@ -0,0 +1,14 @@
+import {
+  ExpandedOptions,
+  getExpandedRowModel,
+  RowData,
+} from "@tanstack/react-table";
+
+export const EXPANDED_OPTIONS: Pick<
+  ExpandedOptions<RowData>,
+  "autoResetExpanded" | "enableExpanding" | "getExpandedRowModel"
+> = {
+  autoResetExpanded: false,
+  enableExpanding: false,
+  getExpandedRowModel: getExpandedRowModel(),
+};

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

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