material-react-table 0.7.0-alpha.10 → 0.7.0-alpha.11

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.10",
+  "version": "0.7.0-alpha.11",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -60,8 +60,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
     "@faker-js/faker": "^6.1.2",
-    "@mui/icons-material": "^5.6.1",
-    "@mui/material": "^5.6.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.2",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
@@ -74,7 +74,7 @@
     "@storybook/react": "^6.4.22",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^8.2.5",
     "eslint": "^8.13.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.28",
+    "@tanstack/react-table": "^8.0.0-alpha.30",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -103,18 +103,18 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     idPrefix: string;
     filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
-    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-    setCurrentFilterTypes: Dispatch<
-      SetStateAction<{
-        [key: string]: MRT_FilterType;
-      }>
-    >;
-    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
-    setIsDensePadding: Dispatch<SetStateAction<boolean>>;
-    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
-    setShowSearch: Dispatch<SetStateAction<boolean>>;
   };
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentFilterTypes: Dispatch<
+    SetStateAction<{
+      [key: string]: MRT_FilterType;
+    }>
+  >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  setShowSearch: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
@@ -329,16 +329,15 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
-    enableColumnPinning?: boolean;
     enableDensePaddingToggle?: boolean;
+    enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
-    enableStickyHeader?: boolean;
-    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
+    enableStickyHeader?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
@@ -348,8 +347,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isReloading?: boolean;
     isLoading?: boolean;
+    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -692,13 +691,16 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   };
 
 export default <D extends Record<string, any> = {}>({
+  autoResetExpanded = false,
   enableColumnActions = true,
   enableColumnFilters = true,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
+  enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
   enableHiding = true,
+  enableMultiRowSelection = true,
   enablePagination = true,
   enableSelectAll = true,
   enableSorting = true,
@@ -712,13 +714,16 @@ export default <D extends Record<string, any> = {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
+    autoResetExpanded={autoResetExpanded}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
+    enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
     enableHiding={enableHiding}
+    enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}

package/src/body/MRT_TableBodyCell.tsx

@@ -15,7 +15,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getState,
     options: {
       enableClickToCopy,
-      enableColumnPinning,
+      enablePinning,
       enableEditing,
       isLoading,
       muiTableBodyCellProps,
@@ -73,7 +73,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
             : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace:
-          isDensePadding || (enableColumnPinning && getIsSomeColumnsPinned())
+          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
             ? 'nowrap'
             : 'normal',
         //@ts-ignore

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,8 +15,8 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
       icons: { CancelIcon, SaveIcon },
       localization,
       onEditSubmit,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,8 +15,8 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      setIsFullScreen,
     },
+    setIsFullScreen,
   } = tableInstance;
 
   const { isFullScreen } = getState();

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,8 +15,8 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      setIsDensePadding,
     },
+    setIsDensePadding,
   } = tableInstance;
 
   const { isDensePadding } = getState();

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,8 +15,8 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { showFilters } = getState();

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -32,8 +32,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
       localization,
       renderRowActionMenuItems,
       renderRowActions,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -17,8 +17,8 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      setShowSearch,
     },
+    setShowSearch,
   } = tableInstance;
 
   const { showSearch } = getState();

package/src/head/MRT_TableHeadCell.tsx

@@ -30,8 +30,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       icons: { FilterAltIcon, FilterAltOff },
       localization,
       muiTableHeadCellProps,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { isDensePadding, showFilters } = getState();

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,11 +16,8 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: {
-      enableEditing,
-      muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow,
-    },
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const [value, setValue] = useState(cell.value);

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,8 +32,8 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       idPrefix,
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes,
     },
+    setCurrentFilterTypes,
   } = tableInstance;
 
   const { column } = header;

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/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

@@ -150,16 +150,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,
     ],
   );
 
@@ -176,10 +176,10 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [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(
@@ -194,25 +194,39 @@ 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,
-    //@ts-ignore
-    initialState: props.initialState,
-    onPaginationChange: (updater: any) =>
-      setPagination((old) => functionalUpdate(updater, old)),
-    paginateRowsFn: paginateRowsFn,
+  const tableInstance: MRT_TableInstance<{}> = {
+    ...useTable(table, {
+      ...props,
+      columnFilterRowsFn: columnFilterRowsFn,
+      columns,
+      data,
+      expandRowsFn: expandRowsFn,
+      //@ts-ignore
+      filterTypes: defaultFilterFNs,
+      getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+      globalFilterRowsFn: globalFilterRowsFn,
+      globalFilterType: currentGlobalFilterType,
+      groupRowsFn: groupRowsFn,
+      idPrefix,
+      //@ts-ignore
+      initialState: props.initialState,
+      onPaginationChange: (updater: any) =>
+        setPagination((old) => functionalUpdate(updater, old)),
+      paginateRowsFn: paginateRowsFn,
+      sortRowsFn,
+      state: {
+        currentEditingRow,
+        currentFilterTypes,
+        currentGlobalFilterType,
+        isDensePadding,
+        isFullScreen,
+        //@ts-ignore
+        pagination,
+        showFilters,
+        showSearch,
+        ...props.state,
+      },
+    }),
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
@@ -220,20 +234,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setIsFullScreen,
     setShowFilters,
     setShowSearch,
-    sortRowsFn,
-    state: {
-      currentEditingRow,
-      currentFilterTypes,
-      currentGlobalFilterType,
-      isDensePadding,
-      isFullScreen,
-      //@ts-ignore
-      pagination,
-      showFilters,
-      showSearch,
-      ...props.state,
-    },
-  });
+  };
 
   return <MRT_TablePaper tableInstance={tableInstance} />;
 };

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -15,10 +15,11 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
   const {
     options: {
       enableColumnFilters,
-      enableHiding,
       enableDensePaddingToggle,
-      enableGlobalFilter,
+      enableFilters,
       enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
       renderToolbarInternalActions,
     },
   } = tableInstance;
@@ -47,10 +48,10 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
         p: '0 0.5rem',
       }}
     >
-      {enableGlobalFilter && (
+      {enableFilters && enableGlobalFilter && (
         <MRT_ToggleSearchButton tableInstance={tableInstance} />
       )}
-      {enableColumnFilters && (
+      {enableFilters && enableColumnFilters && (
         <MRT_ToggleFiltersButton tableInstance={tableInstance} />
       )}
       {enableHiding && (