material-react-table 0.7.4 → 0.8.0-alpha.1

package/src/table/MRT_TableContainer.tsx

@@ -1,27 +1,10 @@
-import React, { CSSProperties, FC, useEffect, useState } from 'react';
-import { alpha, Box, TableContainer, Theme } from '@mui/material';
+import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
+import { TableContainer } from '@mui/material';
 import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
 
-const commonBoxStyles = ({
-  pinned,
-  theme,
-  visible,
-}: {
-  pinned?: 'left' | 'right';
-  theme: Theme;
-  visible?: boolean;
-}): CSSProperties => ({
-  display: 'grid',
-  minWidth: visible ? '200px' : 0,
-  overflowX: pinned ? 'scroll' : 'auto',
-  boxShadow:
-    pinned === 'left'
-      ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
-      : pinned === 'right'
-      ? `0 -1px 12px ${alpha(theme.palette.common.black, 0.5)}`
-      : 'none',
-});
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -29,20 +12,11 @@ interface Props {
 
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
-    getCenterTableWidth,
-    getIsSomeColumnsPinned,
-    getLeftTableWidth,
-    getRightTableWidth,
     getState,
-    options: {
-      enablePinning,
-      enableStickyHeader,
-      idPrefix,
-      muiTableContainerProps,
-    },
+    options: { enableStickyHeader, idPrefix, muiTableContainerProps },
   } = tableInstance;
 
-  const { isFullScreen, columnPinning } = getState();
+  const { isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -51,7 +25,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -84,42 +58,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enablePinning && getIsSomeColumnsPinned() ? (
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: `${getLeftTableWidth()}fr ${getCenterTableWidth()}fr ${getRightTableWidth()}fr`,
-          }}
-        >
-          <Box
-            sx={(theme: Theme) =>
-              commonBoxStyles({
-                pinned: 'left',
-                theme,
-                visible: !!columnPinning.left?.length,
-              })
-            }
-          >
-            <MRT_Table pinned="left" tableInstance={tableInstance} />
-          </Box>
-          <Box sx={(theme: Theme) => commonBoxStyles({ theme })}>
-            <MRT_Table pinned="center" tableInstance={tableInstance} />
-          </Box>
-          <Box
-            sx={(theme: Theme) =>
-              commonBoxStyles({
-                pinned: 'right',
-                theme,
-                visible: !!columnPinning.right?.length,
-              })
-            }
-          >
-            <MRT_Table pinned="right" tableInstance={tableInstance} />
-          </Box>
-        </Box>
-      ) : (
-        <MRT_Table pinned="none" tableInstance={tableInstance} />
-      )}
+      <MRT_Table tableInstance={tableInstance} />
     </TableContainer>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  FilterFn,
   PaginationState,
-  Table,
   createTable,
   functionalUpdate,
-  getColumnFilteredRowModelSync,
   getExpandedRowModel,
-  getGlobalFilteredRowModelSync,
-  getGroupedRowModelSync,
   getPaginationRowModel,
-  getSortedRowModelSync,
   useTableInstance,
-  getCoreRowModelSync,
-  ColumnDef,
+  getGroupedRowModel,
+  getSortedRowModel,
+  getCoreRowModel,
+  getFilteredRowModel,
+  ReactTableGenerics,
+  getFacetedRowModel,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
   MRT_ColumnDef,
-  MRT_FilterType,
+  MRT_FilterFn,
   MRT_Row,
   MRT_TableInstance,
   MRT_TableState,
@@ -35,7 +35,7 @@ import {
   getAllLeafColumnDefs,
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
-import { MRT_FILTER_TYPE } from '../enums';
+import { MRT_FILTER_OPTION } from '../enums';
 import { Box, Dialog, Grow } from '@mui/material';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
@@ -95,30 +95,30 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: initialState?.pagination?.pageIndex ?? 0,
     pageSize: initialState?.pagination?.pageSize ?? 10,
-    pageCount: initialState?.pagination?.pageCount ?? -1,
+    pageCount: initialState?.pagination?.pageCount,
   });
 
-  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
-    [key: string]: MRT_FilterType;
+  const [currentFilterFns, setCurrentFilterFns] = useState<{
+    [key: string]: MRT_FilterFn;
   }>(() =>
     Object.assign(
       {},
       ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
         [c.id as string]:
-          c.filter ??
-          initialState?.currentFilterTypes?.[c.id] ??
+          c.filterFn ??
+          initialState?.currentFilterFns?.[c.id] ??
           (!!c.filterSelectOptions?.length
-            ? MRT_FILTER_TYPE.EQUALS
-            : MRT_FILTER_TYPE.BEST_MATCH),
+            ? MRT_FILTER_OPTION.EQUALS
+            : MRT_FILTER_OPTION.FUZZY),
       })),
     ),
   );
 
