release v2.9.0

KevinVandy · Jan 24, 2024 · 7fbe53e · 7fbe53e · vercel · Jan 24, 2024
1 parent 1cfdea4
commit 7fbe53e
Show file tree

Hide file tree

Showing 22 changed files with 156 additions and 91 deletions.
diff --git a/apps/material-react-table-docs/examples/advanced/sandbox/src/JS.js b/apps/material-react-table-docs/examples/advanced/sandbox/src/JS.js
@@ -137,7 +137,14 @@ const Example = () => {
     enableFacetedValues: true,
     enableRowActions: true,
     enableRowSelection: true,
-    initialState: { showColumnFilters: true, showGlobalFilter: true },
+    initialState: {
+      showColumnFilters: true,
+      showGlobalFilter: true,
+      columnPinning: {
+        left: ['mrt-row-expand', 'mrt-row-select'],
+        right: ['mrt-row-actions'],
+      },
+    },
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
     muiSearchTextFieldProps: {
@@ -153,9 +160,13 @@ const Example = () => {
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
+          alignItems: 'center',
           display: 'flex',
           justifyContent: 'space-around',
-          alignItems: 'center',
+          left: '30px',
+          maxWidth: '1000px',
+          position: 'sticky',
+          width: '100%',
         }}
       >
         <img

diff --git a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
@@ -153,6 +153,10 @@ const Example = () => {
     initialState: {
       showColumnFilters: true,
       showGlobalFilter: true,
+      columnPinning: {
+        left: ['mrt-row-expand', 'mrt-row-select'],
+        right: ['mrt-row-actions'],
+      },
     },
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
@@ -169,9 +173,13 @@ const Example = () => {
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
+          alignItems: 'center',
           display: 'flex',
           justifyContent: 'space-around',
-          alignItems: 'center',
+          left: '30px',
+          maxWidth: '1000px',
+          position: 'sticky',
+          width: '100%',
         }}
       >
         <img

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,10 +12,10 @@ import Head from 'next/head';
 
 ### Version 2
 
-#### Version 2.9.0 - Coming Soon
+#### Version 2.9.0 - 2024-01-24
 
 - Added new `renderCaption` table option to allow for a `<caption>` element to be rendered within the table
-- Fixed row hover opacity styles for pinned columns and selected rows
+- Fixed row hover opacity style issues for pinned columns and selected rows with `::before` and `::after` pseudo elements in pinned cells
 - Standardized `data-index`, `data-pinned`, and `data-selected` attributes on body rows, head cells, body cells, and footer cells where applicable
 - Column virtualization performance optimizations
 

diff --git a/apps/material-react-table-docs/pages/migrating-to-v2.mdx b/apps/material-react-table-docs/pages/migrating-to-v2.mdx
@@ -29,6 +29,7 @@ This should be an easy to moderate upgrade for most developers. The only breakin
 10. Improved column sizing and layout modes for column resizing features
 11. All internal MRT components are now exported for custom headless use cases
 12. New optional `createMRTColumnHelper` utility function for better `TValue`/`cell.getValue()` type inference
+13. Many more features are compatible with virtualization
 
 See the full [changelog](/changelog#version-2.0.0---10-27-2023) for more details.
 

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.8.0",
+  "version": "2.9.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -263,7 +263,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         ...getCommonMRTCellStyles({
-          cell,
           column,
           table,
           tableCellProps,

diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
@@ -19,7 +19,12 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
+import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  getCommonPinnedCellStyles,
+  getMRTTheme,
+  pinnedBeforeAfterStyles,
+} from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> {
@@ -77,7 +82,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
     columnVirtualizer ?? {};
 
-  const isPinned = enableRowPinning && row.getIsPinned();
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
   const isDraggingRow = draggingRow?.id === row.id;
   const isHoveredRow = hoveredRow?.id === row.id;
 
@@ -133,24 +139,35 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     selectedRowBackgroundColor,
   } = getMRTTheme(table, theme);
 
+  const cellHighlightColor = isRowSelected
+    ? selectedRowBackgroundColor
+    : isRowPinned
+      ? pinnedRowBackgroundColor
+      : undefined;
+
+  const cellHighlightColorHover =
+    tableRowProps?.hover !== false
+      ? isRowSelected
+        ? cellHighlightColor
+        : theme.palette.mode === 'dark'
+          ? `${lighten(baseBackgroundColor, 0.3)}`
+          : `${darken(baseBackgroundColor, 0.3)}`
+      : undefined;
+
   return (
     <>
       <TableRow
         data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
-        data-pinned={!!isPinned || undefined}
-        data-selected={
-          row?.getIsSelected() ||
-          (row.getCanSelectSubRows() && row?.getIsAllSubRowsSelected()) ||
-          undefined
-        }
+        data-pinned={!!isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
             rowVirtualizer?.measureElement(node);
           }
         }}
