add compatibility chart

KevinVandy · KevinVandy · commit 4fc73a6301a6 · 2024-09-04T19:39:36.000-05:00
diff --git a/apps/material-react-table-docs/components/mdx/CompatibilityTable.tsx b/apps/material-react-table-docs/components/mdx/CompatibilityTable.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  MRT_ColumnDef,
+  MRT_TableContainer,
+  useMaterialReactTable,
+} from 'material-react-table';
+
+const columns: MRT_ColumnDef<any>[] = [
+  {
+    accessorKey: 'mrtVersion',
+    header: 'MRT',
+  },
+  {
+    accessorKey: 'reactVersion',
+    header: 'React',
+    size: 100,
+  },
+  {
+    accessorKey: 'muiVersion',
+    header: 'Material UI',
+    size: 100,
+  },
+  {
+    accessorKey: 'muiIconsVersion',
+    header: ' MUI Icons',
+    size: 100,
+  },
+  {
+    accessorKey: 'muiXDatePickers',
+    header: 'MUI X Date Pickers',
+  },
+  {
+    accessorKey: 'emotionVersion',
+    header: 'Emotion',
+    size: 100,
+  },
+  {
+    accessorKey: 'pigmentCSS',
+    header: 'Pigment CSS',
+  },
+];
+
+const data = [
+  {
+    mrtVersion: '1.x',
+    muiVersion: '5.0+',
+    muiXDatePickers: 'Optional',
+    reactVersion: '17.0+',
+    muiIconsVersion: '5.0+',
+    emotionVersion: '11.0+',
+    pigmentCSS: '-',
+  },
+  {
+    mrtVersion: '2.x',
+    muiVersion: '5.13+',
+    muiXDatePickers: '6.15+',
+    reactVersion: '17.0+',
+    muiIconsVersion: '5.0+',
+    emotionVersion: '11.0+',
+    pigmentCSS: '-',
+  },
+  {
+    mrtVersion: '3.x (This Version)',
+    muiVersion: '6.0+',
+    muiXDatePickers: '7.15.0+',
+    reactVersion: '18.0+',
+    muiIconsVersion: '6.0+',
+    emotionVersion: '11.0+',
+    pigmentCSS: 'Optional',
+  },
+  {
+    mrtVersion: '4.x (Next Version)',
+    muiVersion: '6.0+',
+    muiXDatePickers: '7.15.0+',
+    reactVersion: '18.0+',
+    muiIconsVersion: '6.0+',
+    emotionVersion: 'Optional',
+    pigmentCSS: 'Optional',
+  },
+];
+
+export const CompatibilityTable = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    defaultColumn: {
+      muiTableHeadCellProps: {
+        sx: {
+          fontSize: '16px',
+        },
+      },
+      muiTableBodyCellProps: ({ row }) => ({
+        sx: (theme) => ({
+          fontSize: '16px',
+          fontWeight: row.original.mrtVersion.includes('This Version')
+            ? 'bold'
+            : 'normal',
+          color: row.original.mrtVersion.includes('This Version')
+            ? `${theme.palette.primary.main}`
+            : 'inherit',
+        }),
+      }),
+    },
+    enableColumnActions: false,
+    initialState: {
+      sorting: [
+        {
+          id: 'mrtVersion',
+          desc: true,
+        },
+      ],
+    },
+  });
+  return <MRT_TableContainer table={table} />;
+};
diff --git a/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx
@@ -69,7 +69,9 @@ export const SampleCodeSnippet = ({ paperSxProps, ...props }: Props) => {
         code={code}
         language={language}
         theme={
-          theme.palette.mode === 'dark' ? themes.oneDark : themes.jettwaveLight
+          theme.palette.mode === 'dark'
+            ? themes.oceanicNext
+            : themes.nightOwlLight
         }
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
diff --git a/apps/material-react-table-docs/pages/docs/getting-started/install.mdx b/apps/material-react-table-docs/pages/docs/getting-started/install.mdx
@@ -1,12 +1,19 @@
 import Head from 'next/head';
 import { InstallCommand } from '../../../components/mdx/InstallCommand';
 import { FAQs } from '../../../components/mdx/FAQs';
+import { CompatibilityTable } from '../../../components/mdx/CompatibilityTable';
 
 <Head>
   <title>{'Installation - Material React Table V3 Docs'}</title>
   <meta name="description" content="How to install Material React Table" />
 </Head>
 
+## Compatibility Chart
+
+First, before installing Material React Table, let's make sure you have the correct versions of React, Material UI, and Material UI X Date Pickers installed.
+
+<CompatibilityTable />
+
 ## Installation
 
 > `material-react-table` requires **Material UI V6** packages as dependencies in your project.
@@ -36,6 +43,18 @@ import { FAQs } from '../../../components/mdx/FAQs';
 
 ### Common Errors
 
+If you see a react import error like this:
+
+```bash
+Uncaught TypeError: (0 , import_react15.useId) is not a function
+    at useMRT_TableOptions (useMRT_TableOptions.ts:95:8)
+    at useMaterialReactTable (useMaterialReactTable.ts:12:24)
+```
+
+It means that you don't have the correct version of React installed. Make sure you have React 18.0 or higher.
+
+---
+
 If you get an error like this:
 
 ```bash
@@ -46,14 +65,16 @@ or a class/function (for composite components) but got: undefined.
 You likely forgot to export your component from the file it's defined in,
 or you might have mixed up default and named imports.
 
-Or You might be trying to import `MaterialReactTable` from the default export still, which is no longer supported in v2. Make sure you are importing the named export instead:
+Or You might be trying to import `MaterialReactTable` from the default export still, which is no longer supported in v2+. Make sure you are importing the named export instead:
 
 ```diff
 - import MaterialReactTable from 'material-react-table'
 + import { MaterialReactTable } from 'material-react-table'
 ```
 
-Or you probably do not have the correct version of Material UI installed. Make sure all material ui packages are at least V6.11 or higher.
+Or you probably do not have the correct version of Material UI installed. Make sure all material ui packages are at least V6.0 or higher if you are using MRT v3 or higher.
+
+---
 
 If you are using an older version of `webpack` or `create-react-app` and get an error like this:
 
@@ -74,10 +95,10 @@ Then try upgrading either `webpack` or `react-scripts` to the latest versions.
     mainEntity: [
       {
         '@type': 'Question',
-        name: 'Why is React 17 or 18 required for Material React Table?',
+        name: 'Why is React 18 required for Material React Table?',
         acceptedAnswer: {
           '@type': 'Answer',
-          text: '<p>React 17 or later is required by Material UI V6 itself. Some event listeners on Material UI TextField components will not work with React 16.x.</p>',
+          text: '<p>As of MRT V3, it uses some React 18+ features, so React 18 is required. MRT V2 and below are compatible with React 17.</p>',
         },
       },
       {

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,9 @@ export const SampleCodeSnippet = ({ paperSxProps, ...props }: Props) => {`
`69`	`69`	`code={code}`
`70`	`70`	`language={language}`
`71`	`71`	`theme={`
`72`		`- theme.palette.mode === 'dark' ? themes.oneDark : themes.jettwaveLight`
	`72`	`+ theme.palette.mode === 'dark'`
	`73`	`+ ? themes.oceanicNext`
	`74`	`+ : themes.nightOwlLight`
`73`	`75`	`}`
`74`	`76`	`>`
`75`	`77`	`{({ className, style, tokens, getLineProps, getTokenProps }) => (`