release v2.8.0 - grow and unmemoize

apps/material-react-table-docs/components/prop-tables/columnOptions.ts

@@ -144,7 +144,7 @@ export const columnOptions: ColumnOption[] = [
     linkText: '',
     source: 'MRT',
     required: false,
-    type: 'Array<string | { label: string; value: string }>',
+    type: 'DropdownOption[] | (({ cell, column, row, table, }) => DropdownOption[])',
   },
   {
     columnOption: 'editVariant',
@@ -389,6 +389,17 @@ export const columnOptions: ColumnOption[] = [
     required: false,
     type: 'boolean',
   },
+  {
+    columnOption: 'grow',
+    defaultValue: '',
+    description:
+      "If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.",
+    link: '',
+    linkText: '',
+    source: 'MRT',
+    required: false,
+    type: 'boolean | number',
+  },
   {
     columnOption: 'maxSize',
     defaultValue: '1000',

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,18 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.8.0 - 2024-01-19
+
+- Removed internal display column def memoization that caused edge cases with enabling and disabling features conditionally. (like `enableRowActions` and `enableEditing`, etc.)
+- Improved Column Resizing and Column/Row DnD Performance by caching column definitions while user is dragging.
+- Added new `grow` column option to allow for columns to grow to fill the remaining space in the table when `layoutMode: 'grid-no-grow'` is enabled, or to force a column to not grow when `layoutMode: 'grid'` is enabled and `grow: false` is set.
+  - `mrt-row-select`, `mrt-row-drag`, `mrt-row-pin`, and `mrt-row-number` columns are now set to `grow: false` by default now.
+  - `mrt-row-expand` column is also set to `grow: false` if only detail panels are enabled.
+  - `mrt-row-expand` is now set to a `size: 100` by default (slightly wider)
+- Fixed indentation of mrt expand column when layoutMode was grid or grid-no-grow (using margin instead of padding now)
+- Modified `editSelectOptions` to allow for dynamic values on a per-cell basis. `({ row, cell, etc. }) => []`
+- Fixed edit textbox controlled component warning
+
 #### Version 2.7.0 - 2024-01-18
 
 - New `'positionCreatingRow'` table option to customize where the creating row is rendered in the table body.

apps/material-react-table-docs/pages/docs/guides/column-resizing.mdx

@@ -25,6 +25,7 @@ Material React Table lets you easily change the default widths (sizes) of column
       'columnResizeDirection',
       'columnResizeMode',
       'defaultColumn',
+      'displayColumnDefOptions',
       'enableColumnResizing',
       'layoutMode',
       'onColumnSizingChange',
@@ -36,7 +37,9 @@ Material React Table lets you easily change the default widths (sizes) of column
 ### Relevant Column Options
 
 <ColumnOptionsTable
-  onlyOptions={new Set(['enableResizing', 'maxSize', 'minSize', 'size'])}
+  onlyOptions={
+    new Set(['enableResizing', 'grow', 'maxSize', 'minSize', 'size'])
+  }
 />
 
 ### Relevant State
@@ -66,6 +69,7 @@ const columns = [
   {
     accessorKey: 'id',
     header: 'ID',
+    grow: false, //don't allow this column to grow to fill in remaining space - new in v2.8
     size: 50, //small column
   },
   {
@@ -78,11 +82,26 @@ const columns = [
   {
     accessorKey: 'email',
     header: 'Email',
+    grow: true, //allow this column to grow to fill in remaining space - new in v2.8
     size: 300, //large column
   },
 ];
 ```
 
+#### Column Grow
+
+> New in v2.8 - You can now set a `grow` column option if using layoutMode `"grid-no-grow"` or `"grid"`
+
+You can also set `grow` properties on the column definitions when using layoutMode `"grid-no-grow"` or `"grid"`.
+
+If the layout mode of your table is `"grid"` and you set `grow: false` on a column, that column will have a fixed size and will not grow to fill in the remaining space of the table.
+
+If the layout mode of your table is `"grid-no-grow"` and you set `grow: true` on a column, that column will grow to fill in the remaining space of the table.
+
+If the layout mode of your table is `"grid-no-grow"` and you set `grow: 1` on one column, and `grow: 2` on another column, the first column will grow to fill in 1/3 of the remaining space of the table, and the second column will grow to fill in 2/3 of the remaining space of the table.
+
+If the layout mode of your table is `"semantic"`, the `grow` column option will have no effect, but columns will size themselves to fit their own content better than the other layout modes.
+
 #### Default Column
 
 By default, columns will have the following size properties defined:
@@ -105,6 +124,31 @@ const table = useMaterialReactTable({
 });
 ```
 
+#### Change Sizes of Built-in Display Columns
+
+As discussed further in the [Display Columns Guide](/docs/guides/display-columns), you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-select': {
+      size: 50, //adjust the size of the row select column
+      grow: false, //new in v2.8 (default is false for this column)
+    },
+    'mrt-row-numbers': {
+      enableResizing: true, //allow the row numbers column to be resized
+      size: 40,
+      grow: true, //new in v2.8
+    },
+  },
+  enableRowNumbers: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
 ### Enable Column Resizing Feature
 
 `enableColumnResizing` is the boolean prop that enables the column resizing feature.
@@ -168,7 +212,9 @@ const table = useMaterialReactTable({
 });
 
 return (
-  <div style={{ direction: 'rtl' }}> {/* app-wide style? */}
+  <div style={{ direction: 'rtl' }}>
+    {' '}
+    {/* app-wide style? */}
     <MaterialReactTable table={table} />
   </div>
 );

apps/material-react-table-docs/pages/docs/guides/display-columns.mdx

@@ -108,6 +108,8 @@ const table = useMaterialReactTable({
       enableOrdering: true,
       enablePinning: true,
       enableColumnActions: true,
+      size: 40,
+      grow: true, //new in v2.8
     },
   },
   enableRowNumbers: true,

packages/material-react-table/package.json

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

packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -25,6 +25,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
         table={table}
       />
     ),
+    grow: false,
     ...defaultDisplayColumnProps({
       header: 'move',
       id: 'mrt-row-drag',

packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -88,7 +88,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
         groupedColumnMode === 'remove'
           ? defaultColumn?.size
           : renderDetailPanel
-            ? 50
+            ? 60
             : 100,
       tableOptions,
     }),

packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -26,6 +26,7 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
         ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
         : row.index) ?? 0) + 1,
     Header: () => localization.rowNumber,
