material-react-table 0.32.0 → 0.33.0

package/src/column.utils.ts

@@ -7,7 +7,7 @@ import {
   MRT_DisplayColumnIds,
   MRT_FilterOption,
 } from '.';
-import { MRT_FilterFns } from './filtersFns';
+import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 
 export const defaultDisplayColumnDefOptions = {
@@ -50,7 +50,10 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
 
 export const prepareColumns = <TData extends Record<string, any> = {}>(
   columnDefs: MRT_ColumnDef<TData>[],
-  currentFilterFns: { [key: string]: MRT_FilterOption },
+  columnFilterFns: { [key: string]: MRT_FilterOption },
+  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'],
+  sortingFns: typeof MRT_SortingFns &
+    MaterialReactTableProps<TData>['sortingFns'],
 ): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
@@ -62,18 +65,23 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
     if (!!columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
-      columnDef.columns = prepareColumns(columnDef.columns, currentFilterFns);
+      columnDef.columns = prepareColumns(
+        columnDef.columns,
+        columnFilterFns,
+        filterFns,
+        sortingFns,
+      );
     } else if (columnDef.columnDefType === 'data') {
-      if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
+      if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
           // @ts-ignore
-          MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
+          filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
         //@ts-ignore
-        columnDef._filterFn = currentFilterFns[columnDef.id];
+        columnDef._filterFn = columnFilterFns[columnDef.id];
       }
-      if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn as string)) {
+      if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
-        columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
+        columnDef.sortingFn = sortingFns[columnDef.sortingFn];
       }
     } else if (columnDef.columnDefType === 'display') {
       columnDef = {

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -14,13 +14,13 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   table,
 }) => {
   const { getState } = table;
-  const { currentFilterFns, showColumnFilters } = getState();
+  const { columnFilterFns, showColumnFilters } = getState();
   const { column } = header;
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {['between', 'betweenInclusive', 'inNumberRange'].includes(
-        currentFilterFns[column.id],
+        columnFilterFns[column.id],
       ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -15,7 +15,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
       localization,
     },
   } = table;
-  const { currentFilterFns } = getState();
+  const { columnFilterFns } = getState();
   const { column } = header;
   const { columnDef } = column;
 
@@ -24,7 +24,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     'betweenInclusive',
     'inNumberRange',
   ].includes(columnDef._filterFn);
