release v3.0.0-beta.2

apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx

@@ -36,15 +36,13 @@ import { EthicalAd } from './EthicalAd';
 
 export interface Props {
   Component?: any;
-  apiCode?: string;
   tableId: string;
   typeScriptCode: string;
   showTopRow?: boolean;
 }
 
 export const SourceCodeSnippet = ({
   Component,
-  apiCode,
   tableId,
   typeScriptCode,
   showTopRow = true,
@@ -58,6 +56,7 @@ export const SourceCodeSnippet = ({
     setSecondaryColor,
     primaryColor,
     setPrimaryColor,
+    setIsSandboxOpen,
   } = useThemeContext();
   const isMobile = useMediaQuery('(max-width: 720px)');
   const [codeTab, setCodeTab] = useState<
@@ -75,16 +74,21 @@ export const SourceCodeSnippet = ({
     }
   }, []);
 
+  useEffect(() => {
+    setIsSandboxOpen(['stackblitz', 'sandbox'].includes(codeTab));
+    return () => {
+      setIsSandboxOpen(false);
+    };
+  }, [codeTab]);
+
   const handleDismissV2Alert = () => {
     localStorage.setItem('v2AlertDismissed', 'true');
     setShowV2Alert(false);
     plausible('dismiss-v2-alert');
   };
 
   const handleCopy = () => {
-    navigator.clipboard.writeText(
-      (codeTab === 'ts' ? typeScriptCode : apiCode) ?? '',
-    );
+    navigator.clipboard.writeText(typeScriptCode ?? '');
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), 3000);
   };
@@ -227,7 +231,9 @@ export const SourceCodeSnippet = ({
               </Box>
             </Box>
           )}
-          <Component />
+          <Collapse in={!['stackblitz', 'sandbox'].includes(codeTab)}>
+            <Component />
+          </Collapse>
         </>
       )}
       <div>
