diff --git a/apps/material-react-table-docs/components/mdx/InstallCommand.tsx b/apps/material-react-table-docs/components/mdx/InstallCommand.tsx index a410181fb..46c700ec8 100644 --- a/apps/material-react-table-docs/components/mdx/InstallCommand.tsx +++ b/apps/material-react-table-docs/components/mdx/InstallCommand.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Tab, Tabs } from '@mui/material'; import { SampleCodeSnippet } from './SampleCodeSnippet'; -type Tab = 'npm' | 'pnpm' | 'yarn'; +type Tab = 'npm' | 'pnpm' | 'yarn' | 'bun'; const defaultPackagesString = 'material-react-table@beta @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled'; @@ -25,6 +25,7 @@ export const InstallCommand = ({ + ); diff --git a/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx index 2c07de6e0..5dcde5771 100644 --- a/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx +++ b/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx @@ -80,9 +80,8 @@ export const SampleCodeSnippet = (props: Props) => { style={{ position: 'relative', margin: - props.margin ?? props.enableCopyButton !== false - ? '2rem auto' - : 0, + props.margin ?? + (props.enableCopyButton !== false ? '2rem auto' : 0), fontSize: '11pt', lineHeight: '1.4rem', }} @@ -100,7 +99,7 @@ export const SampleCodeSnippet = (props: Props) => { ...style, minHeight: '3rem', overflowX: 'auto', - padding: '1rem 1rem 0 1rem', + padding: '0.75rem 1rem 0 1rem', ...props?.style, }} > diff --git a/apps/material-react-table-docs/examples/minimal/sandbox/src/JS.js b/apps/material-react-table-docs/examples/minimal/sandbox/src/JS.js index 757fa3396..b07ea1d36 100644 --- a/apps/material-react-table-docs/examples/minimal/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/minimal/sandbox/src/JS.js @@ -41,6 +41,9 @@ export const Example = () => { enableColumnFilters: false, enablePagination: false, enableSorting: false, + mrtTheme: (theme) => ({ + baseBackgroundColor: theme.palette.background.default, //change default background color + }), muiTableBodyRowProps: { hover: false }, muiTableProps: { sx: { @@ -50,6 +53,8 @@ export const Example = () => { muiTableHeadCellProps: { sx: { border: '1px solid rgba(81, 81, 81, .5)', + fontStyle: 'italic', + fontWeight: 'normal' }, }, muiTableBodyCellProps: { diff --git a/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx index 0d2eaa6dc..f1ab97cbe 100644 --- a/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx @@ -42,6 +42,9 @@ export const Example = () => { enableColumnFilters: false, enablePagination: false, enableSorting: false, + mrtTheme: (theme) => ({ + baseBackgroundColor: theme.palette.background.default, //change default background color + }), muiTableBodyRowProps: { hover: false }, muiTableProps: { sx: { @@ -51,6 +54,8 @@ export const Example = () => { muiTableHeadCellProps: { sx: { border: '1px solid rgba(81, 81, 81, .5)', + fontStyle: 'italic', + fontWeight: 'normal', }, }, muiTableBodyCellProps: { diff --git a/apps/material-react-table-docs/pages/index.tsx b/apps/material-react-table-docs/pages/index.tsx index ac4ff0d88..e0b6148a1 100644 --- a/apps/material-react-table-docs/pages/index.tsx +++ b/apps/material-react-table-docs/pages/index.tsx @@ -26,10 +26,13 @@ const HomePage = () => { return ( <> - - Now in Beta! - Material React Table V2 is now in beta. The library is mostly stable - and ready for use, but the documentation is still being updated. + + MRT Version 2 has been released! + (October 27, 2023) See the{' '} + + V2 Migration Guide + {' '} + to learn how to upgrade. { xl: '5rem', }, fontWeight: 'bold', - mt: '5rem', + mt: '4rem', lineHeight: { xs: '2.5rem', sm: '3.5rem', @@ -216,7 +219,7 @@ const HomePage = () => { - + diff --git a/apps/material-react-table-docs/pages/migrating-to-v2.mdx b/apps/material-react-table-docs/pages/migrating-to-v2.mdx index e7c5a796b..8179036cb 100644 --- a/apps/material-react-table-docs/pages/migrating-to-v2.mdx +++ b/apps/material-react-table-docs/pages/migrating-to-v2.mdx @@ -13,6 +13,8 @@ import { InstallCommand } from '../components/mdx/InstallCommand'; ## Migrating to Material React Table V2 from V1 +This should be an easy to moderate upgrade for most developers. The only breaking changes have to do with the removed `tableInstanceRef`, some renamed props/options, and new column sizing behaviors. + ### New Feature Highlights 1. The new optional, but recommended `useMaterialReactTable` hook that allows you to create the `table` instance in your own scope. @@ -30,9 +32,17 @@ import { InstallCommand } from '../components/mdx/InstallCommand'; See the full [changelog](/changelog#version-2.0.0---10-27-2023) for more details. +### Upgrade Dependencies + +To upgrade (and upgrade all other MUI dependencies), just run the install commands again. + + + +Your `package.json` should have `"material-react-table": "^2.x.x"` as a dependency. + ### Breaking Changes -- `@mui/x-date-pickers v >=6.15.0` is now a required peer dependency. Install it with: +- `@mui/x-date-pickers v >=6.15.0` is now a required peer dependency. If not already installed from the previous step, install it with: @@ -161,4 +171,30 @@ export const MyTableComponent = () => { }; ``` -Is anything missing from this v2 migration guide? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss. \ No newline at end of file +### Column Sizing and Layout Modes + +There are some new column sizing behaviors to be aware of in V2. + +In addition to the `"semantic"` and `"grid"` layoutModes, there is now a new `"grid-no-grow"` layoutMode that is automatically enabled by default when `enableColumnResizing` is `true`. + +This new layoutMode will keep columns in a fixed width, and columns will not grow to fill any remaining horizontal space. This is probably a very welcome change for most, but you can revert the behavior back to the old behavior by setting the layoutMode table option to `"grid"` or `"semantic"` manually. + +If you were previously trying to accomplish the same `"grid-no-grow"` by setting the flex-grow CSS to 0 in V1, it is recommended that you now remove that CSS in favor of just using the new `"grid-no-grow"` layoutMode, which will also add an invisible `"mrt-row-spacer"` display column that makes the row borders look better. + +```diff +- muiTableHeadCellProps={{ +- sx: { +- flex: '0 0 auto', +- }, +- }} +- muiTableBodyCellProps={{ +- sx: { +- flex: '0 0 auto', +- }, +- }} ++ layoutMode="grid-no-grow" +``` + +
+ +Is anything missing from this v2 migration guide? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss.