material-react-table 0.37.0 → 0.37.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.37.0",
+  "version": "0.37.1",
   "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.",
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.4.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
+    "@mui/material": "^5.10.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -71,14 +71,14 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.77.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -107,6 +107,16 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
+export const showExpandColumn = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
+  grouping?: GroupingState,
+) =>
+  !!(
+    props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || grouping?.length)) ||
+    props.renderDetailPanel
+  );
+
 export const getLeadingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
@@ -119,9 +129,7 @@ export const getLeadingDisplayColumnIds = <
         ['row', 'modal'].includes(props.editingMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
-      (props.enableExpanding ||
-        props.enableGrouping ||
-        props.renderDetailPanel) &&
+      showExpandColumn(props) &&
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
@@ -137,9 +145,7 @@ export const getTrailingDisplayColumnIds = <
       ['row', 'modal'].includes(props.editingMode ?? ''))) &&
     'mrt-row-actions',
   props.positionExpandColumn === 'last' &&
-    (props.enableExpanding ||
-      props.enableGrouping ||
-      props.renderDetailPanel) &&
+    showExpandColumn(props) &&
     'mrt-row-expand',
 ];
 

package/src/table/MRT_TableRoot.tsx

@@ -9,6 +9,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
+  GroupingState,
 } from '@tanstack/react-table';
 import { Box, Dialog, Grow } from '@mui/material';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -22,6 +23,7 @@ import {
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
+  showExpandColumn,
 } from '../column.utils';
 import type {
   MRT_Cell,
@@ -95,6 +97,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
+  const [grouping, setGrouping] = useState<GroupingState>(
+    initialState.grouping ?? [],
+  );
   const [hoveredColumn, setHoveredColumn] = useState<
     MRT_Column<TData> | { id: string } | null
   >(initialState.hoveredColumn ?? null);
@@ -135,20 +140,21 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
-          columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ row }) => (
-              <MRT_ExpandButton row={row as any} table={table} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton table={table} />
-              ) : null,
-            header: props.localization?.expand,
-            size: 60,
-            ...defaultDisplayColumnDefOptions,
-            ...props.displayColumnDefOptions?.['mrt-row-expand'],
-            id: 'mrt-row-expand',
-          },
+          columnOrder.includes('mrt-row-expand') &&
+            showExpandColumn(props, grouping) && {
+              Cell: ({ row }) => (
+                <MRT_ExpandButton row={row as any} table={table} />
+              ),
+              Header: () =>
+                props.enableExpandAll ? (
+                  <MRT_ExpandAllButton table={table} />
+                ) : null,
+              header: props.localization?.expand,
+              size: 60,
+              ...defaultDisplayColumnDefOptions,
+              ...props.displayColumnDefOptions?.['mrt-row-expand'],
+              id: 'mrt-row-expand',
+            },
           columnOrder.includes('mrt-row-select') && {
             Cell: ({ row }) => (
               <MRT_SelectCheckbox row={row as any} table={table} />
@@ -176,6 +182,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ).filter(Boolean),
     [
       columnOrder,
+      grouping,
       props.displayColumnDefOptions,
       props.editingMode,
       props.enableColumnDragging,
@@ -192,6 +199,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableSelectAll,
       props.localization,
       props.positionActionsColumn,
+      props.renderDetailPanel,
     ],
   );
 
@@ -241,6 +249,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
+      onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,
       ...props,
       //@ts-ignore
@@ -258,6 +267,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         editingCell,
         editingRow,
         globalFilterFn,
+        grouping,
         hoveredColumn,
         hoveredRow,
         isFullScreen,