material-react-table 0.14.3 → 0.14.4

package/package.json

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

@@ -12,32 +12,32 @@ 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'
@@ -167,7 +169,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           }}
         >
           <Box
-            onClick={() => column.toggleSorting()}
+            onClick={column.getToggleSortingHandler()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -184,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' &&

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,73 +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,
-          },
-          width: '1.5ch',
-        }}
-      >
-        {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>
   );
 };