release v1.8.5 - various col size fixes

KevinVandy · Mar 9, 2023 · 5c450c8 · 5c450c8 · vercel · Mar 9, 2023
1 parent a867650
commit 5c450c8
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 24 deletions.
diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,15 @@ import Head from 'next/head';
 
 ### Version 1 (Latest)
 
+#### v1.8.5 (2023-03-09)
+
+- Used more comprehensive regex to create css vars for column resizing from column ids/accessorKeys
+- Fixed more column resizing issues with nested column groups
+- Added official css classNames for column resizing elements
+- Added exports for `MRT_ExpandButton` and `MRT_GrabHandleButton` components
+- Exported `MRT_Updater` type so it does not have to be imported from `@tanstack/react-table`
+- zh locale row vs column translation tweaks
+
 #### v1.8.4 (2023-03-02)
 
 - Fixed column resizing issues with nested column groups

diff --git a/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx b/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx
@@ -146,7 +146,7 @@ const [pagination, setPagination] = useState({
   pageSize: 15,
 });
 
-const handlePaginationChange = (updater: Updater<PaginationState>) => {//Updater is a type from @tanstack/react-table
+const handlePaginationChange = (updater: MRT_Updater<PaginationState>) => {//MRT_Updater is a type from @tanstack/react-table
   //TanStack Table requires this strange syntax since updater can be a function to update the state or the new state itself
   setPagination((prevPagination) => updater instanceof Function ? updater(prevPagination) : updater);
 

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.8.4",
+  "version": "1.8.5",
   "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/MaterialReactTable.tsx b/packages/material-react-table/src/MaterialReactTable.tsx
@@ -49,7 +49,8 @@ import type {
   Table,
   TableOptions,
   TableState,
-  VisibilityState,
+  Updater,
+  VisibilityState
 } from '@tanstack/react-table';
 import type {
   VirtualizerOptions,
@@ -87,6 +88,7 @@ export type {
   PaginationState as MRT_PaginationState,
   RowSelectionState as MRT_RowSelectionState,
   SortingState as MRT_SortingState,
+  Updater as MRT_Updater,
   VirtualItem as MRT_VirtualItem,
   Virtualizer as MRT_Virtualizer,
   VirtualizerOptions as MRT_VirtualizerOptions,
@@ -841,7 +843,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
             headerGroup: MRT_HeaderGroup<TData>;
           }) => TableRowProps);
       muiTablePaginationProps?:
-        | Partial<TablePaginationProps>
+        | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>
         | ((props: {
             table: MRT_TableInstance<TData>;
           }) => Partial<TablePaginationProps>);

diff --git a/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx b/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx
@@ -3,12 +3,15 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
-interface Props {
-  row: MRT_Row;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = ({ row, table }: Props) => {
+export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
+  row,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {

diff --git a/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx b/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx
@@ -1,7 +1,7 @@
 import React, { DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import type { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import type { IconButtonProps } from '@mui/material/IconButton';
 import type { MRT_TableInstance } from '..';
 
 interface Props<TData extends Record<string, any> = {}> {

diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts
@@ -264,7 +264,9 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
+      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+          header?.id ?? column.id,
+        )}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -337,10 +339,4 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
-export const parseCSSVarId = (id: string) =>
-  id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')
-    .replaceAll('+', '_')
-    .replaceAll('(', '_')
-    .replaceAll(')', '_');
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
diff --git a/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx b/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx
@@ -19,6 +19,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
 
   return (
     <Box
+      className="Mui-TableHeadCell-ResizeHandle-Wrapper"
       onDoubleClick={() => {
         setColumnSizingInfo((old) => ({
           ...old,
@@ -47,6 +48,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
       }}
     >
       <Divider
+        className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
         sx={{

diff --git a/packages/material-react-table/src/index.tsx b/packages/material-react-table/src/index.tsx
@@ -5,38 +5,42 @@ export * from './MaterialReactTable';
 import type { MRT_Icons } from './icons';
 export type { MRT_Icons };
 
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons';
+import { MRT_ExpandButton } from './buttons/MRT_ExpandButton';
 import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
 import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 
 export {
+  MRT_BottomToolbar,
   MRT_CopyButton,
   MRT_EditActionButtons,
+  MRT_ExpandButton,
   MRT_FilterOptionMenu,
   MRT_FullScreenToggleButton,
+  MRT_GrabHandleButton,
   MRT_GlobalFilterTextField,
   MRT_ShowHideColumnsButton,
   MRT_TablePagination,
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_ToggleRowActionMenuButton,
   MRT_ToolbarAlertBanner,
   MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
-  MRT_ToggleRowActionMenuButton,
   MRT_TopToolbar,
-  MRT_BottomToolbar,
 };
diff --git a/packages/material-react-table/src/table/MRT_Table.tsx b/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];
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
-        header.column.getSize();
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);