material-react-table 0.17.1 → 0.19.0-alpha.1

package/src/table/MRT_TableRoot.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
-  FilterFn,
-  ReactTableGenerics,
-  Table,
   TableState,
-  createTable,
-  filterFns,
   getCoreRowModel,
   getExpandedRowModel,
   getFacetedRowModel,
@@ -13,14 +8,12 @@ import {
   getGroupedRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  useTableInstance,
-  sortingFns,
+  useReactTable,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
   MRT_ColumnDef,
-  MRT_FilterFn,
-  MRT_FILTER_OPTION,
+  MRT_FilterOption,
   MRT_Row,
   MRT_TableInstance,
   MRT_TableState,
@@ -33,14 +26,11 @@ import { MaterialReactTableProps } from '../MaterialReactTable';
 import { MRT_TablePaper } from './MRT_TablePaper';
 import { Box, Dialog, Grow } from '@mui/material';
 import {
-  createDataColumn,
-  createDisplayColumn,
-  createGroup,
+  prepareColumns,
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
 } from '../utils';
 import { MRT_FilterFns } from '../filtersFns';
-import { MRT_SortingFns } from '../sortingFns';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
@@ -73,6 +63,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [isFullScreen, setIsFullScreen] = useState(
     initialState?.isFullScreen ?? false,
   );
+  const [showAlertBanner, setShowAlertBanner] = useState(
+    props.initialState?.showAlertBanner ?? false,
+  );
   const [showFilters, setShowFilters] = useState(
     initialState?.showFilters ?? false,
   );
@@ -81,125 +74,114 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   const [currentFilterFns, setCurrentFilterFns] = useState<{
-    [key: string]: MRT_FilterFn;
+    [key: string]: MRT_FilterOption;
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
-        [c.id as string]:
-          c.filterFn ??
-          initialState?.currentFilterFns?.[c.id] ??
-          (!!c.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
-      })),
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<D>[]).map(
+        (col) => ({
+          [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
+            col.filterFn instanceof Function
+              ? col.filterFn.name ?? 'custom'
+              : col.filterFn ??
+                initialState?.currentFilterFns?.[
+                  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
+                ] ??
+                (!!col.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
+        }),
+      ),
     ),
   );
 
-  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
-    MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
-  >(props.globalFilterFn ?? 'fuzzy');
+  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
+    useState<MRT_FilterOption>(
+      props.globalFilterFn instanceof String
+        ? (props.globalFilterFn as MRT_FilterOption)
+        : 'fuzzy',
+    );
 
-  const table = useMemo(
+  const displayColumns = useMemo(
     () =>
-      // @ts-ignore
-      createTable().setOptions({
-        filterFns: { ...filterFns, ...MRT_FilterFns, ...props.filterFns },
-        getCoreRowModel: getCoreRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getGroupedRowModel: getGroupedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        sortingFns: { ...sortingFns, ...MRT_SortingFns, ...props.sortingFns },
-      }) as Table<D>,
-    [],
+      (
+        [
+          columnOrder.includes('mrt-row-actions') && {
+            Cell: ({ cell }) => (
+              <MRT_ToggleRowActionMenuButton
+                row={cell.row as any}
+                table={table}
+              />
+            ),
+            columnDefType: 'display',
+            header: props.localization?.actions,
+            id: 'mrt-row-actions',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 70,
+          },
+          columnOrder.includes('mrt-expand') && {
+            Cell: ({ cell }) => (
+              <MRT_ExpandButton row={cell.row as any} table={table} />
+            ),
+            Header: () =>
+              props.enableExpandAll ? (
+                <MRT_ExpandAllButton table={table} />
+              ) : null,
+            columnDefType: 'display',
+            header: props.localization?.expand,
+            id: 'mrt-expand',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+          columnOrder.includes('mrt-select') && {
+            Cell: ({ cell }) => (
+              <MRT_SelectCheckbox row={cell.row as any} table={table} />
+            ),
+            Header: () =>
+              props.enableSelectAll ? (
+                <MRT_SelectCheckbox selectAll table={table} />
+              ) : null,
+            columnDefType: 'display',
+            header: props.localization?.select,
+            id: 'mrt-select',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+          columnOrder.includes('mrt-row-numbers') && {
+            Cell: ({ cell }) => cell.row.index + 1,
+            Header: () => props.localization?.rowNumber,
+            columnDefType: 'display',
+            header: props.localization?.rowNumbers,
+            id: 'mrt-row-numbers',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+        ] as MRT_ColumnDef<D>[]
+      ).filter(Boolean),
+    [
+      columnOrder,
+      props.editingMode,
+      props.enableEditing,
+      props.enableExpandAll,
+      props.enableExpanding,
+      props.enableGrouping,
+      props.enableRowActions,
+      props.enableRowNumbers,
+      props.enableRowSelection,
+      props.enableSelectAll,
+      props.localization,
+      props.muiTableBodyCellProps,
+      props.muiTableHeadCellProps,
+      props.positionActionsColumn,
+    ],
   );
 
-  const displayColumns = useMemo(() => {
-    return [
-      columnOrder.includes('mrt-row-actions') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_ToggleRowActionMenuButton
-              row={cell.row as any}
-              instance={instance}
-            />
-          ),
-          header: props.localization?.actions,
-          id: 'mrt-row-actions',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 70,
-        }),
-      columnOrder.includes('mrt-expand') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_ExpandButton row={cell.row as any} instance={instance} />
-          ),
-          Header: () =>
-            props.enableExpandAll ? (
-              <MRT_ExpandAllButton instance={instance} />
-            ) : null,
-          header: props.localization?.expand,
-          id: 'mrt-expand',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-      columnOrder.includes('mrt-select') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
-          ),
-          Header: () =>
-            props.enableSelectAll ? (
-              <MRT_SelectCheckbox selectAll instance={instance} />
-            ) : null,
-          header: props.localization?.select,
-          id: 'mrt-select',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-      columnOrder.includes('mrt-row-numbers') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => cell.row.index + 1,
-          Header: () => props.localization?.rowNumber,
-          header: props.localization?.rowNumbers,
-          id: 'mrt-row-numbers',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-    ].filter(Boolean) as MRT_ColumnDef<D>[];
-  }, [
-    columnOrder,
-    props.editingMode,
-    props.enableEditing,
-    props.enableExpandAll,
-    props.enableExpanding,
-    props.enableGrouping,
-    props.enableRowActions,
-    props.enableRowNumbers,
-    props.enableRowSelection,
-    props.enableSelectAll,
-    props.localization,
-    props.muiTableBodyCellProps,
-    props.muiTableHeadCellProps,
-    props.positionActionsColumn,
-    table,
-  ]);
-
-  const columns = useMemo(
-    () => [
-      ...displayColumns,
-      ...props.columns.map((column) =>
-        column.columns
-          ? createGroup(table, column as any, currentFilterFns)
-          : createDataColumn(table, column as any, currentFilterFns),
-      ),
-    ],
-    [table, props.columns, currentFilterFns],
+  const columnDefs = useMemo(
+    () =>
+      prepareColumns([...displayColumns, ...props.columns], currentFilterFns),
+    [currentFilterFns, displayColumns, props.columns],
   );
 
   const data: D[] = useMemo(
@@ -210,8 +192,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Object.assign(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
-                (c) => ({
-                  [c.id]: null,
+                (col) => ({
+                  [col.id ?? col.accessorKey ?? '']: null,
                 }),
               ),
             ),
@@ -221,17 +203,24 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const instance = {
-    //@ts-ignore
-    ...useTableInstance(table, {
+  const table = {
+    ...useReactTable({
+      getCoreRowModel: getCoreRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getFacetedRowModel: getFacetedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getGroupedRowModel: getGroupedRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
       ...props,
       //@ts-ignore
-      columns,
+      columns: columnDefs,
       data,
-      getSubRows: (row) => (row as MRT_Row)?.subRows,
+      getSubRows: (row) => row?.subRows,
       //@ts-ignore
-      globalFilterFn: currentGlobalFilterFn,
+      globalFilterFn:
+        MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,
       initialState,
       state: {
         columnOrder,
@@ -241,6 +230,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         currentGlobalFilterFn,
         density,
         isFullScreen,
+        showAlertBanner,
         showFilters,
         showGlobalFilter,
         ...props.state,
@@ -256,34 +246,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
     setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
+    setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
-  useEffect(() => {
-    props?.onColumnOrderChanged?.({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnOrder]);
-
-  useEffect(() => {
-    props?.onColumnPinningChanged?.({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnPinning]);
-
-  useEffect(() => {
-    props?.onColumnVisibilityChanged?.({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnVisibility]);
-
   return (
     <>
       <Dialog
@@ -296,9 +263,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         open={isFullScreen}
         transitionDuration={400}
       >
-        <MRT_TablePaper instance={instance} />
+        <MRT_TablePaper table={table} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper instance={instance} />}
+      {!isFullScreen && <MRT_TablePaper table={table} />}
     </>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -4,20 +4,19 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   alignTo: 'bottom' | 'top';
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, instance }) => {
+export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, table }) => {
   const {
     options: { muiLinearProgressProps },
     getState,
-  } = instance;
-
+  } = table;
   const { isLoading, showProgressBars } = getState();
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ instance })
+      ? muiLinearProgressProps({ table })
       : muiLinearProgressProps;
 
   return (

package/src/toolbar/MRT_TablePagination.tsx

@@ -3,11 +3,11 @@ import { TablePagination } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
   position: 'top' | 'bottom';
 }
 
-export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
+export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
   const {
     getPrePaginationRowModel,
     getState,
@@ -18,26 +18,24 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
       enableToolbarInternalActions,
       rowCount,
     },
-  } = instance;
-
+  } = table;
   const {
     pagination: { pageSize = 10, pageIndex = 0 },
     showGlobalFilter,
   } = getState();
 
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
+
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
-      ? muiTablePaginationProps({ instance })
+      ? muiTablePaginationProps({ table })
       : muiTablePaginationProps;
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
     setPageSize(+event.target.value);
   };
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
-
-  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-
   return (
     <TablePagination
       SelectProps={{

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,28 +1,27 @@
 import React, { FC, Fragment } from 'react';
-import { Alert, Box, Chip, Collapse } from '@mui/material';
+import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
   stackAlertBanner?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ToolbarAlertBanner: FC<Props> = ({
   stackAlertBanner,
-  instance,
+  table,
 }) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
     options: { localization, muiTableToolbarAlertBannerProps },
-  } = instance;
-
-  const { grouping } = getState();
+  } = table;
+  const { grouping, showAlertBanner } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ instance })
+      ? muiTableToolbarAlertBannerProps({ table })
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
@@ -47,8 +46,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={instance.getColumn(columnId).columnDef.header}
-              onDelete={() => instance.getColumn(columnId).toggleGrouping()}
+              label={table.getColumn(columnId).columnDef.header}
+              onDelete={() => table.getColumn(columnId).toggleGrouping()}
             />
           </Fragment>
         ))}
@@ -57,12 +56,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
 
   return (
     <Collapse
-      in={!!selectMessage || !!groupedByMessage}
+      in={showAlertBanner || !!selectMessage || !!groupedByMessage}
       timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
         color="info"
         icon={false}
+        {...alertProps}
         sx={{
           borderRadius: 0,
           fontSize: '1rem',
@@ -75,9 +75,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           zIndex: 2,
           ...alertProps?.sx,
         }}
-        {...alertProps}
       >
+        {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
         <Box sx={{ p: '0.5rem 1rem' }}>
+          {alertProps?.children}
+          {alertProps?.children && (selectMessage || groupedByMessage) && (
+            <br />
+          )}
           {selectMessage}
           {selectMessage && groupedByMessage && <br />}
           {groupedByMessage}

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -7,10 +7,10 @@ import { commonToolbarStyles } from './MRT_ToolbarTop';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
+export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -21,15 +21,14 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
       renderToolbarBottomCustomActions,
       tableId,
     },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
-      ? muiTableToolbarBottomProps({ instance })
+      ? muiTableToolbarBottomProps({ table })
       : muiTableToolbarBottomProps;
 
   const stackAlertBanner =
@@ -54,9 +53,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
         } as any)
       }
     >
-      <MRT_LinearProgressBar alignTo="top" instance={instance} />
+      <MRT_LinearProgressBar alignTo="top" table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
-        <MRT_ToolbarAlertBanner instance={instance} />
+        <MRT_ToolbarAlertBanner table={table} />
       )}
       <Box
         sx={{
@@ -67,7 +66,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
       >
         {renderToolbarBottomCustomActions ? (
           <Box sx={{ p: '0.5rem' }}>
-            {renderToolbarBottomCustomActions({ instance })}
+            {renderToolbarBottomCustomActions({ table })}
           </Box>
         ) : (
           <span />
@@ -83,7 +82,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
         >
           {enablePagination &&
             ['bottom', 'both'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination instance={instance} position="bottom" />
+              <MRT_TablePagination table={table} position="bottom" />
             )}
         </Box>
       </Box>

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -9,10 +9,10 @@ import { MRT_TableInstance } from '..';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
+export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
   const {
     options: {
       enableColumnFilters,
@@ -26,7 +26,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
       positionGlobalFilter,
       renderToolbarInternalActions,
     },
-  } = instance;
+  } = table;
 
   return (
     <Box
@@ -42,26 +42,26 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
         MRT_ToggleDensePaddingButton,
         MRT_ToggleFiltersButton,
         MRT_ToggleGlobalFilterButton,
-        instance,
+        table,
       }) ?? (
         <>
           {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField instance={instance} />
+            <MRT_GlobalFilterTextField table={table} />
           )}
           {enableFilters && enableGlobalFilter && (
-            <MRT_ToggleGlobalFilterButton instance={instance} />
+            <MRT_ToggleGlobalFilterButton table={table} />
           )}
           {enableFilters && enableColumnFilters && (
-            <MRT_ToggleFiltersButton instance={instance} />
+            <MRT_ToggleFiltersButton table={table} />
           )}
           {(enableHiding || enableColumnOrdering || enablePinning) && (
-            <MRT_ShowHideColumnsButton instance={instance} />
+            <MRT_ShowHideColumnsButton table={table} />
           )}
           {enableDensityToggle && (
-            <MRT_ToggleDensePaddingButton instance={instance} />
+            <MRT_ToggleDensePaddingButton table={table} />
           )}
           {enableFullScreenToggle && (
-            <MRT_FullScreenToggleButton instance={instance} />
+            <MRT_FullScreenToggleButton table={table} />
           )}
         </>
       )}