material-react-table 0.7.5 → 0.8.0-alpha.2

package/src/table/MRT_TableRoot.tsx

@@ -1,19 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  FilterFn,
   PaginationState,
-  Table,
   createTable,
   functionalUpdate,
-  getColumnFilteredRowModelSync,
   getExpandedRowModel,
-  getGlobalFilteredRowModelSync,
-  getGroupedRowModelSync,
   getPaginationRowModel,
-  getSortedRowModelSync,
   useTableInstance,
-  getCoreRowModelSync,
-  ColumnDef,
-  FilterFn,
+  getGroupedRowModel,
+  getSortedRowModel,
+  getCoreRowModel,
+  getFilteredRowModel,
+  ReactTableGenerics,
+  getFacetedRowModel,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -96,7 +95,7 @@ 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 [currentFilterFns, setCurrentFilterFns] = useState<{
@@ -110,16 +109,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           initialState?.currentFilterFns?.[c.id] ??
           (!!c.filterSelectOptions?.length
             ? MRT_FILTER_OPTION.EQUALS
-            : MRT_FILTER_OPTION.BEST_MATCH),
+            : MRT_FILTER_OPTION.FUZZY),
       })),
     ),
   );
 
   const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
-    MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol
-  >(props.globalFilterFn ?? MRT_FILTER_OPTION.BEST_MATCH_FIRST);
+    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(
     () =>
@@ -129,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}
               />
             ),
@@ -152,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}
               />
             ),
@@ -169,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, {
@@ -178,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,
@@ -199,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, currentFilterFns)
-            : createDataColumn(table, column, currentFilterFns),
-        ),
-      ] as ColumnDef<D>[]),
+    () => [
+      ...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(
               {},
@@ -225,30 +219,31 @@ 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, {
-      //@ts-ignore
       filterFns: defaultFilterFNs,
-      getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
-      getCoreRowModel: getCoreRowModelSync(),
+      getCoreRowModel: getCoreRowModel(),
       getExpandedRowModel: getExpandedRowModel(),
-      getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
-      getGroupedRowModel: getGroupedRowModelSync(),
+      getFacetedRowModel: getFacetedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getGroupedRowModel: getGroupedRowModel(),
       getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModelSync(),
-      getSubRows: (originalRow: D) => originalRow.subRows,
+      getSortedRowModel: getSortedRowModel(),
+      getSubRows: (row) => (row as MRT_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,
@@ -264,18 +259,15 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
-    //@ts-ignore
     setCurrentEditingCell,
-    //@ts-ignore
     setCurrentEditingRow,
     setCurrentFilterFns,
-    //@ts-ignore
     setCurrentGlobalFilterFn,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
     setShowGlobalFilter,
-  };
+  } as MRT_TableInstance;
 
   useEffect(() => {
     if (typeof window === 'undefined' || !props.enablePersistentState) {

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,
 });