-  const [currentGlobalFilterType, setCurrentGlobalFilterType] = useState(
-    props.globalFilterType ?? MRT_FILTER_TYPE.BEST_MATCH_FIRST,
-  );
+  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
+    MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
+  >(props.globalFilterFn ?? MRT_FILTER_OPTION.FUZZY);
 
-  const table = useMemo(() => createTable() as unknown as Table<D>, []);
+  const table = useMemo(() => createTable(), []);
 
   const displayColumns = useMemo(
     () =>
@@ -128,20 +128,19 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
-                row={cell.row as MRT_Row}
+                row={cell.row as any}
                 tableInstance={tableInstance}
               />
             ),
             header: props.localization?.actions,
             id: 'mrt-row-actions',
-            maxWidth: 60,
-            width: 60,
+            size: 60,
           }),
-        (props.enableExpanded || props.enableGrouping) &&
+        (props.enableExpanding || props.enableGrouping) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ExpandButton
-                row={cell.row as MRT_Row}
+                row={cell.row as any}
                 tableInstance={tableInstance}
               />
             ),
@@ -151,14 +150,13 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.expand,
             id: 'mrt-expand',
-            maxWidth: 40,
-            width: 40,
+            size: 50,
           }),
         props.enableRowSelection &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_SelectCheckbox
-                row={cell.row as MRT_Row}
+                row={cell.row as any}
                 tableInstance={tableInstance}
               />
             ),
