diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index 6e68f36f2..eca06f18a 100644 --- 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 index 4cf1d3870..d906c758d 100644 --- 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) => {//Updater is a type from @tanstack/react-table +const handlePaginationChange = (updater: MRT_Updater) => {//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 index aa681a782..74d4cdf34 100644 --- 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 index 238735938..40f74113b 100644 --- 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 = {}> = headerGroup: MRT_HeaderGroup; }) => TableRowProps); muiTablePaginationProps?: - | Partial + | Partial> | ((props: { table: MRT_TableInstance; }) => Partial); diff --git a/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx b/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx index a7a857e45..2525bf69c 100644 --- 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 = {}> { + row: MRT_Row; + table: MRT_TableInstance; } -export const MRT_ExpandButton = ({ row, table }: Props) => { +export const MRT_ExpandButton = = {}>({ + row, + table, +}: Props) => { 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 index 95be0af0a..e3e880ebf 100644 --- 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 = {}> { diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts index b4332a1ae..83906f2b5 100644 --- 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 index 1e623974f..e8660a1b9 100644 --- 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 ( { setColumnSizingInfo((old) => ({ ...old, @@ -47,6 +48,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, 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]);