material-react-table 1.8.4 → 1.9.0

package/src/body/MRT_TableBodyRow.tsx

@@ -32,7 +32,6 @@ export const MRT_TableBodyRow = ({
   virtualRow,
 }: Props) => {
   const {
-    getIsSomeColumnsPinned,
     getState,
     options: {
       enableRowOrdering,
@@ -63,7 +62,6 @@ export const MRT_TableBodyRow = ({
     <>
       <TableRow
         data-index={virtualRow?.index}
-        hover
         onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
@@ -87,7 +85,7 @@ export const MRT_TableBodyRow = ({
           width: '100%',
           '&:hover td': {
             backgroundColor:
-              tableRowProps?.hover !== false && getIsSomeColumnsPinned()
+              tableRowProps?.hover !== false
                 ? theme.palette.mode === 'dark'
                   ? `${lighten(theme.palette.background.default, 0.12)}`
                   : `${darken(theme.palette.background.default, 0.05)}`
@@ -107,7 +105,6 @@ export const MRT_TableBodyRow = ({
             : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
-            enableHover: tableRowProps?.hover !== false,
             key: cell.id,
             measureElement: columnVirtualizer?.measureElement,
             numRows,

package/src/buttons/MRT_ExpandButton.tsx

@@ -3,12 +3,15 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
-interface Props {
-  row: MRT_Row;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = ({ row, table }: Props) => {
+export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
+  row,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,7 +1,7 @@
 import React, { DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import type { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import type { IconButtonProps } from '@mui/material/IconButton';
 import type { MRT_TableInstance } from '..';
 
 interface Props<TData extends Record<string, any> = {}> {

package/src/column.utils.ts

@@ -264,7 +264,9 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
+      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+          header?.id ?? column.id,
+        )}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -337,10 +339,4 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
-export const parseCSSVarId = (id: string) =>
-  id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')
-    .replaceAll('+', '_')
-    .replaceAll('(', '_')
-    .replaceAll(')', '_');
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');

package/src/head/MRT_TableHeadCell.tsx

@@ -213,10 +213,14 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
+                minWidth: '5ch',
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
+                '&:hover': {
+                  textOverflow: 'clip',
+                },
               }}
               title={columnDefType === 'data' ? columnDef.header : undefined}
             >

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -19,6 +19,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
 
   return (
     <Box
+      className="Mui-TableHeadCell-ResizeHandle-Wrapper"
       onDoubleClick={() => {
         setColumnSizingInfo((old) => ({
           ...old,
@@ -30,7 +31,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
       onTouchStart={header.getResizeHandler()}
       sx={(theme) => ({
         cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.5rem' : '-1rem',
+        mr: density === 'compact' ? '-0.75rem' : '-1rem',
         position: 'absolute',
         right: '1px',
         px: '4px',
@@ -47,6 +48,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
       }}
     >
       <Divider
+        className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
         sx={{

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_Header, MRT_TableInstance } from '..';
@@ -16,6 +17,7 @@ export const MRT_TableHeadCellSortLabel = ({
   tableCellProps,
 }: Props) => {
   const {
+    getState,
     options: {
       icons: { ArrowDownwardIcon },
       localization,
@@ -23,6 +25,7 @@ export const MRT_TableHeadCellSortLabel = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
+  const { sorting } = getState();
 
   const sortTooltip = column.getIsSorted()
     ? column.getIsSorted() === 'desc'
@@ -32,28 +35,33 @@ export const MRT_TableHeadCellSortLabel = ({
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>
-      <TableSortLabel
-        aria-label={sortTooltip}
-        active={!!column.getIsSorted()}
-        direction={
-          column.getIsSorted()
-            ? (column.getIsSorted() as 'asc' | 'desc')
-            : undefined
-        }
-        sx={{
-          flex: '0 0',
-          width: '2.3ch',
-          transform:
-            tableCellProps?.align !== 'right'
-              ? 'translateX(-0.5ch)'
-              : undefined,
-        }}
-        IconComponent={ArrowDownwardIcon}
-        onClick={(e) => {
-          e.stopPropagation();
-          header.column.getToggleSortingHandler()?.(e);
-        }}
-      />
+      <Badge
+        badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
+        overlap="circular"
+      >
+        <TableSortLabel
+          aria-label={sortTooltip}
+          active={!!column.getIsSorted()}
+          direction={
+            column.getIsSorted()
+              ? (column.getIsSorted() as 'asc' | 'desc')
+              : undefined
+          }
+          sx={{
+            flex: '0 0',
+            width: '2.4ch',
+            transform:
+              tableCellProps?.align !== 'right'
+                ? 'translateX(-0.5ch)'
+                : undefined,
+          }}
+          IconComponent={ArrowDownwardIcon}
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
+        />
+      </Badge>
     </Tooltip>
   );
 };

package/src/index.tsx

@@ -5,38 +5,42 @@ export * from './MaterialReactTable';
 import type { MRT_Icons } from './icons';
 export type { MRT_Icons };
 
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons';
+import { MRT_ExpandButton } from './buttons/MRT_ExpandButton';
 import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
 import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 
 export {
+  MRT_BottomToolbar,
   MRT_CopyButton,
   MRT_EditActionButtons,
+  MRT_ExpandButton,
   MRT_FilterOptionMenu,
   MRT_FullScreenToggleButton,
+  MRT_GrabHandleButton,
   MRT_GlobalFilterTextField,
   MRT_ShowHideColumnsButton,
   MRT_TablePagination,
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_ToggleRowActionMenuButton,
   MRT_ToolbarAlertBanner,
   MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
-  MRT_ToggleRowActionMenuButton,
   MRT_TopToolbar,
-  MRT_BottomToolbar,
 };

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -156,9 +156,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         [header.id]: option,
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
-        if (currentFilterValue !== ' ') {
-          column.setFilterValue(' ');
-        }
+        column.setFilterValue(' ');
       } else if (
         columnDef?.filterVariant === 'multi-select' ||
         ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(

package/src/menus/MRT_RowActionMenu.tsx

@@ -39,6 +39,7 @@ export const MRT_RowActionMenu = ({
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
+      onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -98,8 +98,9 @@ export const MRT_ShowHideColumnsMenuItems = <
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
+          outlineOffset: '-2px',
           outline: isDragging
-            ? `1px dashed ${theme.palette.divider}`
+            ? `2px dashed ${theme.palette.divider}`
             : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',

package/src/table/MRT_Table.tsx

@@ -59,9 +59,9 @@ export const MRT_Table = ({ table }: Props) => {
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
-        header.column.getSize();
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);