fix header group sizes

KevinVandy · Jan 11, 2024 · 44789c6 · 44789c6 · vercel · Jan 11, 2024
1 parent e096524
commit 44789c6
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 255 deletions.
diff --git a/apps/material-react-table-docs/package.json b/apps/material-react-table-docs/package.json
@@ -25,7 +25,7 @@
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
     "@mui/x-charts": "^6.18.7",
-    "@mui/x-date-pickers": "^6.18.7",
+    "@mui/x-date-pickers": "^6.19.0",
     "@next/mdx": "^14.0.4",
     "@tanstack/react-query": "^5.17.9",
     "@types/mdx": "^2.0.10",
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.17.7",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.18.1",

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -20,6 +20,8 @@ import Head from 'next/head';
 - Fixed Expand Row Button padding and rotation in RTL mode
 - Fixed Pagination Icon Buttons in RTL mode
 - Set a default "right" cell alignment when theme.direction is "rtl"
+- Improved Header Group Column Sizing
+- Removed some internal `"@mui/material"` imports. (Could speed up dev server hot reloads in some cases)
 
 #### Version 2.5.2 - 2024-01-10
 

diff --git a/apps/test-cra/package.json b/apps/test-cra/package.json
@@ -7,7 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
-    "@mui/x-date-pickers": "^6.18.7",
+    "@mui/x-date-pickers": "^6.19.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",

diff --git a/apps/test-remix/package.json b/apps/test-remix/package.json
@@ -14,19 +14,19 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
-    "@mui/x-date-pickers": "^6.18.7",
-    "@remix-run/css-bundle": "^2.4.1",
-    "@remix-run/node": "^2.4.1",
-    "@remix-run/react": "^2.4.1",
-    "@remix-run/serve": "^2.4.1",
+    "@mui/x-date-pickers": "^6.19.0",
+    "@remix-run/css-bundle": "^2.5.0",
+    "@remix-run/node": "^2.5.0",
+    "@remix-run/react": "^2.5.0",
+    "@remix-run/serve": "^2.5.0",
     "isbot": "^4.3.0",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.4.1",
-    "@remix-run/eslint-config": "^2.4.1",
+    "@remix-run/dev": "^2.5.0",
+    "@remix-run/eslint-config": "^2.5.0",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",

diff --git a/apps/test-vite/package.json b/apps/test-vite/package.json
@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
-    "@mui/x-date-pickers": "^6.18.7",
+    "@mui/x-date-pickers": "^6.19.0",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/packages/material-react-table/.storybook/preview.tsx b/packages/material-react-table/.storybook/preview.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { useEffect } from 'react';
 import { Preview } from '@storybook/react';
 import { useDarkMode } from 'storybook-dark-mode';
-import { createTheme, Link, ThemeProvider, Typography } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.5.2",
+  "version": "2.6.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.",
@@ -68,7 +68,7 @@
     "@faker-js/faker": "^8.3.1",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
-    "@mui/x-date-pickers": "^6.18.7",
+    "@mui/x-date-pickers": "^6.19.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@storybook/addon-a11y": "^7.6.7",
@@ -80,7 +80,7 @@
     "@storybook/react": "^7.6.7",
     "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.3",
-    "@tanstack/react-table": "8.11.3",
+    "@tanstack/react-table": "8.11.4",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

diff --git a/packages/material-react-table/src/style.utils.ts b/packages/material-react-table/src/style.utils.ts
@@ -57,7 +57,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
     width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px)`,
+    )}-size) * 1px${header ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
   };
 
   if (layoutMode === 'grid') {

diff --git a/packages/material-react-table/src/table/MRT_Table.tsx b/packages/material-react-table/src/table/MRT_Table.tsx
@@ -42,9 +42,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      let colSize = header.getSize();
-      if (header.subHeaders?.length)
-        colSize = colSize * 1.05 + header.subHeaders.length * 2;
+      const colSize = header.getSize();
       colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
       colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }

diff --git a/packages/material-react-table/stories/features/HeaderGroups.stories.tsx b/packages/material-react-table/stories/features/HeaderGroups.stories.tsx
@@ -117,6 +117,15 @@ export const HeaderGroupsWithColumResizing = () => (
   <MaterialReactTable columns={columns} data={data} enableColumnResizing />
 );
 
+export const HeaderGroupsWithSemanticColumResizing = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableColumnResizing
+    layoutMode="semantic"
+  />
+);
+
 export const MixedHeaderGroups = () => {
   return (
     <MaterialReactTable