@@ -291,19 +297,6 @@ export const SourceCodeSnippet = ({
                 >
                   {isMobile ? 'TS' : 'TypeScript'}
                 </ToggleButton>
-                {apiCode && (
-                  <ToggleButton
-                    onClick={() => {
-                      setCodeTab('api');
-                      plausible('toggle-to-api');
-                    }}
-                    value="api"
-                    selected={codeTab === 'api'}
-                    sx={{ textTransform: 'none' }}
-                  >
-                    {isMobile ? 'API' : 'Back-end API'}
-                  </ToggleButton>
-                )}
                 <ToggleButton
                   onClick={() => {
                     setCodeTab('stackblitz');
@@ -340,6 +333,7 @@ export const SourceCodeSnippet = ({
               border: '0',
               borderRadius: '4px',
               overflow: 'hidden',
+              padding: '1rem 0',
             }}
             title="stackblitz"
             allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
@@ -357,6 +351,7 @@ export const SourceCodeSnippet = ({
               border: '0',
               borderRadius: '4px',
               overflow: 'hidden',
+              padding: '1rem 0',
             }}
             title="codesandbox"
             allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
@@ -366,7 +361,7 @@ export const SourceCodeSnippet = ({
         {['ts', 'api'].includes(codeTab) && (
           <Paper elevation={3}>
             <Highlight
-              code={(codeTab === 'ts' ? typeScriptCode : apiCode) ?? ''}
+              code={typeScriptCode ?? ''}
               language={'tsx'}
               theme={
                 theme.palette.mode === 'dark'

apps/material-react-table-docs/components/navigation/Layout.tsx

@@ -0,0 +1,76 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Box, useMediaQuery } from '@mui/material';
+import { BreadCrumbs } from './BreadCrumbs';
+import { MiniNav } from './MiniNav';
+import { Footer } from './Footer';
+import { TopBar } from './TopBar';
+import { SideBar } from './Sidebar';
+import { useThemeContext } from '../../styles/ThemeContext';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export const Layout = ({ children }: LayoutProps) => {
+  const { pathname } = useRouter();
+
+  const { isSandboxOpen } = useThemeContext();
+
+  const showBreadCrumbs = pathname !== '/';
+  const showMiniNav =
+    pathname.includes('/docs/getting-started') ||
+    pathname.includes('/docs/api/mrt') ||
+    pathname.includes('/docs/guides/') ||
+    pathname.includes('/migrating') ||
+    pathname === '/about' ||
+    pathname === '/changelog' ||
+    pathname === '/roadmap';
+
+  const isMobile = useMediaQuery('(max-width: 900px)');
+  const isDesktop = useMediaQuery('(min-width: 1500px)');
+  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
+
+  const [navOpen, setNavOpen] = useState(false);
+  return (
+    <>
+      <TopBar
+        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
+        setNavOpen={setNavOpen}
+      />
+      <SideBar
+        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
+        setNavOpen={setNavOpen}
+      />
+      <Box
+        component="main"
+        sx={(theme) => ({
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+          minHeight: '100vh',
+          p: `64px ${showMiniNav && isXLDesktop ? '264px' : '32px'} 0 ${
+            (navOpen || (isDesktop && !isSandboxOpen)) && !isMobile
+              ? '320px'
+              : '32px'
+          }`,
+          transition: 'all 100ms ease-in-out',
+        })}
+      >
+        <Box
+          sx={{
+            maxWidth: isSandboxOpen ? '100%' : '1200px',
+            margin: 'auto',
+            transition: 'all 100ms ease-in-out',
+            width: '100%',
+          }}
+        >
+          {showBreadCrumbs && <BreadCrumbs />}
+          {showMiniNav && !isXLDesktop && <MiniNav />}
+          {pathname === '/' ? children : <article>{children}</article>}
+          <Footer />
+        </Box>
+        {showMiniNav && isXLDesktop && <MiniNav />}
+      </Box>
+    </>
+  );
+};

apps/material-react-table-docs/components/prop-tables/tableOptions.ts

@@ -493,7 +493,7 @@ export const tableOptions: TableOption[] = [
     type: 'boolean',
   },
   {
-    tableOption: 'enableCellNavigation',
+    tableOption: 'enableKeyboardShortcuts',
     defaultValue: 'true',
     description: '',
     link: '',

apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx

@@ -38,7 +38,7 @@ export const Example = () => {
   const table = useMaterialReactTable({
     columns,
     data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
-    enableCellNavigation: false,
+    enableKeyboardShortcuts: false,
     enableColumnActions: false,
     enableColumnFilters: false,
     enablePagination: false,

apps/material-react-table-docs/pages/_app.tsx

@@ -1,38 +1,16 @@
 import '../styles/globals.css';
-import { useState } from 'react';
 import { type AppProps } from 'next/app';
 import Head from 'next/head';
 import PlausibleProvider from 'next-plausible';
 import { useRouter } from 'next/router';
 import { MDXProvider } from '@mdx-js/react';
-import { Box, useMediaQuery } from '@mui/material';
 import { ThemeContextProvider } from '../styles/ThemeContext';
 import { mdxComponents } from '../components/mdx/mdxComponents';
-import { TopBar } from '../components/navigation/TopBar';
-import { SideBar } from '../components/navigation/Sidebar';
-import { BreadCrumbs } from '../components/navigation/BreadCrumbs';
-import { MiniNav } from '../components/navigation/MiniNav';
-import { Footer } from '../components/navigation/Footer';
+import { Layout } from '../components/navigation/Layout';
 
 function App({ Component, pageProps }: AppProps) {
   const { pathname } = useRouter();
 
-  const showBreadCrumbs = pathname !== '/';
-  const showMiniNav =
-    pathname.includes('/docs/getting-started') ||
-    pathname.includes('/docs/api/mrt') ||
-    pathname.includes('/docs/guides/') ||
-    pathname.includes('/migrating') ||
-    pathname === '/about' ||
-    pathname === '/changelog' ||
-    pathname === '/roadmap';
-
-  const isMobile = useMediaQuery('(max-width: 900px)');
-  const isDesktop = useMediaQuery('(min-width: 1500px)');
-  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
-
-  const [navOpen, setNavOpen] = useState(false);
-
   return (
     <>
       <Head>
@@ -71,41 +49,9 @@ function App({ Component, pageProps }: AppProps) {
       >
         <ThemeContextProvider>
           <MDXProvider components={mdxComponents}>
-            <TopBar navOpen={navOpen || isDesktop} setNavOpen={setNavOpen} />
-            <SideBar navOpen={navOpen || isDesktop} setNavOpen={setNavOpen} />
-            <Box
-              component="main"
-              sx={(theme) => ({
-                backgroundColor: theme.palette.background.default,
-                color: theme.palette.text.primary,
-                minHeight: '100vh',
-                p: `64px ${showMiniNav && isXLDesktop ? '250px' : '32px'} 0 ${
-                  (navOpen || isDesktop) && !isMobile ? '320px' : '32px'
-                }`,
-                transition: 'all 100ms ease-in-out',
-              })}
-            >
-              <Box
-                sx={{
-                  maxWidth: '1200px',
-                  margin: 'auto',
-                  transition: 'all 100ms ease-in-out',
-                  width: '100%',
-                }}
-              >
-                {showBreadCrumbs && <BreadCrumbs />}
-                {showMiniNav && !isXLDesktop && <MiniNav />}
-                {pathname === '/' ? (
-                  <Component {...pageProps} />
-                ) : (
-                  <article>
-                    <Component {...pageProps} />
-                  </article>
-                )}
-                <Footer />
-              </Box>
-              {showMiniNav && isXLDesktop && <MiniNav />}
-            </Box>
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
           </MDXProvider>
         </ThemeContextProvider>
       </PlausibleProvider>

apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx

@@ -55,6 +55,7 @@ You should now be on Material React Table V3! Look for any code or type errors i
 
 - `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break)
 - `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
+- Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts.
 - Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
 - Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
 - Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option.