Migrate to MUI v9

README.md

@@ -1,4 +1,4 @@
-# Material React Table V3
+# Material React Table V4
 
 View [Documentation](https://www.material-react-table.com/)
 
@@ -36,7 +36,7 @@ View [Documentation](https://www.material-react-table.com/)
 
 ### _Quickly Create React Data Tables with Material Design_
 
-### **Built with [Material UI <sup>V6</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
+### **Built with [Material UI <sup>V9</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
 
 <img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
 
@@ -114,9 +114,9 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 
 View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
 
-1. Ensure that you have React 18 or later installed
+1. Ensure that you have React 19 or later installed
 
-2. Install Peer Dependencies (Material UI V6)
+2. Install Peer Dependencies (Material UI V9)
 
 ```bash
 npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
@@ -128,7 +128,7 @@ npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react
 npm install material-react-table
 ```
 
-> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you do NOT need to install them yourself.
+> _`@tanstack/react-table` v8.21, `@tanstack/react-virtual` v3.13, and `@tanstack/match-sorter-utils` v8.19_ are internal dependencies, so you do NOT need to install them yourself.
 
 ### Usage
 

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

@@ -25,7 +25,7 @@ export const BlogAuthor = ({
           alignItems: 'center',
         }}
       >
-        <Typography fontSize="14pt" variant="caption">
+        <Typography sx={{ fontSize: '14pt' }} variant="caption">
           By{' '}
           <Link
             color="text.primary"

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

@@ -118,7 +118,7 @@ export const SourceCodeSnippet = ({
               <LinkHeading
                 tableId={tableId}
                 variant="h4"
-                textTransform="capitalize"
+                sx={{ textTransform: 'capitalize' }}
               >
                 Demo
               </LinkHeading>
@@ -267,7 +267,7 @@ export const SourceCodeSnippet = ({
         >
           <LinkHeading
             tableId={tableId}
-            textTransform="capitalize"
+            sx={{ textTransform: 'capitalize' }}
             variant="h4"
           >
             Source Code

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

@@ -120,7 +120,7 @@ export const Footer = () => {
           p: '1.5rem',
         }}
       >
-        <Typography color="text.secondary" textAlign="center">
+        <Typography color="text.secondary" sx={{ textAlign: 'center' }}>
           © {new Date().getFullYear()} Kevin&nbsp;Van&nbsp;Cott
         </Typography>
         <Box

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

@@ -25,7 +25,7 @@ export const MiniNav = () => {
         maxWidth: isXLDesktop ? '250px' : '500px',
       }}
     >
-      <Typography mt="1rem" component="div" variant="h6">
+      <Typography sx={{ mt: '1rem' }} component="div" variant="h6">
         On This Page
       </Typography>
       <ul

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

@@ -69,7 +69,7 @@ export const SideBar = ({ navOpen, setNavOpen }: Props) => {
 
   return (
     <Drawer
-      PaperProps={{ component: 'aside' }}
+      slotProps={{ paper: { component: 'aside' } }}
       open={navOpen}
       onClose={() => setNavOpen(false)}
       variant={isMobile ? 'temporary' : 'permanent'}

apps/material-react-table-docs/examples/custom-column-filtering-ui/sandbox/src/TS.tsx

@@ -53,10 +53,10 @@ const Example = () => {
   });
 
   return (
-    <Stack direction={isMobile ? 'column-reverse' : 'row'} gap="8px">
+    <Stack sx={{ flexDirection: isMobile ? 'column-reverse' : 'row', gap: '8px' }}>
       <MRT_TableContainer table={table} />
       <Paper>
-        <Stack p="8px" gap="8px">
+        <Stack sx={{ padding: '8px', gap: '8px' }}>
           {table
             .getLeafHeaders()
             .map(

apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/src/TS.tsx

@@ -48,7 +48,7 @@ const Example = () => {
     displayColumnDefOptions: {
       'mrt-row-expand': {
         Header: () => (
-          <Stack direction="row" alignItems="center">
+          <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
             <MRT_ExpandAllButton table={table} />
             <Box>Groups</Box>
           </Stack>

apps/material-react-table-docs/examples/enable-column-grouping/sandbox/src/TS.tsx

@@ -66,7 +66,7 @@ const Example = () => {
   });
 
   return (
-    <Stack gap="1rem">
+    <Stack sx={{ gap: '1rem' }}>
       <DemoRadioGroup
         groupedColumnMode={groupedColumnMode}
         setGroupedColumnMode={setGroupedColumnMode}

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

@@ -81,7 +81,7 @@ const Example = () => {
         </Box>
       </Box>
       {/* Some Page Content */}
-      <Typography p="16px 4px">
+      <Typography sx={{ p: '16px 4px' }}>
         {
           "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"
         }

apps/material-react-table-docs/examples/lazy-detail-panel/sandbox/src/TS.tsx

@@ -62,7 +62,7 @@ const DetailPanel = ({ row }: { row: MRT_Row<User> }) => {
   const { favoriteMusic, favoriteSong, quote } = userInfo ?? {};
 
   return (
-    <Stack gap="0.5rem" minHeight="00px">
+    <Stack sx={{ gap: '0.5rem', minHeight: '00px' }}>
       <div>
         <b>Favorite Music:</b> {favoriteMusic}
       </div>

apps/material-react-table-docs/package.json

@@ -22,14 +22,14 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@mui/icons-material": "^6.2.1",
-    "@mui/material": "^6.2.1",
-    "@mui/x-charts": "^7.23.2",
-    "@mui/x-date-pickers": "^7.23.3",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-charts": "^9.2.0",
+    "@mui/x-date-pickers": "^9.0.0",
     "@next/mdx": "^15.1.2",
     "@tanstack/react-query": "^5.62.8",
     "@tanstack/react-query-devtools": "^5.62.8",
-    "@tanstack/react-table-devtools": "^8.20.6",
+    "@tanstack/react-table-devtools": "^8.21.3",
     "@types/mdx": "^2.0.13",
     "dayjs": "^1.11.13",
     "export-to-csv": "^1.4.0",

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

@@ -14,10 +14,10 @@ function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
-        <title>Material React Table V3</title>
+        <title>Material React Table V4</title>
         <meta
           name="description"
-          content="Material React Table, a fully featured Material UI V6 implementation of TanStack React Table V8. Written from the ground up in TypeScript."
+          content="Material React Table, a fully featured Material UI V9 implementation of TanStack React Table V8. Written from the ground up in TypeScript."
         />
         <link
           rel="canonical"

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

@@ -28,11 +28,11 @@ const HomePage = () => {
       <Stack sx={{ maxWidth: '1200px', m: 'auto' }}>
         <Alert severity="success" variant="outlined" sx={{}}>
           <AlertTitle>
-            Material React Table V3 was released September 5th, 2024!
+            Material React Table V4 — now with Material UI V9!
           </AlertTitle>
-          <Typography>Upgrade to MRT V3 and Material UI V6 Today!</Typography>
-          <MuiLink href="/docs/getting-started/migrating-to-v3">
-            View the V3 Migration Guide here.
+          <Typography>Upgrade to MRT V4 and Material UI V9 Today!</Typography>
+          <MuiLink href="/docs/getting-started/migrating-to-v4">
+            View the V4 Migration Guide here.
           </MuiLink>
         </Alert>
         <Typography
@@ -79,7 +79,7 @@ const HomePage = () => {
                 },
               }}
             >
-              V3
+              V4
             </Box>
           </Box>
         </Typography>
@@ -110,7 +110,7 @@ const HomePage = () => {
               target="_blank"
               rel="noopener"
             >
-              Material&nbsp;UI<sup>V6</sup>
+              Material&nbsp;UI<sup>V9</sup>
             </MuiLink>
           </Link>{' '}
           and&nbsp;
@@ -223,7 +223,7 @@ const HomePage = () => {
           <InstallCommand centered variant="fullWidth" />
         </Box>
         <HomeCards />
-        <Typography my="2rem" textAlign="center" variant="h3">
+        <Typography sx={{ my: '2rem', textAlign: 'center' }} variant="h3">
           Popular Docs
         </Typography>
         <Box
@@ -255,7 +255,7 @@ const HomePage = () => {
           <GuideCard title="Selection" href="docs/guides/row-selection" />
         </Box>
       </Stack>
-      <Typography my="2rem" textAlign="center" variant="h3">
+      <Typography sx={{ my: '2rem', textAlign: 'center' }} variant="h3">
         Examples To Get You Started
       </Typography>
       <BasicExamples />
@@ -305,7 +305,7 @@ const HomePage = () => {
       <Typography component="p" variant="subtitle2" sx={{ mt: '1rem' }}>
         *If you see any inaccuracies in this table, PRs are welcome!
       </Typography>
-      <LinkHeading mt="4rem" textAlign="center" variant="h3">
+      <LinkHeading sx={{ mt: '4rem', textAlign: 'center' }} variant="h3">
         Maintainers and Contributors
       </LinkHeading>
       <Contributors />

package.json

@@ -25,11 +25,11 @@
     "storybook:dev": "turbo run storybook"
   },
   "devDependencies": {
-    "prettier": "^3.4.2",
-    "turbo": "2.3.3"
+    "prettier": "^3.8.3",
+    "turbo": "2.9.14"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=24.0.0"
   },
-  "packageManager": "pnpm@9.3.0"
+  "packageManager": "pnpm@11.1.0"
 }

packages/material-react-table/.storybook/main.ts

@@ -1,33 +1,19 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import { join, dirname } from 'path';
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
 const config: StorybookConfig = {
   stories: [
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-storysource'),
-    getAbsolutePath('storybook-dark-mode'),
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    'storybook-dark-mode',
   ],
   framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
+    name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },

packages/material-react-table/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { addons } from '@storybook/preview-api';
+import { addons } from 'storybook/preview-api';
 import { Preview } from '@storybook/react';
 import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -21,7 +21,6 @@ const darkTheme = createTheme({
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

packages/material-react-table/README.md

@@ -1,4 +1,4 @@
-# Material React Table V3
+# Material React Table V4
 
 View [Documentation](https://www.material-react-table.com/)
 
@@ -36,7 +36,7 @@ View [Documentation](https://www.material-react-table.com/)
 
 ### _Quickly Create React Data Tables with Material Design_
 
-### **Built with [Material UI <sup>V6</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
+### **Built with [Material UI <sup>V9</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
 
 <img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
 
@@ -114,9 +114,9 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 
 View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
 
-1. Ensure that you have React 18 or later installed
+1. Ensure that you have React 19 or later installed
 
-2. Install Peer Dependencies (Material UI V6)
+2. Install Peer Dependencies (Material UI V9)
 
 ```bash
 npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
@@ -128,7 +128,7 @@ npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react
 npm install material-react-table
 ```
 
-> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you do NOT need to install them yourself.
+> _`@tanstack/react-table` v8.21, `@tanstack/react-virtual` v3.13, and `@tanstack/match-sorter-utils` v8.19_ are internal dependencies, so you do NOT need to install them yourself.
 
 ### Usage