material-react-table 0.15.1 → 0.16.2

package/dist/table/MRT_TableRoot.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/dist/utils.d.ts

@@ -1,16 +1,16 @@
-import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
-    [key: string]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
+    [key: string]: import("@tanstack/table-core").FilterFnOption<import("@tanstack/table-core").TableGenerics>;
 }) => ColumnDef<D>;
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
-    [key: string]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
+    [key: string]: import("@tanstack/table-core").FilterFnOption<import("@tanstack/table-core").TableGenerics>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enableColumnFilterChangeMode" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnFilterChangeMode" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
-export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;
+export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: (props: MaterialReactTableProps<any>) => string[];
 export declare const getTrailingDisplayColumnIds: (props: MaterialReactTableProps<any>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: (props: MaterialReactTableProps<any>) => string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.1",
+  "version": "0.16.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -56,12 +56,12 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.18.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.5",
+    "@mui/material": "^5.8.6",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -77,8 +77,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -97,8 +97,8 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.9",
+    "@tanstack/match-sorter-utils": "8.0.13",
+    "@tanstack/react-table": "8.0.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-virtual": "^2.10.4"

package/src/MaterialReactTable.tsx

@@ -30,6 +30,8 @@ import {
   Cell,
   Column,
   ColumnDef,
+  ColumnOrderState,
+  ColumnPinningState,
   FilterFn,
   FilterFnOption,
   Header,
@@ -205,9 +207,9 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
+  enableColumnFilterChangeMode?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
-  enableColumnFilterChangeMode?: boolean;
   enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
   filterFn?: MRT_FilterFn;
   filterSelectOptions?: (string | { text: string; value: string })[];
@@ -646,6 +648,20 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       filterValue: any;
       instance: MRT_TableInstance<D>;
     }) => void;