-        selected={row.getIsSelected()}
+        selected={isRowSelected}
         {...tableRowProps}
         style={{
           transform: virtualRow
@@ -160,41 +177,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         }}
         sx={(theme: Theme) => ({
           '&:hover td': {
-            backgroundColor:
-              tableRowProps?.hover !== false
-                ? row.getIsSelected()
-                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
-                  : theme.palette.mode === 'dark'
-                    ? `${lighten(baseBackgroundColor, 0.05)}`
-                    : `${darken(baseBackgroundColor, 0.05)}`
+            '&:after': {
+              backgroundColor: cellHighlightColorHover
+                ? alpha(cellHighlightColorHover, 0.3)
                 : undefined,
+              ...pinnedBeforeAfterStyles,
+            },
           },
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
-            !virtualRow && bottomPinnedIndex !== undefined && isPinned
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
               ? `${
                   bottomPinnedIndex * rowHeight +
                   (enableStickyFooter ? tableFooterHeight - 1 : 0)
                 }px`
               : undefined,
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-          opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
+          opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
           position: virtualRow
             ? 'absolute'
-            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
               : undefined,
           td: {
-            backgroundColor: row.getIsSelected()
-              ? selectedRowBackgroundColor
-              : isPinned
-                ? pinnedRowBackgroundColor
-                : undefined,
+            '&:after': {
+              backgroundColor: cellHighlightColor,
+              ...pinnedBeforeAfterStyles,
+            },
+            ...getCommonPinnedCellStyles({ table, theme }),
           },
           top: virtualRow
             ? 0
-            : topPinnedIndex !== undefined && isPinned
+            : topPinnedIndex !== undefined && isRowPinned
               ? `${
                   topPinnedIndex * rowHeight +
                   (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
@@ -203,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isPinned
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 2
               : undefined,
           ...(sx as any),

diff --git a/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx b/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx
@@ -8,19 +8,18 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
-  selectAll?: boolean;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
-  selectAll,
   staticRowIndex,
   table,
   ...rest
@@ -39,6 +38,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   } = table;
   const { density, isLoading } = getState();
 
+  const selectAll = !row;
+
   const checkboxProps = {
     ...(!row
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
@@ -92,10 +93,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     'aria-label': selectAll
       ? localization.toggleSelectAll
       : localization.toggleSelectRow,
-    checked: selectAll
-      ? allRowsSelected
-      : row?.getIsSelected() ||
-        (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
+    checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {

diff --git a/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
@@ -139,7 +139,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
                 {enableRowSelection &&
                   enableSelectAll &&
                   positionToolbarAlertBanner === 'head-overlay' && (
-                    <MRT_SelectCheckbox selectAll table={table} />
+                    <MRT_SelectCheckbox table={table} />
                   )}{' '}
                 {selectedAlert}
               </Box>

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
@@ -28,6 +28,7 @@ export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'actions',
       id: 'mrt-row-actions',
+      size: 70,
       tableOptions,
     }),
   };

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
@@ -29,6 +29,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'move',
       id: 'mrt-row-drag',
+      size: 60,
       tableOptions,
     }),
   };

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
@@ -86,9 +86,11 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
       id: 'mrt-row-expand',
       size:
         groupedColumnMode === 'remove'
-          ? defaultColumn?.size
+          ? defaultColumn?.size ?? 180
           : renderDetailPanel
-            ? 60
+            ? enableExpandAll
+              ? 60
+              : 70
             : 100,
       tableOptions,
     }),

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
@@ -30,6 +30,7 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'rowNumbers',
       id: 'mrt-row-numbers',
+      size: 50,
       tableOptions,
     }),
   };

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
@@ -24,6 +24,7 @@ export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'pin',
       id: 'mrt-row-pin',
+      size: 60,
       tableOptions,
     }),
   };

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
@@ -28,12 +28,13 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
     ),
     Header:
       enableSelectAll && enableMultiRowSelection
-        ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
         : undefined,
     grow: false,
     ...defaultDisplayColumnProps({
       header: 'select',
       id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
       tableOptions,
     }),
   };

diff --git a/packages/material-react-table/src/utils/displayColumn.utils.ts b/packages/material-react-table/src/utils/displayColumn.utils.ts
@@ -10,12 +10,12 @@ import { getAllLeafColumnDefs, getColumnId } from './column.utils';
 export function defaultDisplayColumnProps<TData extends MRT_RowData>({
   header,
   id,
-  size = 60,
+  size,
   tableOptions,
 }: {
   header?: keyof MRT_Localization;
   id: MRT_DisplayColumnIds;
-  size?: number;
+  size: number;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }) {
   const { defaultDisplayColumn, displayColumnDefOptions, localization } =

diff --git a/packages/material-react-table/src/utils/row.utils.ts b/packages/material-react-table/src/utils/row.utils.ts
@@ -1,4 +1,25 @@
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const { options: enableRowSelection } = table;
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
 
 export const getCanRankRows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,