From ac0e55c7486d0c53301147d0c4660ac6efad5abf Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Wed, 4 Sep 2024 23:57:09 -0500 Subject: [PATCH] release v3.0.0 - mui v6 and keyboard navigation features --- .../components/navigation/TopBar.tsx | 2 +- apps/material-react-table-docs/pages/changelog.mdx | 1 + .../pages/docs/guides/customize-components.mdx | 2 ++ apps/material-react-table-docs/pages/index.tsx | 11 +++++++++++ packages/material-react-table/package.json | 2 +- .../src/components/table/MRT_TablePaper.tsx | 2 +- .../src/components/toolbar/MRT_TablePagination.tsx | 5 +---- packages/material-react-table/src/locales/no.ts | 3 ++- 8 files changed, 20 insertions(+), 8 deletions(-) diff --git a/apps/material-react-table-docs/components/navigation/TopBar.tsx b/apps/material-react-table-docs/components/navigation/TopBar.tsx index f724d9d0a..c58549fd0 100644 --- a/apps/material-react-table-docs/components/navigation/TopBar.tsx +++ b/apps/material-react-table-docs/components/navigation/TopBar.tsx @@ -102,7 +102,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => { sx={{ display: 'flex', justifyContent: 'space-between', - p: '2px 4px', + p: '2px 8px', }} disableGutters variant="dense" diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index 379cdcea8..f2c94183a 100644 --- a/apps/material-react-table-docs/pages/changelog.mdx +++ b/apps/material-react-table-docs/pages/changelog.mdx @@ -33,6 +33,7 @@ import Head from 'next/head'; - `renderCellActionMenuItems` - `renderColumnActionsMenuItems` - `renderColumnFilterModeMenuItems` +- Fixed top pagination and searchbox sometimes overlapping See the entire [v3 migration guide](/docs/getting-started/migrating-to-v3) for more details. diff --git a/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx b/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx index e99f7e073..2c8a81ad9 100644 --- a/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx @@ -134,6 +134,8 @@ Each `mui...Prop` has multiple options for you to add styling to the component. #### The SX Prop +> NOTE: These docs are still written for the Emotion version of the `sx` prop. Pigment CSS docs will be added here later. + The recommended way to style Material UI components in Material React Table will be the [`sx` prop](https://mui.com/system/basics/#the-sx-prop) throughout this docs site, as it is both the most simple and the most powerful way to style Material UI components as of Material UI V6. They can work and be as simple as a `style` prop, but behind the scenes, they work more like emotion styled-components by using `mui/system`. Don't worry, `className` and `style` props will still work, but let's show off some of the more elegant syntax you can use with the `sx` table option. diff --git a/apps/material-react-table-docs/pages/index.tsx b/apps/material-react-table-docs/pages/index.tsx index df52aa095..e0ca81791 100644 --- a/apps/material-react-table-docs/pages/index.tsx +++ b/apps/material-react-table-docs/pages/index.tsx @@ -7,6 +7,8 @@ import { Stack, Typography, Link as MuiLink, + Alert, + AlertTitle, } from '@mui/material'; import { ArrowForwardIos } from '@mui/icons-material'; import { HomeCards } from '../components/mdx/HomeCards'; @@ -24,6 +26,15 @@ const HomePage = () => { return ( <> + + + Material React Table V3 was released September 5th, 2024! + + Upgrade to MRT V3 and Material UI V6 Today! + + View the V3 Migration Guide here. + + ({ const theme = useTheme(); return ( - + e.key === 'Escape' && table.setIsFullScreen(false)} diff --git a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx index be65ece43..1bc28e1a8 100644 --- a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx +++ b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx @@ -49,7 +49,6 @@ export const MRT_TablePagination = ({ } = table; const { pagination: { pageIndex = 0, pageSize = 10 }, - showGlobalFilter, } = getState(); const paginationProps = { @@ -95,9 +94,7 @@ export const MRT_TablePagination = ({ justifyContent: { md: 'space-between', sm: 'center' }, justifySelf: 'flex-end', mt: - position === 'top' && - enableToolbarInternalActions && - !showGlobalFilter + position === 'top' && enableToolbarInternalActions ? '3rem' : undefined, position: 'relative', diff --git a/packages/material-react-table/src/locales/no.ts b/packages/material-react-table/src/locales/no.ts index db465f029..a6455cef0 100644 --- a/packages/material-react-table/src/locales/no.ts +++ b/packages/material-react-table/src/locales/no.ts @@ -93,5 +93,6 @@ export const MRT_Localization_NO: MRT_Localization = { unpinAll: 'Løsne alle', ungroupByColumn: 'Oppgrupper etter {column}', - selectedCountOfRowCountRowsSelected: '{selected} av {count} rader valgt', + selectedCountOfRowCountRowsSelected: + '{selectedCount} av {rowCount} rader valgt', };