-  const currentFilterOption = currentFilterFns?.[header.id];
+  const currentFilterOption = columnFilterFns?.[header.id];
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
     .replace(

package/src/index.tsx

@@ -1,3 +1,9 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+import type { MRT_Icons } from './icons';
+export type { MRT_Icons };
+
+import type { MRT_Localization } from './localization';
+export type { MRT_Localization };

package/src/inputs/MRT_FilterTextField.tsx

@@ -42,11 +42,11 @@ export const MRT_FilterTextField: FC<Props> = ({
       muiTableHeadCellFilterTextFieldProps,
       tableId,
     },
-    setCurrentFilterFns,
+    setColumnFilterFns,
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { currentFilterFns } = getState();
+  const { columnFilterFns } = getState();
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
@@ -79,7 +79,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     columnDef.filterVariant === 'text' ||
     (!isSelectFilter && !isMultiSelectFilter);
 
-  const currentFilterOption = currentFilterFns?.[header.id];
+  const currentFilterOption = columnFilterFns?.[header.id];
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
     rangeFilterIndex ?? ''
   }`;
@@ -166,7 +166,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const handleClearEmptyFilterChip = () => {
     setFilterValue('');
     column.setFilterValue(undefined);
-    setCurrentFilterFns((prev) => ({
+    setColumnFilterFns((prev) => ({
       ...prev,
       [header.id]: 'fuzzy',
     }));

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -119,10 +119,10 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
       columnFilterModeOptions,
       localization,
     },
-    setCurrentFilterFns,
-    setCurrentGlobalFilterFn,
+    setColumnFilterFns,
+    setGlobalFilterFn,
   } = table;
-  const { currentFilterFns, currentGlobalFilterFn, density } = getState();
+  const { columnFilterFns, globalFilterFn, density } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
 
@@ -144,7 +144,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const handleSelectFilterType = (option: MRT_FilterOption) => {
     if (header && column) {
-      setCurrentFilterFns((prev: { [key: string]: any }) => ({
+      setColumnFilterFns((prev: { [key: string]: any }) => ({
         ...prev,
         [header.id]: option,
       }));
@@ -156,15 +156,13 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         column.setFilterValue('');
       }
     } else {
-      setCurrentGlobalFilterFn(option);
+      setGlobalFilterFn(option);
     }
     setAnchorEl(null);
     onSelect?.();
   };
 
-  const filterOption = !!header
-    ? currentFilterFns[header.id]
-    : currentGlobalFilterFn;
+  const filterOption = !!header ? columnFilterFns[header.id] : globalFilterFn;
 
   return (
     <Menu

package/src/table/MRT_TablePaper.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect } from 'react';
 import { Paper } from '@mui/material';
-import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
-import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import type { MRT_TableInstance } from '..';
 
@@ -12,7 +12,7 @@ interface Props {
 export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
-    options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
+    options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
   } = table;
   const { isFullScreen } = getState();
 
@@ -49,9 +49,9 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
         width: isFullScreen ? '100vw' : undefined,
       }}
     >
-      {enableToolbarTop && <MRT_ToolbarTop table={table} />}
+      {enableTopToolbar && <MRT_TopToolbar table={table} />}
       <MRT_TableContainer table={table} />
-      {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
+      {enableBottomToolbar && <MRT_BottomToolbar table={table} />}
     </Paper>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -23,7 +23,6 @@ import {
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
 } from '../column.utils';
-import { MRT_FilterFns } from '../filtersFns';
 import type {
   MRT_Cell,
   MRT_Column,
@@ -86,7 +85,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
-  const [currentFilterFns, setCurrentFilterFns] = useState<{
+  const [columnFilterFns, setColumnFilterFns] = useState<{
     [key: string]: MRT_FilterOption;
   }>(() =>
     Object.assign(
@@ -97,7 +96,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             col.filterFn instanceof Function
               ? col.filterFn.name ?? 'custom'
               : col.filterFn ??
-                initialState?.currentFilterFns?.[
+                initialState?.columnFilterFns?.[
                   col.id?.toString() ?? col.accessorKey?.toString() ?? ''
                 ] ??
                 getDefaultColumnFilterFn(col),
@@ -105,12 +104,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ),
     ),
   );
-  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
-    useState<MRT_FilterOption>(
-      props.globalFilterFn instanceof String
-        ? (props.globalFilterFn as MRT_FilterOption)
-        : 'fuzzy',
-    );
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
+    props.globalFilterFn instanceof String
+      ? (props.globalFilterFn as MRT_FilterOption)
+      : 'fuzzy',
+  );
 
   const displayColumns = useMemo(
     () =>
@@ -200,15 +198,20 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
 
   const columnDefs = useMemo(
     () =>
-      prepareColumns([...displayColumns, ...props.columns], currentFilterFns),
-    [currentFilterFns, displayColumns, props.columns],
+      prepareColumns(
+        [...displayColumns, ...props.columns],
+        columnFilterFns,
+        props.filterFns as any,
+        props.sortingFns as any,
+      ),
+    [columnFilterFns, displayColumns, props.columns],
   );
 
   const data: TData[] = useMemo(
     () =>
       (props.state?.isLoading || props.state?.showSkeletons) &&
       !props.data.length
-        ? [...Array(10).fill(null)].map(() =>
+        ? [...Array(5).fill(null)].map(() =>
             Object.assign(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
@@ -238,10 +241,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       //@ts-ignore
       columns: columnDefs,
       data,
-
       globalFilterFn:
         //@ts-ignore
-        MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,
+        props.filterFns[globalFilterFn] ?? props.filterFns.fuzzy,
       initialState,
       state: {
         columnOrder,
@@ -249,8 +251,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         currentDraggingRow,
         currentEditingCell,
         currentEditingRow,
-        currentFilterFns,
-        currentGlobalFilterFn,
+        columnFilterFns,
+        globalFilterFn,
         currentHoveredColumn,
         currentHoveredRow,
         density,
@@ -270,9 +272,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.onCurrentEditingCellChange ?? setCurrentEditingCell,
     setCurrentEditingRow:
       props.onCurrentEditingRowChange ?? setCurrentEditingRow,
-    setCurrentFilterFns: props.onCurrentFilterFnsChange ?? setCurrentFilterFns,
-    setCurrentGlobalFilterFn:
-      props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
+    setColumnFilterFns: props.onCurrentFilterFnsChange ?? setColumnFilterFns,
+    setGlobalFilterFn: props.onCurrentGlobalFilterFnChange ?? setGlobalFilterFn,
     setCurrentHoveredColumn:
       props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
     setCurrentHoveredRow:
@@ -284,8 +285,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
-  useEffect(() => props?.onTableInstanceChange?.(table as any), [table]);
-
   return (
     <>
       <Dialog

package/src/toolbar/{MRT_ToolbarBottom.tsx → MRT_BottomToolbar.tsx}

@@ -3,7 +3,7 @@ import { alpha, Box, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
-import { commonToolbarStyles } from './MRT_ToolbarTop';
+import { commonToolbarStyles } from './MRT_TopToolbar';
 import { MRT_TableInstance } from '..';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 
@@ -11,16 +11,16 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
+export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
       enablePagination,
-      muiTableToolbarBottomProps,
+      muiTableBottomToolbarProps,
       positionPagination,
       positionToolbarAlertBanner,
       positionToolbarDropZone,
-      renderToolbarBottomCustomActions,
+      renderBottomToolbarCustomActions,
       tableId,
     },
   } = table;
@@ -29,11 +29,11 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableToolbarBottomProps instanceof Function
-      ? muiTableToolbarBottomProps({ table })
-      : muiTableToolbarBottomProps;
+    muiTableBottomToolbarProps instanceof Function
+      ? muiTableBottomToolbarProps({ table })
+      : muiTableBottomToolbarProps;
 
-  const stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
+  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
   return (
     <Toolbar
@@ -68,9 +68,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
           width: '100%',
         }}
       >
-        {renderToolbarBottomCustomActions ? (
+        {renderBottomToolbarCustomActions ? (
           <Box sx={{ p: '0.5rem' }}>
-            {renderToolbarBottomCustomActions({ table })}
+            {renderBottomToolbarCustomActions({ table })}
           </Box>
         ) : (
           <span />

package/src/toolbar/{MRT_ToolbarTop.tsx → MRT_TopToolbar.tsx}

@@ -24,19 +24,19 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
+export const MRT_TopToolbar: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
       enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      muiTableToolbarTopProps,
+      muiTableTopToolbarProps,
       positionGlobalFilter,
       positionPagination,
       positionToolbarAlertBanner,
       positionToolbarDropZone,
-      renderToolbarTopCustomActions,
+      renderTopToolbarCustomActions,
       tableId,
     },
   } = table;
@@ -46,12 +46,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableToolbarTopProps instanceof Function
-      ? muiTableToolbarTopProps({ table })
-      : muiTableToolbarTopProps;
+    muiTableTopToolbarProps instanceof Function
+      ? muiTableTopToolbarProps({ table })
+      : muiTableTopToolbarProps;
 
   const stackAlertBanner =
-    isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
+    isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
 
   return (
     <Toolbar
@@ -95,7 +95,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
           <MRT_GlobalFilterTextField table={table} />
         )}
 
-        {renderToolbarTopCustomActions?.({ table }) ?? <span />}
+        {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
           <MRT_ToolbarInternalButtons table={table} />
         ) : (