+    grow: false,
     ...defaultDisplayColumnProps({
       header: 'rowNumbers',
       id: 'mrt-row-numbers',

packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -20,6 +20,7 @@ export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />
     ),
+    grow: false,
     ...defaultDisplayColumnProps({
       header: 'pin',
       id: 'mrt-row-pin',

packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -30,6 +30,7 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
       enableSelectAll && enableMultiRowSelection
         ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
         : undefined,
+    grow: false,
     ...defaultDisplayColumnProps({
       header: 'select',
       id: 'mrt-row-select',

packages/material-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -12,7 +12,6 @@ import {
 const blankColProps = {
   children: null,
   sx: {
-    flex: '1 0 auto',
     minWidth: 0,
     p: 0,
     width: 0,
@@ -32,6 +31,7 @@ export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
       size: 0,
       tableOptions,
     }),
+    grow: true,
     ...MRT_DefaultDisplayColumn,
     muiTableBodyCellProps: blankColProps,
     muiTableFooterCellProps: blankColProps,

packages/material-react-table/src/types.ts

@@ -531,7 +531,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
    */
   footer?: string;
   /**
-   * If `layoutMode` is `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space.
+   * If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
    */
   grow?: boolean | number;
   /**

packages/material-react-table/src/utils/style.utils.ts

@@ -70,9 +70,13 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   };
 
   if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+            header?.id ?? column.id,
+          )}-size)`
+    } 0 auto`;
   } else if (layoutMode === 'grid-no-grow') {
     widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
   }

packages/material-react-table/stories/features/ColumnResizing.stories.tsx

@@ -38,6 +38,7 @@ const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
 const data = [...Array(88)].map(() => ({
   address: faker.location.streetAddress(),
   firstName: faker.person.firstName(),
+  id: faker.number.int(100),
   lastName: faker.person.lastName(),
   phoneNumber: faker.phone.number(),
   state: faker.location.state(),
@@ -68,6 +69,30 @@ export const ColumnResizingEnabledDefaultOnChangeGrid = () => (
   />
 );
 
+export const ColumnResizingDefaultOnChangeGridWithIndividualShrink = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        accessorKey: 'id',
+        grow: false,
+        header: 'ID',
+        size: 30,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ]}
+    data={data}
+    enableColumnResizing
+    layoutMode="grid"
+  />
+);
+
 export const ColumnResizingEnabledDefaultOnChangeGridRTL = () => (
   <div style={{ direction: 'rtl' }}>
     <MaterialReactTable

packages/material-react-table/stories/features/DetailPanel.stories.tsx

@@ -374,3 +374,79 @@ export const DetailPanelExpandAllDisabled = () => (
     )}
   />
 );
+
+export const DetailPanelExpandAllDisabledGrid = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+    ]}
+    data={[...Array(5)].map(() => ({
+      address: faker.location.streetAddress(),
+      city: faker.location.city(),
+      firstName: faker.person.firstName(),
+      lastName: faker.person.lastName(),
+      phone: faker.phone.number(),
+      state: faker.location.state(),
+      zipCode: faker.location.zipCode(),
+    }))}
+    enableExpandAll={false}
+    layoutMode="grid"
+    renderDetailPanel={({ row }) => (
+      <div style={{ display: 'grid' }}>
+        <span>City: {row.original.city}</span>
+        <span>State: {row.original.state}</span>
+        <span>Zip: {row.original.zipCode}</span>
+        <span>Phone: {row.original.phone}</span>
+      </div>
+    )}
+  />
+);
+
+export const DetailPanelExpandAllDisabledGridNoGrow = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+    ]}
+    data={[...Array(5)].map(() => ({
+      address: faker.location.streetAddress(),
+      city: faker.location.city(),
+      firstName: faker.person.firstName(),
+      lastName: faker.person.lastName(),
+      phone: faker.phone.number(),
+      state: faker.location.state(),
+      zipCode: faker.location.zipCode(),
+    }))}
+    enableExpandAll={false}
+    layoutMode="grid-no-grow"
+    renderDetailPanel={({ row }) => (
+      <div style={{ display: 'grid' }}>
+        <span>City: {row.original.city}</span>
+        <span>State: {row.original.state}</span>
+        <span>Zip: {row.original.zipCode}</span>
+        <span>Phone: {row.original.phone}</span>
+      </div>
+    )}
+  />
+);

packages/material-react-table/stories/features/Loading.stories.tsx

@@ -59,6 +59,14 @@ export const Loading = () => (
   <MaterialReactTable columns={columns} data={[]} state={{ isLoading: true }} />
 );
 
+export const Loading5 = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={[]}
+    state={{ isLoading: true, pagination: { pageIndex: 0, pageSize: 5 } }}
+  />
+);
+
 export const LoadingWithProgressBars = () => (
   <MaterialReactTable
     columns={columns}