@cutting/material-react-table 4.0.5 → 5.0.0-beta.1

package/src/types.ts

@@ -30,15 +30,16 @@ import {
 } from '@mui/x-date-pickers';
 import {
   type AccessorFn,
-  type AggregationFn,
+  type AggregationFnDef,
   type Cell,
+  type CellData,
   type Column,
   type ColumnDef,
   type ColumnFiltersState,
   type ColumnOrderState,
   type ColumnPinningState,
-  type ColumnSizingInfoState,
   type ColumnSizingState,
+  type ColumnVisibilityState,
   type DeepKeys,
   type DeepValue,
   type ExpandedState,
@@ -48,15 +49,18 @@ import {
   type HeaderGroup,
   type OnChangeFn,
   type PaginationState,
+  type ReactTable,
   type Row,
+  type RowData,
   type RowSelectionState,
-  type SortingFn,
+  type SortFn,
   type SortingState,
-  type Table,
+  type TableFeature,
+  type TableFeatures,
   type TableOptions,
   type TableState,
+  type TableState_ColumnResizing,
   type Updater,
-  type VisibilityState,
 } from '@tanstack/react-table';
 import {
   type VirtualItem,
@@ -73,9 +77,11 @@ import {
 import { type MRT_AggregationFns } from './fns/aggregationFns';
 import { type MRT_FilterFns } from './fns/filterFns';
 import { type MRT_SortingFns } from './fns/sortingFns';
+import { type MRT_TableFeatures } from './fns/tableFeatures';
 import { type MRT_Icons } from './icons';
 
 export type { MRT_Icons };
+
 export type DropdownOption =
   | string
   | {
@@ -87,61 +93,60 @@ export type LiteralUnion<T extends U, U = string> =
   | (Record<never, never> & U)
   | T;
 
+/**
+ * v9 replaced the callable `AggregationFn` with `AggregationFnDef`, an object
+ * with an `aggregate` method that takes a single context argument.
+ */
 export type MRT_AggregationFn<TData extends MRT_RowData> =
-  | AggregationFn<TData>
+  | AggregationFnDef<any, TData, any, any>
   | MRT_AggregationOption;
 
-export type MRT_AggregationOption = keyof typeof MRT_AggregationFns & string;
+export type MRT_AggregationOption =
+  | (keyof typeof MRT_AggregationFns & string)
+  | (string & {});
 
-export type MRT_Cell<TData extends MRT_RowData, TValue = unknown> = Omit<
-  Cell<TData, TValue>,
-  'column' | 'row'
-> & {
-  column: MRT_Column<TData, TValue>;
-  row: MRT_Row<TData>;
-};
+export type MRT_Cell<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = Cell<MRT_TableFeatures, TData, TValue>;
 
-export type MRT_Column<TData extends MRT_RowData, TValue = unknown> = Omit<
-  Column<TData, TValue>,
-  'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'
-> & {
-  columnDef: MRT_DefinedColumnDef<TData, TValue>;
-  columns?: MRT_Column<TData, TValue>[];
-  filterFn?: MRT_FilterFn<TData>;
-  footer: string;
-  header: string;
-};
+export type MRT_Column<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = Column<MRT_TableFeatures, TData, TValue>;
 
-export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
-  extends Omit<
-    ColumnDef<TData, TValue>,
-    | 'accessorKey'
-    | 'aggregatedCell'
-    | 'aggregationFn'
-    | 'cell'
-    | 'columns'
-    | 'filterFn'
-    | 'footer'
-    | 'header'
-    | 'id'
-    | 'sortingFn'
+declare module '@tanstack/table-core' {
+  interface ColumnDef_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+    TValue extends CellData,
   > {
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify a function here to point to the correct property in the data object.
-   *
-   * @example accessorFn: (row) => row.username
-   */
-  accessorFn?: (originalRow: TData) => TValue;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify which key in the row this column should use to access the correct data.
-   * Also supports Deep Key Dot Notation.
-   *
-   * @example accessorKey: 'username' //simple
-   * @example accessorKey: 'name.firstName' //deep key dot notation
-   */
-  accessorKey?: DeepKeys<TData> | (string & {});
+    mrtFeature: MRT_ColumnDefExtras<TData, TValue>;
+  }
+  interface Plugins {
+    mrtFeature: TableFeature;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFeature: MRT_TableOptionExtras<TData>;
+  }
+  interface TableState_FeatureMap {
+    mrtFeature: MRT_StateExtras;
+  }
+}
+
+export type MRT_ColumnDef<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = ColumnDef<MRT_TableFeatures, TData, TValue>;
+
+export interface MRT_ColumnDefExtras<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> {
+  _filterFn?: MRT_FilterOption;
   AggregatedCell?: (props: {
     cell: MRT_Cell<TData, TValue>;
     column: MRT_Column<TData, TValue>;
@@ -150,7 +155,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
   Cell?: (props: {
     cell: MRT_Cell<TData, TValue>;
     column: MRT_Column<TData, TValue>;
@@ -173,7 +177,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
   columnFilterModeOptions?: Array<
     LiteralUnion<MRT_FilterOption & string>
   > | null;
-  columns?: MRT_ColumnDef<TData, TValue>[];
   Edit?: (props: {
     cell: MRT_Cell<TData, TValue>;
     column: MRT_Column<TData, TValue>;
@@ -205,7 +208,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     rangeFilterIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: DropdownOption[];
   filterVariant?:
     | 'autocomplete'
@@ -221,9 +223,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     | 'text'
     | 'time'
     | 'time-range';
-  /**
-   * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
-   */
   footer?: string;
   Footer?:
     | ((props: {
@@ -244,9 +243,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
    * If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
    */
   grow?: boolean | number;
-  /**
-   * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
-   */
   header: string;
   Header?:
     | ((props: {
@@ -255,16 +251,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
         table: MRT_TableInstance<TData>;
       }) => ReactNode)
     | ReactNode;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   *
-   * If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
-   *
-   * `id` defaults to the `accessorKey` or `header` if not specified.
-   *
-   * @default gets set to the same value as `accessorKey` by default
-   */
-  id?: LiteralUnion<keyof TData & string>;
   muiColumnActionsButtonProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -387,12 +373,13 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
-  sortingFn?: MRT_SortingFn<TData>;
   visibleInShowHideMenu?: boolean;
 }
 
 export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
+
 export type MRT_ColumnFiltersState = ColumnFiltersState;
+
 export type MRT_ColumnHelper<TData extends MRT_RowData> = {
   accessor: <
     TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
@@ -408,9 +395,11 @@ export type MRT_ColumnHelper<TData extends MRT_RowData> = {
   display: (column: MRT_DisplayColumnDef<TData>) => MRT_ColumnDef<TData>;
   group: (column: MRT_GroupColumnDef<TData>) => MRT_ColumnDef<TData>;
 };
+
 export type MRT_ColumnOrderState = ColumnOrderState;
 export type MRT_ColumnPinningState = ColumnPinningState;
-export type MRT_ColumnSizingInfoState = ColumnSizingInfoState;
+export type MRT_ColumnSizingInfoState =
+  TableState_ColumnResizing['columnResizing'];
 export type MRT_ColumnSizingState = ColumnSizingState;
 export type MRT_ColumnVirtualizer<
   TScrollElement extends Element | Window = HTMLDivElement,
@@ -449,13 +438,10 @@ export type MRT_DisplayColumnIds =
   | 'mrt-row-pin'
   | 'mrt-row-select'
   | 'mrt-row-spacer';
-
 export type MRT_ExpandedState = ExpandedState;
-
 export type MRT_FilterFn<TData extends MRT_RowData> =
-  | FilterFn<TData>
+  | FilterFn<MRT_TableFeatures, TData>
   | MRT_FilterOption;
-
 export type MRT_FilterOption = LiteralUnion<
   keyof typeof MRT_FilterFns & string
 >;
@@ -468,14 +454,14 @@ export type MRT_GroupColumnDef<TData extends MRT_RowData> =
 export type MRT_GroupingState = GroupingState;
 
 export type MRT_Header<TData extends MRT_RowData> = Omit<
-  Header<TData, unknown>,
+  Header<MRT_TableFeatures, TData, unknown>,
   'column'
 > & {
   column: MRT_Column<TData>;
 };
 
 export type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<
-  HeaderGroup<TData>,
+  HeaderGroup<MRT_TableFeatures, TData>,
   'headers'
 > & {
   headers: MRT_Header<TData>[];
@@ -586,24 +572,7 @@ export interface MRT_Localization {
 
 export type MRT_PaginationState = PaginationState;
 
-export type MRT_Row<TData extends MRT_RowData> = Omit<
-  Row<TData>,
-  | '_valuesCache'
-  | 'getAllCells'
-  | 'getParentRow'
-  | 'getParentRows'
-  | 'getRow'
-  | 'getVisibleCells'
-  | 'subRows'
-> & {
-  _valuesCache: Record<LiteralUnion<DeepKeys<TData> & string>, any>;
-  getAllCells: () => MRT_Cell<TData>[];
-  getParentRow: () => MRT_Row<TData> | null;
-  getParentRows: () => MRT_Row<TData>[];
-  getRow: () => MRT_Row<TData>;
-  getVisibleCells: () => MRT_Cell<TData>[];
-  subRows?: MRT_Row<TData>[];
-};
+export type MRT_Row<TData extends MRT_RowData> = Row<MRT_TableFeatures, TData>;
 
 export type MRT_RowData = Record<string, any>;
 
@@ -624,7 +593,7 @@ export type MRT_RowVirtualizer<
 
 export type MRT_SortingFn<TData extends MRT_RowData> =
   | MRT_SortingOption
-  | SortingFn<TData>;
+  | SortFn<MRT_TableFeatures, TData>;
 
 export type MRT_SortingOption = LiteralUnion<
   keyof typeof MRT_SortingFns & string
@@ -632,41 +601,43 @@ export type MRT_SortingOption = LiteralUnion<
 
 export type MRT_SortingState = SortingState;
 
+export type MRT_StatefulState<TData extends MRT_RowData> = Partial<Pick<MRT_TableState<TData>, 'isLoading' | 'showSkeletons'>> &
+  Pick<
+  MRT_TableState<TData>,
+  | 'columnFilterFns'
+  | 'columnOrder'
+  | 'columnResizing'
+  | 'creatingRow'
+  | 'density'
+  | 'draggingColumn'
+  | 'draggingRow'
+  | 'editingCell'
+  | 'editingRow'
+  | 'globalFilterFn'
+  | 'grouping'
+  | 'hoveredColumn'
+  | 'hoveredRow'
+  | 'isFullScreen'
+  | 'pagination'
+  | 'showAlertBanner'
+  | 'showColumnFilters'
+  | 'showGlobalFilter'
+  | 'showToolbarDropZone'
+>;
+
 export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
   MRT_DefinedTableOptions<TData> & {
-    state: Pick<
-      MRT_TableState<TData>,
-      | 'columnFilterFns'
-      | 'columnOrder'
-      | 'columnSizingInfo'
-      | 'creatingRow'
-      | 'density'
-      | 'draggingColumn'
-      | 'draggingRow'
-      | 'editingCell'
-      | 'editingRow'
-      | 'globalFilterFn'
-      | 'grouping'
-      | 'hoveredColumn'
-      | 'hoveredRow'
-      | 'isFullScreen'
-      | 'pagination'
-      | 'showAlertBanner'
-      | 'showColumnFilters'
-      | 'showGlobalFilter'
-      | 'showToolbarDropZone'
-    >;
+    state: MRT_StatefulState<TData>;
   };
 
 export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
-  Table<TData>,
+  ReactTable<MRT_TableFeatures, TData>,
   | 'getAllColumns'
   | 'getAllFlatColumns'
   | 'getAllLeafColumns'
   | 'getBottomRows'
   | 'getCenterLeafColumns'
   | 'getCenterRows'
-  | 'getColumn'
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
   | 'getFooterGroups'
@@ -675,11 +646,10 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPreFilteredRowModel'
-  | 'getPrePaginationRowModel'
+  | 'getPrePaginatedRowModel'
   | 'getRightLeafColumns'
   | 'getRowModel'
   | 'getSelectedRowModel'
-  | 'getState'
   | 'getTopRows'
   | 'options'
 > & {
@@ -689,7 +659,6 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getBottomRows: () => MRT_Row<TData>[];
   getCenterLeafColumns: () => MRT_Column<TData>[];
   getCenterRows: () => MRT_Row<TData>[];
-  getColumn: (columnId: string) => MRT_Column<TData>;
   getExpandedRowModel: () => MRT_RowModel<TData>;
   getFlatHeaders: () => MRT_Header<TData>[];
   getFooterGroups: () => MRT_HeaderGroup<TData>[];
@@ -698,11 +667,10 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getLeftLeafColumns: () => MRT_Column<TData>[];
   getPaginationRowModel: () => MRT_RowModel<TData>;
   getPreFilteredRowModel: () => MRT_RowModel<TData>;
-  getPrePaginationRowModel: () => MRT_RowModel<TData>;
+  getPrePaginatedRowModel: () => MRT_RowModel<TData>;
   getRightLeafColumns: () => MRT_Column<TData>[];
   getRowModel: () => MRT_RowModel<TData>;
   getSelectedRowModel: () => MRT_RowModel<TData>;
-  getState: () => MRT_TableState<TData>;
   getTopRows: () => MRT_Row<TData>[];
   options: MRT_StatefulTableOptions<TData>;
   refs: {
@@ -748,7 +716,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
  */
 export interface MRT_TableOptions<TData extends MRT_RowData>
   extends Omit<
-    Partial<TableOptions<TData>>,
+    Partial<Omit<TableOptions<MRT_TableFeatures, TData>, 'features'>>,
     | 'columns'
     | 'data'
     | 'defaultColumn'
@@ -756,10 +724,18 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     | 'expandRowsFn'
     | 'getRowId'
     | 'globalFilterFn'
+    | 'icons'
     | 'initialState'
+    | 'localization'
+    | 'mrtTheme'
     | 'onStateChange'
     | 'state'
   > {
+  /**
+   * Custom aggregation functions, registered by name so column defs can select
+   * them with `aggregationFn: 'myFn'`.
+   */
+  aggregationFns?: Record<string, AggregationFnDef<any, TData, any, any>>;
   columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
   columnFilterModeOptions?: Array<
     LiteralUnion<MRT_FilterOption & string>
@@ -774,7 +750,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
    * See all Columns Options on the official docs site:
    * @link https://www.material-react-table.com/docs/api/column-options
    */
-  columns: MRT_ColumnDef<TData, any>[];
+  columns: ReadonlyArray<MRT_ColumnDef<TData, any>>;
   columnVirtualizerInstanceRef?: RefObject<MRT_ColumnVirtualizer | null>;
   columnVirtualizerOptions?:
     | ((props: {
@@ -788,7 +764,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
    * See the usage guide for more info on creating columns and data:
    * @link https://www.material-react-table.com/docs/getting-started/usage
    */
-  data: TData[];
+  data: readonly TData[];
   /**
    * Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` table option to change a default option for all columns.
    */
@@ -837,10 +813,15 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   enableToolbarInternalActions?: boolean;
   enableTopToolbar?: boolean;
   expandRowsFn?: (dataRow: TData) => TData[];
+  /**
+   * Custom filter functions, registered by name so column defs can select them
+   * with `filterFn: 'myFn'` and `globalFilterFn` can name one.
+   */
+  filterFns?: Record<string, FilterFn<any, TData>>;
   getRowId?: (
     originalRow: TData,
     index: number,
-    parentRow: MRT_Row<TData>,
+    parentRow?: MRT_Row<TData>,
   ) => string;
   globalFilterFn?: MRT_FilterOption;
   globalFilterModeOptions?: MRT_FilterOption[] | null;
@@ -1232,13 +1213,28 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
       }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>)
     | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
   selectAllMode?: 'all' | 'page';
+  /**
+   * Custom sort functions, registered by name so column defs can select them
+   * with `sortFn: 'myFn'`.
+   */
+  sortFns?: Record<string, SortFn<any, TData>>;
   /**
    * Manage state externally any way you want, then pass it back into MRT.
    */
   state?: Partial<MRT_TableState<TData>>;
 }
 
-export interface MRT_TableState<TData extends MRT_RowData> extends TableState {
+export type MRT_TableState<TData extends MRT_RowData> = Omit<
+  TableState<MRT_TableFeatures>,
+  | 'actionCell'
+  | 'creatingRow'
+  | 'draggingColumn'
+  | 'draggingRow'
+  | 'editingCell'
+  | 'editingRow'
+  | 'hoveredColumn'
+  | 'hoveredRow'
+> & {
   actionCell?: MRT_Cell<TData> | null;
   columnFilterFns: MRT_ColumnFilterFnsState;
   creatingRow: MRT_Row<TData> | null;
@@ -1281,10 +1277,42 @@ export type MRT_VirtualizerOptions<
   TItemElement extends Element = Element,
 > = VirtualizerOptions<TScrollElement, TItemElement>;
 
-export type MRT_VisibilityState = VisibilityState;
+export type MRT_VisibilityState = ColumnVisibilityState;
 
 export type Prettify<T> = unknown & { [K in keyof T]: T[K] };
 
 export type Xor<A, B> =
   | Prettify<A & { [k in keyof B]?: never }>
   | Prettify<B & { [k in keyof A]?: never }>;
+
+interface MRT_StateExtras {
+  actionCell?: Cell<MRT_TableFeatures, any> | null;
+  columnFilterFns: MRT_ColumnFilterFnsState;
+  creatingRow: null | Row<MRT_TableFeatures, any>;
+  density: MRT_DensityState;
+  draggingColumn: Column<MRT_TableFeatures, any> | null;
+  draggingRow: null | Row<MRT_TableFeatures, any>;
+  editingCell: Cell<MRT_TableFeatures, any> | null;
+  editingRow: null | Row<MRT_TableFeatures, any>;
+  globalFilterFn: MRT_FilterOption;
+  hoveredColumn: null | Partial<Column<MRT_TableFeatures, any>>;
+  hoveredRow: null | Partial<Row<MRT_TableFeatures, any>>;
+  isFullScreen: boolean;
+  isLoading: boolean;
+  isSaving: boolean;
+  showAlertBanner: boolean;
+  showColumnFilters: boolean;
+  showGlobalFilter: boolean;
+  showLoadingOverlay: boolean;
+  showProgressBars: boolean;
+  showSkeletons: boolean;
+  showToolbarDropZone: boolean;
+}
+
+interface MRT_TableOptionExtras<TData extends MRT_RowData> {
+  globalFilterFn?: MRT_FilterOption;
+  icons: MRT_Icons;
+  localization: MRT_Localization;
+  mrtTheme: Required<MRT_Theme>;
+  state: MRT_StatefulState<TData>;
+}

package/src/utils/column.utils.ts

@@ -1,4 +1,3 @@
-import { type Row } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 import {
@@ -14,19 +13,29 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
+export const getSubColumnDefs = <TData extends MRT_RowData>(
+  columnDef: MRT_ColumnDef<TData>,
+): ReadonlyArray<MRT_ColumnDef<TData>> | undefined =>
+  'columns' in columnDef ? columnDef.columns : undefined;
+
 export const getColumnId = <TData extends MRT_RowData>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
-  columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
+  columnDef.id ??
+  ('accessorKey' in columnDef
+    ? columnDef.accessorKey?.toString?.()
+    : undefined) ??
+  columnDef.header;
 
 export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
-  columns: MRT_ColumnDef<TData>[],
+  columns: ReadonlyArray<MRT_ColumnDef<TData>>,
 ): MRT_ColumnDef<TData>[] => {
   const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
-  const getLeafColumns = (cols: MRT_ColumnDef<TData>[]) => {
+  const getLeafColumns = (cols: ReadonlyArray<MRT_ColumnDef<TData>>) => {
     cols.forEach((col) => {
-      if (col.columns) {
-        getLeafColumns(col.columns);
+      const subColumnDefs = getSubColumnDefs(col);
+      if (subColumnDefs) {
+        getLeafColumns(subColumnDefs);
       } else {
         allLeafColumnDefs.push(col);
       }
@@ -47,7 +56,7 @@ export const prepareColumns = <TData extends MRT_RowData>({
     aggregationFns = {},
     defaultDisplayColumn,
     filterFns = {},
-    sortingFns = {},
+    sortFns = {},
     state: { columnFilterFns = {} } = {},
   } = tableOptions;
   return columnDefs.map((columnDef) => {
@@ -55,25 +64,22 @@ export const prepareColumns = <TData extends MRT_RowData>({
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     //assign columnDefType
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
-    if (columnDef.columns?.length) {
+    const subColumnDefs = getSubColumnDefs(columnDef);
+    if (subColumnDefs?.length && 'columns' in columnDef) {
       columnDef.columnDefType = 'group';
       //recursively prepare columns if this is a group column
       columnDef.columns = prepareColumns({
-        columnDefs: columnDef.columns,
+        columnDefs: [...subColumnDefs],
         tableOptions,
       });
     } else if (columnDef.columnDefType === 'data') {
       //assign aggregationFns if multiple aggregationFns are provided
       if (Array.isArray(columnDef.aggregationFn)) {
         const aggFns = columnDef.aggregationFn as string[];
-        columnDef.aggregationFn = (
-          columnId: string,
-          leafRows: Row<TData>[],
-          childRows: Row<TData>[],
-        ) =>
-          aggFns.map((fn) =>
-            aggregationFns[fn]?.(columnId, leafRows, childRows),
-          );
+        columnDef.aggregationFn = {
+          aggregate: (context) =>
+            aggFns.map((fn) => aggregationFns[fn]?.aggregate(context)),
+        };
       }
 
       //assign filterFns
@@ -84,10 +90,9 @@ export const prepareColumns = <TData extends MRT_RowData>({
           columnFilterFns[columnDef.id];
       }
 
-      //assign sortingFns
-      if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
-        // @ts-expect-error
-        columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+      //assign sortFns
+      if (Object.keys(sortFns).includes(columnDef.sortFn as string)) {
+        columnDef.sortFn = sortFns[columnDef.sortFn as string];
       }
     } else if (columnDef.columnDefType === 'display') {
       columnDef = {
@@ -117,7 +122,7 @@ export const reorderColumn = <TData extends MRT_RowData>(
 };
 
 export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
-  columnDef: MRT_ColumnDef<TData>,
+  columnDef: Pick<MRT_ColumnDef<TData>, 'filterVariant'>,
 ): MRT_FilterOption => {
   const { filterVariant } = columnDef;
   if (filterVariant === 'multi-select') return 'arrIncludesSome';
@@ -145,17 +150,19 @@ export const getColumnFilterInfo = <TData extends MRT_RowData>({
     filterVariant?.startsWith('date') || filterVariant?.startsWith('time')
   );
   const isAutocompleteFilter = filterVariant === 'autocomplete';
+  const currentFilterOption =
+    columnDef._filterFn ?? getDefaultColumnFilterFn(columnDef);
+
   const isRangeFilter =
     filterVariant?.includes('range') ||
     ['between', 'betweenInclusive', 'inNumberRange'].includes(
-      columnDef._filterFn,
+      currentFilterOption,
     );
   const isSelectFilter = filterVariant === 'select';
   const isMultiSelectFilter = filterVariant === 'multi-select';
   const isTextboxFilter =
     ['autocomplete', 'text'].includes(filterVariant!) ||
     (!isSelectFilter && !isMultiSelectFilter);
-  const currentFilterOption = columnDef._filterFn;
 
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;