+    onColumnOrderChanged?: ({
+      columnOrder,
+      instance,
+    }: {
+      columnOrder: ColumnOrderState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnPinningChanged?: ({
+      columnPinning,
+      instance,
+    }: {
+      columnPinning: ColumnPinningState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
     onColumnVisibilityChanged?: ({
       column,
       columnVisibility,

package/src/body/MRT_TableBody.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
   const {
-    getPaginationRowModel,
+    getRowModel,
     getPrePaginationRowModel,
     getState,
     options: {
@@ -51,13 +51,13 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
     }
 
     return enablePagination
-      ? getPaginationRowModel().rows
+      ? getRowModel().rows
       : getPrePaginationRowModel().rows;
   }, [
     enableGlobalFilterRankedResults,
     (enableGlobalFilterRankedResults && globalFilter) || !enablePagination
       ? getPrePaginationRowModel().rows
-      : getPaginationRowModel().rows,
+      : getRowModel().rows,
     globalFilter,
   ]);
 

package/src/body/MRT_TableBodyCell.tsx

@@ -53,8 +53,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const mTableCellBodyProps =

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -10,11 +10,7 @@ interface Props {
 }
 
 export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
-  const {
-    getState,
-    options: {},
-    setColumnOrder,
-  } = instance;
+  const { getState, setColumnOrder } = instance;
 
   const { columnOrder } = getState();
 
@@ -22,8 +18,10 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -36,7 +36,6 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
-        zIndex: 2000,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1,

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -9,22 +9,9 @@ interface Props {
 }
 
 export const MRT_FilterRangeFields: FC<Props> = ({ header, instance }) => {
-  const {
-    options: { localization },
-  } = instance;
-
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr auto 5fr' }}>
+    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} inputIndex={0} instance={instance} />
-      <Box
-        sx={{
-          width: '100%',
-          minWidth: '5ch',
-          textAlign: 'center',
-        }}
-      >
-        {localization.to}
-      </Box>
       <MRT_FilterTextField header={header} inputIndex={1} instance={instance} />
     </Box>
   );

package/src/localization.ts

@@ -55,11 +55,11 @@ export interface MRT_Localization {
   sortedByColumnAsc: string;
   sortedByColumnDesc: string;
   thenBy: string;
-  to: string;
   toggleDensity: string;
   toggleFullScreen: string;
   toggleSelectAll: string;
   toggleSelectRow: string;
+  toggleVisibility: string;
   ungroupByColumn: string;
   unpin: string;
   unpinAll: string;
@@ -124,11 +124,11 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
-  to: 'to',
   toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
+  toggleVisibility: 'Toggle visibility',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
   unpinAll: 'Unpin all',

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,6 +1,13 @@
 import React, { FC, Ref } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
+import {
+  Box,
+  FormControlLabel,
+  MenuItem,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../utils';
@@ -21,18 +28,25 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onColumnVisibilityChanged },
+    options: {
+      enableColumnOrdering,
+      enableHiding,
+      enablePinning,
+      localization,
+    },
     setColumnOrder,
   } = instance;
 
-  const { columnOrder, columnVisibility } = getState();
+  const { columnOrder } = getState();
 
   const { columnDef, columnDefType } = column;
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [, dragRef, previewRef] = useDrag({
@@ -56,11 +70,6 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnVisibilityChanged?.({
-      column,
-      columnVisibility,
-      instance,
-    });
   };
 
   return (
@@ -85,35 +94,56 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
         >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
-            columnDef.enableColumnOrdering !== false &&
-            !allColumns.some((col) => col.columnDefType === 'group') && (
+            !allColumns.some((col) => col.columnDefType === 'group') &&
+            (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
                 ref={dragRef as Ref<HTMLButtonElement>}
                 instance={instance}
               />
-            )}
-          {!isSubMenu && column.getCanPin() && (
-            <MRT_ColumnPinningButtons column={column} instance={instance} />
-          )}
-          <FormControlLabel
-            componentsProps={{
-              typography: {
-                sx: {
-                  mb: 0,
-                  opacity: columnDefType !== 'display' ? 1 : 0.5,
+            ) : (
+              <Box sx={{ width: '28px' }} />
+            ))}
+          {enablePinning &&
+            !isSubMenu &&
+            (column.getCanPin() ? (
+              <MRT_ColumnPinningButtons column={column} instance={instance} />
+            ) : (
+              <Box sx={{ width: '70px' }} />
+            ))}
+          {enableHiding ? (
+            <FormControlLabel
+              componentsProps={{
+                typography: {
+                  sx: {
+                    mb: 0,
+                    opacity: columnDefType !== 'display' ? 1 : 0.5,
+                  },
                 },
-              },
-            }}
-            checked={switchChecked}
-            control={<Switch />}
-            disabled={
-              (isSubMenu && switchChecked) ||
-              !column.getCanHide() ||
-              column.getIsGrouped()
-            }
-            label={columnDef.header}
-            onChange={() => handleToggleColumnHidden(column)}
-          />
+              }}
+              checked={switchChecked}
+              control={
+                <Tooltip
+                  arrow
+                  enterDelay={1000}
+                  enterNextDelay={1000}
+                  title={localization.toggleVisibility}
+                >
+                  <Switch />
+                </Tooltip>
+              }
+              disabled={
+                (isSubMenu && switchChecked) ||
+                !column.getCanHide() ||
+                column.getIsGrouped()
+              }
+              label={columnDef.header}
+              onChange={() => handleToggleColumnHidden(column)}
+            />
+          ) : (
+            <Typography sx={{ alignSelf: 'center' }}>
+              {columnDef.header}
+            </Typography>
+          )}
         </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column, i) => (

package/src/table/MRT_TablePaper.tsx

@@ -42,6 +42,9 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
         sx={{
           transition: 'all 0.2s ease-in-out',
           ...tablePaperProps?.sx,
+        }}
+        style={{
+          ...tablePaperProps?.style,
           height: isFullScreen ? '100vh' : undefined,
           margin: isFullScreen ? '0' : undefined,
           maxHeight: isFullScreen ? '100vh' : undefined,

package/src/table/MRT_TableRoot.tsx

@@ -168,7 +168,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-expand',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
       columnOrder.includes('mrt-select') &&
         createDisplayColumn(table, {
@@ -183,7 +183,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-select',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
       columnOrder.includes('mrt-row-numbers') &&
         createDisplayColumn(table, {
@@ -193,7 +193,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-row-numbers',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
     ].filter(Boolean) as MRT_ColumnDef<D>[];
   }, [
@@ -310,6 +310,30 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     instance,
   ]);
 
+  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

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -16,11 +16,13 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
   const {
     options: {
       enableColumnFilters,
+      enableColumnOrdering,
       enableDensityToggle,
       enableFilters,
       enableFullScreenToggle,
       enableGlobalFilter,
       enableHiding,
+      enablePinning,
       positionGlobalFilter,
       renderToolbarInternalActions,
     },
@@ -52,7 +54,9 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
           {enableFilters && enableColumnFilters && (
             <MRT_ToggleFiltersButton instance={instance} />
           )}
-          {enableHiding && <MRT_ShowHideColumnsButton instance={instance} />}
+          {(enableHiding || enableColumnOrdering || enablePinning) && (
+            <MRT_ShowHideColumnsButton instance={instance} />
+          )}
           {enableDensityToggle && (
             <MRT_ToggleDensePaddingButton instance={instance} />
           )}

package/src/utils.ts

@@ -1,9 +1,4 @@
-import {
-  ColumnDef,
-  ColumnOrderState,
-  Table,
-  Updater,
-} from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -67,8 +62,7 @@ export const reorderColumn = (
   movingColumn: MRT_Column,
   receivingColumn: MRT_Column,
   columnOrder: ColumnOrderState,
-  setColumnOrder: (updater: Updater<ColumnOrderState>) => void,
-) => {
+): ColumnOrderState => {
   if (movingColumn.getCanPin()) {
     movingColumn.pin(receivingColumn.getIsPinned());
   }
@@ -77,7 +71,7 @@ export const reorderColumn = (
     0,
     columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
   );
-  setColumnOrder([...columnOrder]);
+  return [...columnOrder];
 };
 
 export const getLeadingDisplayColumnIds = (