material-react-table 0.14.1 → 0.14.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.1",
+  "version": "0.14.4",
   "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_TableHeadCell.tsx

@@ -5,39 +5,39 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   dragRef?: Ref<HTMLButtonElement>;
   dropRef?: Ref<HTMLDivElement>;
   header: MRT_Header;
+  instance: MRT_TableInstance;
   isDragging?: boolean;
   previewRef?: Ref<HTMLTableCellElement>;
-  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({
   dragRef,
   dropRef,
   header,
+  instance,
   isDragging,
   previewRef,
-  instance,
 }) => {
   const {
     getState,
     options: {
       enableColumnActions,
-      enableColumnFilters,
       enableColumnOrdering,
       enableColumnResizing,
       enableGrouping,
+      enableMultiSort,
       muiTableHeadCellProps,
     },
   } = instance;
 
-  const { density } = getState();
+  const { density, showFilters } = getState();
 
   const { column } = header;
 
@@ -139,7 +139,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
-        verticalAlign: 'text-top',
+        userSelect: enableMultiSort ? 'none' : undefined,
+        verticalAlign:
+          columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && columnDefType !== 'group'
@@ -162,11 +164,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
             justifyContent:
               columnDefType === 'group' ? 'center' : 'space-between',
             opacity: isDragging ? 0.5 : 1,
+            position: 'relative',
             width: '100%',
           }}
         >
           <Box
-            onClick={() => column.toggleSorting()}
+            onClick={column.getToggleSortingHandler()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -183,14 +186,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
             {columnDefType === 'data' && column.getCanSort() && (
               <MRT_TableHeadCellSortLabel header={header} instance={instance} />
             )}
-            {columnDefType === 'data' &&
-              enableColumnFilters &&
-              column.getCanFilter() && (
-                <MRT_TableHeadCellFilterLabel
-                  header={header}
-                  instance={instance}
-                />
-              )}
+            {columnDefType === 'data' && column.getCanFilter() && (
+              <MRT_TableHeadCellFilterLabel
+                header={header}
+                instance={instance}
+              />
+            )}
           </Box>
           <Box sx={{ whiteSpace: 'nowrap' }}>
             {columnDefType === 'data' &&
@@ -205,7 +206,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             {(enableColumnActions || columnDef.enableColumnActions) &&
               columnDef.enableColumnActions !== false &&
               columnDefType !== 'group' && (
-                <MRT_ToggleColumnActionMenuButton
+                <MRT_TableHeadCellColumnActionsButton
                   header={header}
                   instance={instance}
                 />

package/src/{buttons/MRT_ToggleColumnActionMenuButton.tsx → head/MRT_TableHeadCellColumnActionsButton.tsx}

@@ -8,7 +8,7 @@ interface Props {
   instance: MRT_TableInstance;
 }
 
-export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
+export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
   header,
   instance,
 }) => {
@@ -66,7 +66,6 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
           {...iconButtonProps}
           sx={{
             height: '2rem',
-            mr: '2px',
             mt: '-0.2rem',
             opacity: 0.5,
             transition: 'opacity 0.2s',

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { Grow, IconButton, Tooltip } from '@mui/material';
 import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -14,72 +14,71 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
   const {
     getState,
     options: {
-      icons: { FilterAltIcon, FilterAltOffIcon },
+      icons: { FilterAltIcon },
       localization,
     },
-    setShowFilters,
   } = instance;
 
-  const { showFilters } = getState();
+  const { currentFilterFns } = getState();
 
   const { column } = header;
 
   const { columnDef } = column;
 
-  const filterFn = getState()?.currentFilterFns?.[header.id];
+  const filterFn = currentFilterFns?.[header.id];
 
-  const filterTooltip = !!column.getFilterValue()
-    ? localization.filteringByColumn
-        .replace('{column}', String(columnDef.header))
-        .replace(
-          '{filterType}',
-          filterFn instanceof Function
-            ? ''
-            : // @ts-ignore
-              localization[
-                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-              ],
-        )
-        .replace(
-          '{filterValue}',
-          `"${
-            Array.isArray(column.getFilterValue())
-              ? (column.getFilterValue() as [string, string]).join(
-                  `" ${localization.and} "`,
-                )
-              : (column.getFilterValue() as string)
-          }"`,
-        )
-        .replace('" "', '')
-    : localization.showHideFilters;
+  const filterTooltip = localization.filteringByColumn
+    .replace('{column}', String(columnDef.header))
+    .replace(
+      '{filterType}',
+      filterFn instanceof Function
+        ? ''
+        : // @ts-ignore
+          localization[
+            `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
+          ],
+    )
+    .replace(
+      '{filterValue}',
+      `"${
+        Array.isArray(column.getFilterValue())
+          ? (column.getFilterValue() as [string, string]).join(
+              `" ${localization.and} "`,
+            )
+          : (column.getFilterValue() as string)
+      }"`,
+    )
+    .replace('" "', '');
 
   return (
-    <Tooltip arrow placement="top" title={filterTooltip}>
-      <IconButton
-        disableRipple
-        onClick={(event: MouseEvent<HTMLButtonElement>) => {
-          event.stopPropagation();
-          setShowFilters(!showFilters);
-        }}
-        size="small"
-        sx={{
-          m: 0,
-          opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
-          p: '2px',
-          transition: 'all 0.2s ease-in-out',
-          transform: 'scale(0.66)',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 0.8,
-          },
-        }}
-      >
-        {showFilters && !column.getFilterValue() ? (
-          <FilterAltOffIcon />
-        ) : (
-          <FilterAltIcon />
-        )}
-      </IconButton>
-    </Tooltip>
+    <Grow
+      unmountOnExit
+      in={
+        (!!column.getFilterValue() && filterFn !== 'between') ||
+        (filterFn === 'between' && // @ts-ignore
+          (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
+      }
+    >
+      <span>
+        <Tooltip arrow placement="top" title={filterTooltip}>
+          <IconButton
+            disableRipple
+            onClick={(event: MouseEvent<HTMLButtonElement>) => {
+              event.stopPropagation();
+            }}
+            size="small"
+            sx={{
+              m: 0,
+              opacity: 0.8,
+              p: '2px',
+              transform: 'scale(0.66)',
+              width: '1.5ch',
+            }}
+          >
+            <FilterAltIcon />
+          </IconButton>
+        </Tooltip>
+      </span>
+    </Grow>
   );
 };

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -31,6 +31,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
+        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -32,6 +32,10 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, instance }) => {
             ? (column.getIsSorted() as 'asc' | 'desc')
             : undefined
         }
+        sx={{
+          width: '2ch',
+          transform: 'translateX(-0.5ch)',
+        }}
       />
     </Tooltip>
   );

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -47,7 +47,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
           ...commonToolbarStyles({ theme }),
           bottom: isFullScreen ? '0' : undefined,
           boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
+          left: 0,
           position: isFullScreen ? 'fixed' : 'relative',
+          right: 0,
           ...toolbarProps?.sx,
         } as any)
       }