material-react-table 0.7.0-alpha.7 → 0.7.0

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,7 +35,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enableColumnPinning,
+      enablePinning,
       enableGrouping,
       enableHiding,
       enableSorting,
@@ -52,8 +52,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       },
       idPrefix,
       localization,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { column } = header;
@@ -245,7 +245,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem
-            divider={enableColumnPinning}
+            divider={enablePinning}
             key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -260,7 +260,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
-      {enableColumnPinning &&
+      {enablePinning &&
         column.getCanPin() && [
           <MenuItem
             disabled={column.getIsPinned() === 'left'}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -39,12 +39,9 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enabledGlobalFilterTypes,
-      localization,
-      setCurrentFilterTypes,
-      setCurrentGlobalFilterType,
-    },
+    options: { enabledGlobalFilterTypes, localization },
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
   } = tableInstance;
 
   const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onColumnHide },
+    options: { onToggleColumnVisibility },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -34,7 +34,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.({
+    onToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { alpha, Box, TableContainer, Theme } from '@mui/material';
 import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
@@ -36,7 +36,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     getRightTableWidth,
     getState,
     options: {
-      enableColumnPinning,
+      enablePinning,
       enableStickyHeader,
       idPrefix,
       muiTableContainerProps,
@@ -52,7 +52,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -85,7 +85,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+      {enablePinning && getIsSomeColumnsPinned() ? (
         <Box
           sx={{
             display: 'grid',

package/src/table/MRT_TableRoot.tsx

@@ -1,17 +1,19 @@
+import React, { useMemo, useState } from 'react';
 import {
-  columnFilterRowsFn,
-  createTable,
-  expandRowsFn,
-  functionalUpdate,
-  globalFilterRowsFn,
-  groupRowsFn,
-  paginateRowsFn,
   PaginationState,
-  sortRowsFn,
   Table,
-  useTable,
+  createTable,
+  functionalUpdate,
+  getColumnFilteredRowModelSync,
+  getExpandedRowModel,
+  getGlobalFilteredRowModelSync,
+  getGroupedRowModelSync,
+  getPaginationRowModel,
+  getSortedRowModelSync,
+  useTableInstance,
+  getCoreRowModelSync,
+  ColumnDef,
 } from '@tanstack/react-table';
-import React, { useMemo, useState } from 'react';
 import {
   MRT_ColumnInterface,
   MRT_FilterType,
@@ -52,10 +54,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showFilters, setShowFilters] = useState(
     props.initialState?.showFilters ?? false,
   );
-  const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearch ?? false,
+  const [showGlobalFilter, setShowGlobalFilter] = useState(
+    props.initialState?.showGlobalFilter ?? false,
   );
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: props.initialState?.pagination?.pageIndex ?? 0,
     pageSize: props.initialState?.pagination?.pageSize ?? 10,
@@ -71,7 +72,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         (c) => ({
           [c.id as string]:
             c.filter ??
-            props?.initialState?.columnFilters?.[c.id as any] ??
+            props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
             (!!c.filterSelectOptions?.length
               ? MRT_FILTER_TYPE.EQUALS
               : MRT_FILTER_TYPE.BEST_MATCH),
@@ -96,7 +97,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -109,7 +110,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ExpandButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -126,7 +127,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_SelectCheckbox
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -151,16 +152,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
-      table,
+      props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
-      props.enableRowActions,
       props.enableGrouping,
-      props.enableEditing,
+      props.enableRowActions,
       props.enableRowNumbers,
       props.enableRowSelection,
       props.enableSelectAll,
       props.localization,
+      table,
     ],
   );
 
@@ -173,14 +174,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ? createGroup(table, column, currentFilterTypes)
             : createDataColumn(table, column, currentFilterTypes),
         ),
-      ] as any),
+      ] as ColumnDef<D>[]),
     [table, props.columns, currentFilterTypes],
   );
 
-  const data = useMemo(
+  const data: D['Row'][] = useMemo(
     () =>
       props.isLoading && !props.data.length
-        ? [...Array(10).fill(null)].map((_) =>
+        ? [...Array(10).fill(null)].map(() =>
             Object.assign(
               {},
               ...getAllLeafColumnDefs(
@@ -195,45 +196,48 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const tableInstance: MRT_TableInstance<{}> = useTable(table, {
-    ...props,
-    columnFilterRowsFn: columnFilterRowsFn,
-    columns,
-    data,
-    debugAll: false,
-    expandRowsFn: expandRowsFn,
-    //@ts-ignore
-    filterTypes: defaultFilterFNs,
-    getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
-    globalFilterRowsFn: globalFilterRowsFn,
-    globalFilterType: currentGlobalFilterType,
-    groupRowsFn: groupRowsFn,
-    idPrefix,
-    onPaginationChange: (updater: any) =>
-      setPagination((old) => functionalUpdate(updater, old)),
-    paginateRowsFn: paginateRowsFn,
+  const tableInstance: MRT_TableInstance<{}> = {
+    ...useTableInstance(table, {
+      ...props,
+      columns,
+      data,
+      //@ts-ignore
+      filterTypes: defaultFilterFNs,
+      getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
+      getCoreRowModel: getCoreRowModelSync(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
+      getGroupedRowModel: getGroupedRowModelSync(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModelSync(),
+      getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+      globalFilterType: currentGlobalFilterType,
+      idPrefix,
+      //@ts-ignore
+      initialState: props.initialState,
+      onPaginationChange: (updater: any) =>
+        setPagination((old) => functionalUpdate(updater, old)),
+      state: {
+        currentEditingRow,
+        currentFilterTypes,
+        currentGlobalFilterType,
+        isDensePadding,
+        isFullScreen,
+        //@ts-ignore
+        pagination,
+        showFilters,
+        showGlobalFilter,
+        ...props.state,
+      },
+    }),
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
-    setShowSearch,
-    sortRowsFn,
-    state: {
-      ...props.initialState,
-      currentEditingRow,
-      currentFilterTypes,
-      currentGlobalFilterType,
-      isDensePadding,
-      isFullScreen,
-      //@ts-ignore
-      pagination,
-      showFilters,
-      showSearch,
-      ...props.state,
-    },
-  });
+    setShowGlobalFilter,
+  };
 
   return <MRT_TablePaper tableInstance={tableInstance} />;
 };

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -4,7 +4,7 @@ import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButto
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
-import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
+import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -15,10 +15,11 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
   const {
     options: {
       enableColumnFilters,
-      enableHiding,
       enableDensePaddingToggle,
-      enableGlobalFilter,
+      enableFilters,
       enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
       renderToolbarInternalActions,
     },
   } = tableInstance;
@@ -31,7 +32,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
           MRT_ShowHideColumnsButton,
           MRT_ToggleDensePaddingButton,
           MRT_ToggleFiltersButton,
-          MRT_ToggleSearchButton,
+          MRT_ToggleGlobalFilterButton,
           tableInstance,
         })}
       </>
@@ -42,15 +43,13 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
     <Box
       sx={{
         display: 'flex',
-        gap: '0.5rem',
         alignItems: 'center',
-        p: '0 0.5rem',
       }}
     >
-      {enableGlobalFilter && (
-        <MRT_ToggleSearchButton tableInstance={tableInstance} />
+      {enableFilters && enableGlobalFilter && (
+        <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
       )}
-      {enableColumnFilters && (
+      {enableFilters && enableColumnFilters && (
         <MRT_ToggleFiltersButton tableInstance={tableInstance} />
       )}
       {enableHiding && (