material-react-table 0.16.0 → 0.16.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.0",
+  "version": "0.16.1",
   "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.",

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,7 +28,13 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onColumnVisibilityChanged },
+    options: {
+      enableColumnOrdering,
+      enableHiding,
+      enablePinning,
+      localization,
+      onColumnVisibilityChanged,
+    },
     setColumnOrder,
   } = instance;
 
@@ -85,35 +98,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>[];
   }, [

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