release v1.8.4 - fixes Column resizing with header groups no longer w…

…orks #402

apps/material-react-table-docs/package.json

@@ -30,7 +30,7 @@
     "dayjs": "^1.11.7",
     "export-to-csv": "^0.2.1",
     "material-react-table": "workspace:*",
-    "next": "13.1.6",
+    "next": "13.1.0",
     "next-sitemap": "^3.1.54",
     "prism-react-renderer": "^1.3.5",
     "react": "18.2.0",

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

@@ -12,6 +12,10 @@ import Head from 'next/head';
 
 ### Version 1 (Latest)
 
+#### v1.8.4 (2023-03-02)
+
+- Fixed column resizing issues with nested column groups
+
 #### v1.8.3 (2023-02-27)
 
 - Add back support for custom edit and filter textfield children

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.3",
+  "version": "1.8.4",
   "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/column.utils.ts

@@ -307,10 +307,10 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${parseCSSVarId(
+  minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--col-${parseCSSVarId(
+  width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px)`,
 });

packages/material-react-table/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];
-      const colSize = header.getSize();
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
+        header.column.getSize();
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);