@@ -168,8 +166,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             id: 'mrt-select',
-            maxWidth: 40,
-            width: 40,
+            size: 50,
           }),
         props.enableRowNumbers &&
           createDisplayColumn(table, {
@@ -177,16 +174,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
-            maxWidth: 40,
-            width: 40,
-            minWidth: 40,
+            size: 50,
           }),
       ].filter(Boolean),
     [
       props.editingMode,
       props.enableEditing,
       props.enableExpandAll,
-      props.enableExpanded,
+      props.enableExpanding,
       props.enableGrouping,
       props.enableRowActions,
       props.enableRowNumbers,
@@ -198,21 +193,21 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   const columns = useMemo(
-    () =>
-      table.createColumns([
-        ...displayColumns,
-        ...props.columns.map((column) =>
-          column.columns
-            ? createGroup(table, column, currentFilterTypes)
-            : createDataColumn(table, column, currentFilterTypes),
-        ),
-      ] as ColumnDef<D>[]),
-    [table, props.columns, currentFilterTypes],
+    () => [
+      ...displayColumns,
+      ...props.columns.map((column) =>
+        column.columns
+          ? createGroup(table, column as any, currentFilterFns)
+          : createDataColumn(table, column as any, currentFilterFns),
+      ),
+    ],
+    [table, props.columns, currentFilterFns],
   );
 
-  const data: D['Row'][] = useMemo(
+  const data: D[] = useMemo(
     () =>
-      props.isLoading && !props.data.length
+      (props.state?.isLoading || props.state?.showSkeletons) &&
+      !props.data.length
         ? [...Array(10).fill(null)].map(() =>
             Object.assign(
               {},
@@ -224,36 +219,45 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ),
           )
         : props.data,
-    [props.data, props.isLoading],
+    [props.data, props.state?.isLoading, props.state?.showSkeletons],
   );
 
   //@ts-ignore
-  const tableInstance: MRT_TableInstance<{}> = {
+  const tableInstance = {
+    //@ts-ignore
     ...useTableInstance(table, {
+      filterFns: defaultFilterFNs,
+      //@ts-ignore
+      getCoreRowModel: getCoreRowModel(),
       //@ts-ignore
-      filterTypes: defaultFilterFNs,
-      getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
-      getCoreRowModel: getCoreRowModelSync(),
       getExpandedRowModel: getExpandedRowModel(),
-      getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
-      getGroupedRowModel: getGroupedRowModelSync(),
+      //@ts-ignore
+      getFacetedRowModel: getFacetedRowModel(),
+      //@ts-ignore
+      getFilteredRowModel: getFilteredRowModel(),
+      //@ts-ignore
+      getGroupedRowModel: getGroupedRowModel(),
+      //@ts-ignore
       getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModelSync(),
-      getSubRows: (originalRow: D) => originalRow.subRows,
-      globalFilterType: currentGlobalFilterType,
+      //@ts-ignore
+      getSortedRowModel: getSortedRowModel(),
+      //@ts-ignore
+      getSubRows: (row) => row?.subRows,
+      //@ts-ignore
+      globalFilterFn: currentGlobalFilterFn,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
       ...props,
+      //@ts-ignore
       columns,
       data,
       idPrefix,
-      //@ts-ignore
       initialState,
       state: {
         currentEditingCell,
         currentEditingRow,
-        currentFilterTypes,
-        currentGlobalFilterType,
+        currentFilterFns,
+        currentGlobalFilterFn,
         isDensePadding,
         isFullScreen,
         //@ts-ignore
@@ -263,17 +267,15 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
-    //@ts-ignore
     setCurrentEditingCell,
-    //@ts-ignore
     setCurrentEditingRow,
-    setCurrentFilterTypes,
-    setCurrentGlobalFilterType,
+    setCurrentFilterFns,
+    setCurrentGlobalFilterFn,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
     setShowGlobalFilter,
-  };
+  } as MRT_TableInstance;
 
   useEffect(() => {
     if (typeof window === 'undefined' || !props.enablePersistentState) {
@@ -304,20 +306,18 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   return (
     <>
       <Dialog
-        TransitionComponent={Grow}
         PaperComponent={Box}
+        TransitionComponent={Grow}
         disablePortal
         fullScreen
         keepMounted={false}
-        onClose={() => tableInstance.setIsFullScreen(false)}
-        open={tableInstance.getState().isFullScreen}
+        onClose={() => setIsFullScreen(false)}
+        open={isFullScreen}
         transitionDuration={400}
       >
         <MRT_TablePaper tableInstance={tableInstance} />
       </Dialog>
-      {!tableInstance.getState().isFullScreen && (
-        <MRT_TablePaper tableInstance={tableInstance} />
-      )}
+      {!isFullScreen && <MRT_TablePaper tableInstance={tableInstance} />}
     </>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -8,16 +8,19 @@ interface Props {
 
 export const MRT_LinearProgressBar: FC<Props> = ({ tableInstance }) => {
   const {
-    options: { muiLinearProgressProps, isReloading, isLoading },
+    options: { muiLinearProgressProps },
+    getState,
   } = tableInstance;
 
+  const { isLoading, showProgressBars } = getState();
+
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
       ? muiLinearProgressProps({ tableInstance })
       : muiLinearProgressProps;
 
   return (
-    <Collapse in={isReloading || isLoading} unmountOnExit>
+    <Collapse in={isLoading || showProgressBars} mountOnEnter unmountOnExit>
       <LinearProgress
         aria-label="Loading"
         aria-busy="true"

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -11,7 +11,6 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
-    toggleColumnGrouping,
     options: {
       localization,
       muiTableToolbarAlertBannerProps,
@@ -57,7 +56,9 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
                   .getAllColumns()
                   .find((column) => column.id === columnId)?.header
               }
-              onDelete={() => toggleColumnGrouping(columnId)}
+              onDelete={() =>
+                tableInstance.getColumn(columnId).toggleGrouping()
+              }
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { alpha, Box, Theme, Toolbar } from '@mui/material';
+import { Box, lighten, Theme, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
@@ -8,13 +8,11 @@ import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TableInstance } from '..';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  backgroundImage: `linear-gradient(${alpha(
-    theme.palette.common.white,
-    0.05,
-  )},${alpha(theme.palette.common.white, 0.05)})`,
+  backgroundColor: lighten(theme.palette.background.default, 0.04),
+  backgroundImage: 'none',
   display: 'grid',
   p: '0 !important',
+  transition: 'all 0.2s ease-in-out',
   width: '100%',
   zIndex: 1,
 });

package/src/utils.ts

@@ -1,6 +1,6 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType } from '.';
-import { MRT_FILTER_TYPE } from './enums';
+import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
@@ -24,31 +24,31 @@ export const getAllLeafColumnDefs = (
 export const createGroup = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: MRT_ColumnDef<D>,
-  currentFilterTypes: { [key: string]: MRT_FilterType },
+  currentFilterFns: { [key: string]: MRT_FilterFn },
 ): ColumnDef<D> =>
   table.createGroup({
     ...column,
     columns: column?.columns?.map?.((col) =>
       col.columns
-        ? createGroup<D>(table, col, currentFilterTypes)
-        : createDataColumn(table, col, currentFilterTypes),
+        ? createGroup<D>(table, col, currentFilterFns)
+        : createDataColumn(table, col, currentFilterFns),
     ),
   } as any);
 
 export const createDataColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: MRT_ColumnDef<D>,
-  currentFilterTypes: { [key: string]: MRT_FilterType },
+  currentFilterFns: { [key: string]: MRT_FilterFn },
 ): ColumnDef<D> => // @ts-ignore
   table.createDataColumn(column.id, {
     filterFn:
-      currentFilterTypes[column.id] instanceof Function
-        ? currentFilterTypes[column.id]
-        : defaultFilterFNs[currentFilterTypes[column.id] as MRT_FILTER_TYPE],
+      currentFilterFns[column.id] instanceof Function
+        ? currentFilterFns[column.id]
+        : defaultFilterFNs[currentFilterFns[column.id] as MRT_FILTER_OPTION],
     ...column,
   }) as any;
 
 export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
-): ColumnDef<D> => table.createDisplayColumn(column);
+): ColumnDef<D> => table.createDisplayColumn(column as ColumnDef<D>);