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.