Material React Table

This will be the easiest MRT upgrade ever! Material React Table V3 is mostly just a peer dependency bump to Material UI V6. The Material UI V6 migration is also relatively easy. This should take less than an hour to upgrade in most cases. Definitely a stark contrast from the Material UI V4 to V5 upgrade 💀.

1. Compatible with Material UI V6 with generally better performance across the board

2. Keyboard navigation improvements that are now included by default

3. Almost no other changes. MRT is not taking advantage of the new optional features in Material UI V6 yet. MRT V3 will serve as an easy upgrade target for those who are just looking to upgrade their Material UI package versions.

1. Upgrade Material UI to V6

Before upgrading Material React Table, you need to upgrade Material UI to V6. You will spend most of your time here. Follow the Material UI V6 migration guide to upgrade your Material UI packages.

You can get started by running the following command to set the mui-related dependencies to the latest versions in your package.json. This will not perform the full install yet.

$ npx npm-check-updates -u @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

And then perform the actual install (downloading the new versions):

$ npm i @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

2. Upgrade Material React Table to V3

Run this command to set the material-react-table dependency to the latest version in your package.json. This will not perform the full install yet.

$ npx npm-check-updates -u material-react-table

And then perform the actual install (downloading the new version):

$ npm i 

You should now be on Material React Table V3! Look for any code or type errors in your project and fix them as needed.

• @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

• react and react-dom v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT)

• 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.

  • muiColumnActionsButtonProps

  • muiColumnDragHandleProps

  • muiCopyButtonProps

  • muiEditTextFieldProps

  • muiFilterAutocompleteProps

  • muiFilterCheckboxProps

  • muiFilterDatePickerProps

  • muiFilterDateTimePickerProps

  • muiFilterSliderProps

  • muiFilterTextFieldProps

  • muiFilterTimePickerProps

  • muiTableBodyCellProps

  • muiTableHeadCellProps

  • muiTableFooterCellProps

  • renderCellActionMenuItems

  • renderColumnActionsMenuItems

  • renderColumnFilterModeMenuItems

const table = useTable({
  columns,
  data,
  // Recommended to specify these table options in the defaultColumn instead
+ defaultColumn: { // applies to all columns
+    muiTableBodyCellProps: {
+      align: 'center',
+    },
+    muiFilterAutocompleteProps: {
+      sx: { my: 2 },
+    },
+  },
// these table options will be removed in MRT V4
-  muiTableBodyCellProps: {
-    align: 'center',
-  },
-  muiFilterAutocompleteProps: {
-    sx: { my: 2 },
-  },
)};

You can be lazy with these changes. These table options are just marked as deprecated, but they will still work until MRT V4.

Can I uninstall Emotion Yet? No, Emotion is still required for Material React Table V3, but it won't be for long. MRT V4 will remove the Emotion dependency in favor of Pigment CSS.

Is anything missing from this v3 migration guide? Make a PR or join the Discord to discuss.

Looking for the v1 to v2 migration guide? Click here