material-react-table 0.32.0 → 0.33.0

package/dist/{cjs/toolbar/MRT_ToolbarBottom.d.ts → esm/toolbar/MRT_BottomToolbar.d.ts}

@@ -3,5 +3,5 @@ import { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_ToolbarBottom: FC<Props>;
+export declare const MRT_BottomToolbar: FC<Props>;
 export {};

package/dist/{cjs/toolbar/MRT_ToolbarTop.d.ts → esm/toolbar/MRT_TopToolbar.d.ts}

@@ -17,5 +17,5 @@ export declare const commonToolbarStyles: ({ theme }: {
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_ToolbarTop: FC<Props>;
+export declare const MRT_TopToolbar: FC<Props>;
 export {};

package/dist/index.d.ts

@@ -1,92 +1,10 @@
 import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent, FC } from 'react';
-import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps, ToolbarProps } from '@mui/material';
-import { Row, Table, TableState, ColumnDef, CoreColumnDefAccessorKey, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
+import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
+import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { VirtualizerOptions } from '@tanstack/react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
-interface MRT_Localization {
-    actions: string;
-    and: string;
-    cancel: string;
-    changeFilterMode: string;
-    changeSearchMode: string;
-    clearFilter: string;
-    clearSearch: string;
-    clearSort: string;
-    clickToCopy: string;
-    columnActions: string;
-    copiedToClipboard: string;
-    dropToGroupBy: string;
-    edit: string;
-    expand: string;
-    expandAll: string;
-    filterArrIncludes: string;
-    filterArrIncludesAll: string;
-    filterArrIncludesSome: string;
-    filterBetween: string;
-    filterBetweenInclusive: string;
-    filterByColumn: string;
-    filterContains: string;
-    filterEmpty: string;
-    filterEndsWith: string;
-    filterEquals: string;
-    filterEqualsString: string;
-    filterFuzzy: string;
-    filterGreaterThan: string;
-    filterGreaterThanOrEqualTo: string;
-    filterInNumberRange: string;
-    filterIncludesString: string;
-    filterIncludesStringSensitive: string;
-    filterLessThan: string;
-    filterLessThanOrEqualTo: string;
-    filterMode: string;
-    filterNotEmpty: string;
-    filterNotEquals: string;
-    filterStartsWith: string;
-    filterWeakEquals: string;
-    filteringByColumn: string;
-    grab: string;
-    groupByColumn: string;
-    groupedBy: string;
-    hideAll: string;
-    hideColumn: string;
-    max: string;
-    min: string;
-    move: string;
-    or: string;
-    pinToLeft: string;
-    pinToRight: string;
-    resetColumnSize: string;
-    resetOrder: string;
-    rowActions: string;
-    rowNumber: string;
-    rowNumbers: string;
-    save: string;
-    search: string;
-    select: string;
-    selectedCountOfRowCountRowsSelected: string;
-    showAll: string;
-    showAllColumns: string;
-    showHideColumns: string;
-    showHideFilters: string;
-    showHideSearch: string;
-    sortByColumnAsc: string;
-    sortByColumnDesc: string;
-    sortedByColumnAsc: string;
-    sortedByColumnDesc: string;
-    thenBy: string;
-    toggleDensity: string;
-    toggleFullScreen: string;
-    toggleSelectAll: string;
-    toggleSelectRow: string;
-    toggleVisibility: string;
-    ungroupByColumn: string;
-    unpin: string;
-    unpinAll: string;
-    unsorted: string;
-}
-
 interface MRT_Icons {
     ArrowRightIcon: any;
     CancelIcon: any;
@@ -187,6 +105,88 @@ declare const MRT_FilterFns: {
     inNumberRange: _tanstack_table_core.FilterFn<any>;
 };
 
+interface MRT_Localization {
+    actions: string;
+    and: string;
+    cancel: string;
+    changeFilterMode: string;
+    changeSearchMode: string;
+    clearFilter: string;
+    clearSearch: string;
+    clearSort: string;
+    clickToCopy: string;
+    columnActions: string;
+    copiedToClipboard: string;
+    dropToGroupBy: string;
+    edit: string;
+    expand: string;
+    expandAll: string;
+    filterArrIncludes: string;
+    filterArrIncludesAll: string;
+    filterArrIncludesSome: string;
+    filterBetween: string;
+    filterBetweenInclusive: string;
+    filterByColumn: string;
+    filterContains: string;
+    filterEmpty: string;
+    filterEndsWith: string;
+    filterEquals: string;
+    filterEqualsString: string;
+    filterFuzzy: string;
+    filterGreaterThan: string;
+    filterGreaterThanOrEqualTo: string;
+    filterInNumberRange: string;
+    filterIncludesString: string;
+    filterIncludesStringSensitive: string;
+    filterLessThan: string;
+    filterLessThanOrEqualTo: string;
+    filterMode: string;
+    filterNotEmpty: string;
+    filterNotEquals: string;
+    filterStartsWith: string;
+    filterWeakEquals: string;
+    filteringByColumn: string;
+    grab: string;
+    groupByColumn: string;
+    groupedBy: string;
+    hideAll: string;
+    hideColumn: string;
+    max: string;
+    min: string;
+    move: string;
+    or: string;
+    pinToLeft: string;
+    pinToRight: string;
+    resetColumnSize: string;
+    resetOrder: string;
+    rowActions: string;
+    rowNumber: string;
+    rowNumbers: string;
+    save: string;
+    search: string;
+    select: string;
+    selectedCountOfRowCountRowsSelected: string;
+    showAll: string;
+    showAllColumns: string;
+    showHideColumns: string;
+    showHideFilters: string;
+    showHideSearch: string;
+    sortByColumnAsc: string;
+    sortByColumnDesc: string;
+    sortedByColumnAsc: string;
+    sortedByColumnDesc: string;
+    thenBy: string;
+    toggleDensity: string;
+    toggleFullScreen: string;
+    toggleSelectAll: string;
+    toggleSelectRow: string;
+    toggleVisibility: string;
+    ungroupByColumn: string;
+    unpin: string;
+    unpinAll: string;
+    unsorted: string;
+}
+
 declare const MRT_SortingFns: {
     fuzzy: <TData extends Record<string, any> = {}>(rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
     alphanumeric: _tanstack_table_core.SortingFn<any>;
@@ -230,10 +230,10 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
     setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
-    setCurrentFilterFns: Dispatch<SetStateAction<{
+    setColumnFilterFns: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterOption;
     }>>;
-    setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
+    setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
     setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
         id: string;
     } | null>>;
@@ -251,8 +251,8 @@ declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState
     currentDraggingRow: MRT_Row<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
-    currentFilterFns: Record<string, MRT_FilterOption>;
-    currentGlobalFilterFn: Record<string, MRT_FilterOption>;
+    columnFilterFns: Record<string, MRT_FilterOption>;
+    globalFilterFn: Record<string, MRT_FilterOption>;
     currentHoveredColumn: MRT_Column<TData> | {
         id: string;
     } | null;
@@ -314,7 +314,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
      * @example accessorKey: 'username' //simple
      * @example accessorKey: 'name.firstName' //deep key dot notation
      */
-    accessorKey?: CoreColumnDefAccessorKey<TData, unknown>['accessorKey'];
+    accessorKey?: DeepKeys<TData>;
     /**
      * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
      * Leave this blank if you are just creating a normal data column.
@@ -437,12 +437,12 @@ declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-ro
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
  * See more info on creating columns and data on the official docs site:
- * @link https://www.material-react-table.com/docs/usage
+ * @link https://www.material-react-table.com/docs/getting-started/usage
  *
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'> & {
+declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -450,6 +450,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
+    enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
@@ -471,9 +472,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
     enableTableHead?: boolean;
-    enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
-    enableToolbarTop?: boolean;
+    enableTopToolbar?: boolean;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
@@ -527,6 +527,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => TableRowProps);
+    muiTableBottomToolbarProps?: ToolbarProps | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => ToolbarProps);
     muiTableContainerProps?: TableContainerProps | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => TableContainerProps);
@@ -581,10 +584,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     muiTableToolbarAlertBannerProps?: AlertProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => AlertProps);
-    muiTableToolbarBottomProps?: ToolbarProps | (({ table }: {
-        table: MRT_TableInstance<TData>;
-    }) => ToolbarProps);
-    muiTableToolbarTopProps?: ToolbarProps | (({ table }: {
+    muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
     onCellEditBlur?: ({ cell, event, table, }: {
@@ -630,13 +630,15 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
-    onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbarCustomActions?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderDetailPanel?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -650,9 +652,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarBottomCustomActions?: ({ table, }: {
-        table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         table: MRT_TableInstance<TData>;
         MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
@@ -671,7 +670,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
             table: MRT_TableInstance<TData>;
         }>;
     }) => ReactNode;
-    renderToolbarTopCustomActions?: ({ table, }: {
+    renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     rowCount?: number;
@@ -681,6 +680,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_Header, MRT_HeaderGroup, MRT_Row, MRT_RowModel, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, _default as default };
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.32.0",
+  "version": "0.33.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -49,29 +49,29 @@
     "storybook": "start-storybook -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.2",
+    "@mui/material": "^5.9.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
+    "@size-limit/preset-small-lib": "^8.0.0",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-storysource": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
@@ -82,7 +82,7 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "size-limit": "^7.0.8",
+    "size-limit": "^8.0.0",
     "storybook-dark-mode": "^1.1.0",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.2",
-    "@tanstack/react-virtual": "^3.0.0-beta.14"
+    "@tanstack/react-table": "8.5.10",
+    "@tanstack/react-virtual": "^3.0.0-beta.17"
   }
 }

package/src/MaterialReactTable.tsx

@@ -30,7 +30,7 @@ import type {
   Cell,
   Column,
   ColumnDef,
-  CoreColumnDefAccessorKey,
+  DeepKeys,
   FilterFn,
   Header,
   HeaderGroup,
@@ -42,11 +42,12 @@ import type {
   TableState,
 } from '@tanstack/react-table';
 import type { VirtualizerOptions } from '@tanstack/react-virtual';
-import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
+import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
-import { MRT_TableRoot } from './table/MRT_TableRoot';
-import { MRT_FilterFns } from './filtersFns';
+import { MRT_FilterFns } from './filterFns';
+import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_SortingFns } from './sortingFns';
+import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
@@ -99,12 +100,12 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
-  setCurrentFilterFns: Dispatch<
+  setColumnFilterFns: Dispatch<
     SetStateAction<{
       [key: string]: MRT_FilterOption;
     }>
   >;
-  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
+  setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
   setCurrentHoveredColumn: Dispatch<
     SetStateAction<MRT_Column<TData> | { id: string } | null>
   >;
@@ -124,8 +125,8 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     currentDraggingRow: MRT_Row<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
-    currentFilterFns: Record<string, MRT_FilterOption>;
-    currentGlobalFilterFn: Record<string, MRT_FilterOption>;
+    columnFilterFns: Record<string, MRT_FilterOption>;
+    globalFilterFn: Record<string, MRT_FilterOption>;
     currentHoveredColumn: MRT_Column<TData> | { id: string } | null;
     currentHoveredRow: MRT_Row<TData> | { id: string } | null;
     density: 'comfortable' | 'compact' | 'spacious';
@@ -222,7 +223,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    * @example accessorKey: 'username' //simple
    * @example accessorKey: 'name.firstName' //deep key dot notation
    */
-  accessorKey?: CoreColumnDefAccessorKey<TData, unknown>['accessorKey'];
+  accessorKey?: DeepKeys<TData>;
   /**
    * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
    * Leave this blank if you are just creating a normal data column.
@@ -434,7 +435,7 @@ export type MRT_DisplayColumnIds =
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
  * See more info on creating columns and data on the official docs site:
- * @link https://www.material-react-table.com/docs/usage
+ * @link https://www.material-react-table.com/docs/getting-started/usage
  *
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
@@ -442,7 +443,12 @@ export type MRT_DisplayColumnIds =
 export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
   Omit<
     Partial<TableOptions<TData>>,
-    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
+    | 'columns'
+    | 'data'
+    | 'expandRowsFn'
+    | 'initialState'
+    | 'onStateChange'
+    | 'state'
   > & {
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
@@ -451,6 +457,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
+    enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
@@ -472,9 +479,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
     enableTableHead?: boolean;
-    enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
-    enableToolbarTop?: boolean;
+    enableTopToolbar?: boolean;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
@@ -572,6 +578,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           row: MRT_Row<TData>;
         }) => TableRowProps);
+    muiTableBottomToolbarProps?:
+      | ToolbarProps
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     muiTableContainerProps?:
       | TableContainerProps
       | (({
@@ -675,10 +684,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableToolbarAlertBannerProps?:
       | AlertProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => AlertProps);
-    muiTableToolbarBottomProps?:
-      | ToolbarProps
-      | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    muiTableToolbarTopProps?:
+    muiTableTopToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     onCellEditBlur?: ({
@@ -737,13 +743,17 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
-    onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbarCustomActions?: ({
+      table,
+    }: {
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderDetailPanel?: ({
       row,
       table,
@@ -767,11 +777,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarBottomCustomActions?: ({
-      table,
-    }: {
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderToolbarInternalActions?: ({
       table,
       MRT_ToggleGlobalFilterButton,
@@ -797,7 +802,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
         IconButtonProps & { table: MRT_TableInstance<TData> }
       >;
     }) => ReactNode;
-    renderToolbarTopCustomActions?: ({
+    renderTopToolbarCustomActions?: ({
       table,
     }: {
       table: MRT_TableInstance<TData>;
@@ -813,10 +818,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
   };
 
 export default <TData extends Record<string, any> = {}>({
+  aggregationFns,
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
+  enableBottomToolbar = true,
   enableColumnActions = true,
   enableColumnFilterChangeMode = false,
   enableColumnFilters = true,
@@ -841,9 +848,9 @@ export default <TData extends Record<string, any> = {}>({
   enableStickyHeader = false,
   enableTableFooter = true,
   enableTableHead = true,
-  enableToolbarBottom = true,
   enableToolbarInternalActions = true,
-  enableToolbarTop = true,
+  enableTopToolbar = true,
+  filterFns,
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -854,13 +861,16 @@ export default <TData extends Record<string, any> = {}>({
   positionToolbarDropZone = 'top',
   rowNumberMode = 'original',
   selectAllMode = 'all',
+  sortingFns,
   ...rest
 }: MaterialReactTableProps<TData>) => (
   <MRT_TableRoot
+    aggregationFns={{ ...MRT_AggregationFns, ...aggregationFns }}
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
     defaultColumn={defaultColumn}
     editingMode={editingMode}
+    enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}
     enableColumnFilterChangeMode={enableColumnFilterChangeMode}
     enableColumnFilters={enableColumnFilters}
@@ -885,9 +895,9 @@ export default <TData extends Record<string, any> = {}>({
     enableStickyHeader={enableStickyHeader}
     enableTableFooter={enableTableFooter}
     enableTableHead={enableTableHead}
-    enableToolbarBottom={enableToolbarBottom}
     enableToolbarInternalActions={enableToolbarInternalActions}
-    enableToolbarTop={enableToolbarTop}
+    enableTopToolbar={enableTopToolbar}
+    filterFns={{ ...MRT_FilterFns, ...filterFns }}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
@@ -898,6 +908,7 @@ export default <TData extends Record<string, any> = {}>({
     positionToolbarDropZone={positionToolbarDropZone}
     rowNumberMode={rowNumberMode}
     selectAllMode={selectAllMode}
+    sortingFns={{ ...MRT_SortingFns, ...sortingFns }}
     {...rest}
   />
 );

package/src/aggregationFns.ts

@@ -0,0 +1,3 @@
+import { aggregationFns } from '@tanstack/react-table';
+
+export const MRT_AggregationFns = { ...aggregationFns };

package/src/body/MRT_TableBody.tsx

@@ -44,7 +44,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
         rankGlobalFuzzy(a, b),
       );
       if (enablePagination) {
-        return rankedRows.slice(0, pagination.pageSize);
+        return rankedRows.slice(pagination.pageIndex, pagination.pageSize);
       }
       return rankedRows;
     }