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/ComparisonTable.tsx

@@ -3,7 +3,7 @@ import {
   MRT_TableContainer,
   type MRT_ColumnDef,
   useMaterialReactTable,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 
 const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
   {

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

@@ -3,7 +3,7 @@ import {
   MRT_ColumnDef,
   MRT_TableContainer,
   useMaterialReactTable,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 
 const columns: MRT_ColumnDef<any>[] = [
   {

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

@@ -1,4 +1,4 @@
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { MaterialReactTable, type MRT_ColumnDef } from '@glebcha/material-react-table';
 
 const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
   {

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/components/prop-tables/CellInstanceAPIsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_ColumnDef,
   type MRT_Cell,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
 import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
 import { type CellInstanceAPI, cellInstanceAPIs } from './cellInstanceAPIs';

apps/material-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_ColumnDef,
   type MRT_Column,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
 import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
 import {

apps/material-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { MaterialReactTable, type MRT_ColumnDef } from '@glebcha/material-react-table';
 import {
   Link as MuiLink,
   Typography,

apps/material-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_ColumnDef,
   type MRT_Row,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
 import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
 import { type RowInstanceAPI, rowInstanceAPIs } from './rowInstanceAPIs';

apps/material-react-table-docs/components/prop-tables/StateOptionsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_ColumnDef,
   type MRT_TableState,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
 import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
 import { type StateOption, stateOptions } from './stateOptions';

apps/material-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_ColumnDef,
   type MRT_TableInstance,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
 import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
 import { type TableInstanceAPI, tableInstanceAPIs } from './tableInstanceAPIs';

apps/material-react-table-docs/components/prop-tables/TableOptionsTable.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   type MRT_TableOptions,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import {
   Link as MuiLink,
   Typography,

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

@@ -1,4 +1,4 @@
-import { type MRT_Cell } from 'material-react-table';
+import { type MRT_Cell } from '@glebcha/material-react-table';
 
 export interface CellInstanceAPI {
   cellInstanceAPI: keyof MRT_Cell<CellInstanceAPI>;

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

@@ -1,4 +1,4 @@
-import { type MRT_Column } from 'material-react-table';
+import { type MRT_Column } from '@glebcha/material-react-table';
 
 export interface ColumnInstanceAPI {
   columnInstanceAPI: keyof MRT_Column<ColumnInstanceAPI>;

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

@@ -1,4 +1,4 @@
-import { type MRT_ColumnDef } from 'material-react-table';
+import { type MRT_ColumnDef } from '@glebcha/material-react-table';
 
 export type ColumnOption = {
   columnOption: keyof MRT_ColumnDef<ColumnOption>;

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

@@ -1,4 +1,4 @@
-import { type MRT_Row } from 'material-react-table';
+import { type MRT_Row } from '@glebcha/material-react-table';
 
 export interface RowInstanceAPI {
   rowInstanceAPI: keyof MRT_Row<RowInstanceAPI>;

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

@@ -1,4 +1,4 @@
-import { type MRT_TableState } from 'material-react-table';
+import { type MRT_TableState } from '@glebcha/material-react-table';
 
 export type StateOption = {
   defaultValue?: string;

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

@@ -1,4 +1,4 @@
-import { type MRT_TableInstance } from 'material-react-table';
+import { type MRT_TableInstance } from '@glebcha/material-react-table';
 
 export interface TableInstanceAPI {
   tableInstanceAPI: keyof MRT_TableInstance<TableInstanceAPI>;

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

@@ -1,4 +1,4 @@
-import { type MRT_TableOptions } from 'material-react-table';
+import { type MRT_TableOptions } from '@glebcha/material-react-table';
 
 export type TableOption = {
   defaultValue?: string;

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

@@ -7,7 +7,7 @@ import {
   type MRT_ColumnDef,
   MRT_GlobalFilterTextField,
   MRT_ToggleFiltersButton,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 
 //Material UI Imports
 import {

apps/material-react-table-docs/examples/aggregation-and-grouping/sandbox/src/TS.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {

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

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const localeStringOptions = {

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Box, Typography, useMediaQuery } from '@mui/material';
 import { data, type Person } from './makeData';
 

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

@@ -1,7 +1,7 @@
 import {
   MaterialReactTable,
   useMaterialReactTable,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { columns, data } from './makeData';
 
 const Example = () => {

apps/material-react-table-docs/examples/alternate-pagination/sandbox/src/makeData.ts

@@ -1,4 +1,4 @@
-import { type MRT_ColumnDef } from 'material-react-table';
+import { type MRT_ColumnDef } from '@glebcha/material-react-table';
 
 export type Person = {
   firstName: string;

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 
 //example data type
 type Person = {

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { useTheme } from '@mui/material/styles';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { data, type Person } from './makeData';

apps/material-react-table-docs/examples/column-actions-space/sandbox/src/TS.tsx

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {

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

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Divider, MenuItem } from '@mui/material';
 import { data, type Person } from './makeData';
 

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

@@ -4,7 +4,7 @@ import {
   type MRT_ColumnDef,
   MRT_TableContainer,
   MRT_TableHeadCellFilterContainer,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 import { Paper, Stack, useMediaQuery } from '@mui/material';
 
@@ -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/custom-headless/sandbox/src/TS.tsx

@@ -6,7 +6,7 @@ import {
   flexRender,
   type MRT_ColumnDef,
   useMaterialReactTable,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import {
   Box,
   Stack,

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

@@ -5,7 +5,7 @@ import {
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFullScreenButton,
   useMaterialReactTable,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { Box, Button, IconButton } from '@mui/material';
 import PrintIcon from '@mui/icons-material/Print';
 import { data, type Person } from './makeData';

apps/material-react-table-docs/examples/customize-display-columns/sandbox/src/TS.tsx

@@ -4,7 +4,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {

apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 
 export type Person = {
   id: number;

apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/TS.tsx

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { MenuItem } from '@mui/material';
 import { data, type Person } from './makeData';
 

apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx

@@ -3,7 +3,7 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
   type MRT_ColumnDef,
-} from 'material-react-table';
+} from '@glebcha/material-react-table';
 import { citiesList, data, type Person, usStateList } from './makeData';
 
 const Example = () => {