update v2 docs for v2 release

KevinVandy · Oct 28, 2023 · d80a474 · d80a474
1 parent 2b7204e
commit d80a474
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 14 deletions.
diff --git 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 = ({
         <Tab label="NPM" value="npm" />
         <Tab label="PNPM" value="pnpm" />
         <Tab label="Yarn" value="yarn" sx={{ textTransform: 'none' }} />
+        <Tab label="Bun" value="bun" sx={{ textTransform: 'none' }} />
       </Tabs>
       <SampleCodeSnippet
         className="language-bash"
@@ -35,7 +36,9 @@ export const InstallCommand = ({
           ? `npm i ${packagesString}`
           : tab === 'pnpm'
           ? `pnpm add ${packagesString}`
-          : `yarn add ${packagesString}`}
+          : tab === 'yarn'
+          ? `yarn add ${packagesString}`
+          : `bun add ${packagesString}`}
       </SampleCodeSnippet>
     </>
   );

diff --git 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
@@ -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
@@ -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
@@ -26,10 +26,13 @@ const HomePage = () => {
   return (
     <>
       <Stack sx={{ maxWidth: '1200px', m: 'auto' }}>
-        <Alert sx={{ mt: '2rem' }} severity="info" variant="filled">
-          <AlertTitle>Now in Beta!</AlertTitle>
-          Material React Table V2 is now in beta. The library is mostly stable
-          and ready for use, but the documentation is still being updated.
+        <Alert sx={{ mt: '2rem' }} severity="success" variant="outlined">
+          <AlertTitle>MRT Version 2 has been released!</AlertTitle>
+          (October 27, 2023) See the{' '}
+          <Link href="/migrating-to-v2" passHref legacyBehavior>
+            <MuiLink>V2 Migration Guide</MuiLink>
+          </Link>{' '}
+          to learn how to upgrade.
         </Alert>
         <Typography
           sx={{
@@ -42,7 +45,7 @@ const HomePage = () => {
               xl: '5rem',
             },
             fontWeight: 'bold',
-            mt: '5rem',
+            mt: '4rem',
             lineHeight: {
               xs: '2.5rem',
               sm: '3.5rem',
@@ -216,7 +219,7 @@ const HomePage = () => {
           </Link>
         </Box>
         <Box>
-          <InstallCommand centered />
+          <InstallCommand centered variant="fullWidth" />
         </Box>
         <HomeCards />
         <Typography my="2rem" textAlign="center" variant="h3">

diff --git 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.
+
+<InstallCommand />
+
+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:
 
 <InstallCommand packagesString="@mui/x-date-pickers" />
 
@@ -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.
+### 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"
+```
+
+<br />
+
+Is anything missing from this v2 migration guide? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss.