Material React Table

Note: As of v2.12.0, the React and ReactDom peer dependencies have been moved back down to React v17 in order to help more people upgrade to MRT v2 without having to upgrade to React v18.

• Upgraded to TanStack Table v8.16.0

  • New sortUndefined "first" and "last" options to allow forcing undefined values to be pushed to the beginning or end of sorted rows.

  • New _features table option to allow adding new custom internal features to the TanStack Table instance.

  • fixed column.getCanGroup always resolving to true

• Started using the default modal z-index value from the MUI theme for the full-screen table dialog to avoid issues with other modals and app bar components.

• Disabled Edit Save Button when isSaving state is true

• Fixed DatePicker Types generic

• Fixed rangeFilterIndex being undefined in filterProps callback

• Added hr locale for Croatian translations

• Upgraded to TanStack Table v8.13.2

  • Fixed column.getIsVisible() not returning accurate value for parent group columns

  • Fixed Deep Keys type for Partial TData types

  • New pagination table instance APIs

• Marked React 17 as a peer dependency instead of React 18 since concurrent features are not yet being utilized under the hood in MRT (not until MRT v3 now)

• Filter label tooltip will show label instead of value when a label is provided to filterSelectOptions

• Fixed Column and Row Dragging element animation to not go back to where it started when dragging

• Replaced dv styles with dvh styles in full-screen mode

• Upgraded to TanStack Table v8.12.0 for new column pinning/sizing/pinning instance APIs and better column resizing performance

• Fixed "Clear selection" button to always clear selection for all pages

• Fixed bugs with batch row selection and row pinning together

• Fixed duplicate pinned rows when global filter is present for non-sticky row pinning modes

• Fixed selected row count in toolbar alert banner with sub row selection

• Fixed bug where new batch row selection feature did not account for manualPagination

• Fixed bug where parent selected checkbox should not be indeterminate when the row itself is selected

• Added new enableBatchRowSelection table option that is enabled by default that allows users to select multiple rows at once by holding down the shift key and clicking on a row

• Added small "Clear selection" button to the toolbar alert banner selected message by default when rows are selected

• Now exporting all MRT_*Props component prop types

• Added new override option for passing in custom spinner while loading data with the muiCircularProgressProps.Component prop

• Fixed Autocomplete filter showing filter values instead of display labels once value is selected

• Removed default Header html title attribute on all header cells

• Added automatic column order state recalculation for dynamic columns and dynamic MRT display columns being enabled/disabled

  • Fixed bugs where enabling a feature like row selection conditionally would add columns to the end of the table when columnOrder state was not manually managed

  • Fixed bugs where the show/hide columns menu would be empty when loading in dynamic column definitions without providing the columnOrder state manually

• Added new Cell Actions features which will show a MUI context menu when a cell is right-clicked

  • New enableCellActions table option

  • New renderCellActionMenuItems table and column options

  • New MRT_ActionMenuItem component to make styling all MRT menu items consistently (icons, text, spacing) easier to be consistent

• Fixed bug where the show all columns action menu item ignored the enableHiding column option

• Added disableScrollLock: true to all MUI Menus and Select Menus to keep menus with their anchor origin while scrolling by default

• Switched pagination rows per page select to use native select by default in mobile viewports

• Fixed pagination rows per page input label for accessibility attribute

• Removed unnecessary ::after pseudo elements on table cells if they were unused

• Fixed edge cases with footer cell alignment

• Added position: 'relative' to table and all rows and cells

  • Fixed semantic sticky header regression

  • Fixed row order/dragging with column virtualization enabled bug

• Fixed row selection highlighting logic on grouped/aggregated rows

• Added new renderCaption table option to allow for a <caption> element to be rendered within the table

• Fixed row hover opacity style issues for pinned columns and selected rows with ::before and ::after pseudo elements in pinned cells

• Standardized data-index, data-pinned, and data-selected attributes on body rows, head cells, body cells, and footer cells where applicable

• Column virtualization performance optimizations

• Removed internal display column def memoization that caused edge cases with enabling and disabling features conditionally. (like enableRowActions and enableEditing, etc.)

• Improved Column Resizing and Column/Row DnD Performance by caching column definitions while user is dragging

• Added new grow column option to allow for columns to grow to fill the remaining space in the table when layoutMode: 'grid-no-grow' is enabled, or to force a column to not grow when layoutMode: 'grid' is enabled and grow: false is set

  • mrt-row-select, mrt-row-drag, mrt-row-pin, and mrt-row-number columns are now set to grow: false by default now

  • mrt-row-expand column is also set to grow: false if only detail panels are enabled

  • mrt-row-expand is now set to a size: 100 by default (slightly wider)

• Fixed indentation of mrt expand column when layoutMode was grid or grid-no-grow (using margin instead of padding now)

• Modified editSelectOptions to allow for dynamic values on a per-cell basis. ({ row, cell, etc. }) => []

• Fixed edit textbox controlled component warning

• New 'positionCreatingRow' table option to customize where the creating row is rendered in the table body

• All MRT MUI menus now use the baseBackgroundColor mrt theme color for the menu background color

• Fixed bug where the page index was not being reset to last page with rows when number of rows in the table changed

• Made some tooltips text non-interactive to prevent accidental clicks

• Simplified internal column preparation APIs

• Upgraded to TanStack Table v8.11.6 for SSR bugfix (document not defined)

• Added support for Detail Panels and Row Virtualization at the same time

• Added support for Conditional Detail Panels (expand button is disabled when renderDetailPanel returns falsy value). Empty detail panels <tr> still render for virtualization and striped rows to work properly.

• Fixed Row Selection indeterminate and checked state when sub-row selection is off

• Fixed Expand Row Button padding and rotation in RTL mode

• Fixed Pagination Icon Buttons in RTL mode

• Set a default "right" cell alignment when theme.direction is "rtl"

• Improved Header Group Column Sizing

• Removed some internal "@mui/material" imports. (Could speed up dev server hot reloads in some cases)

• Fixed bug where Date and Time Picker filters were not opening properly on mobile devices

• Fixed selected row count in toolbar alert banner when using manualPagination

• Fixed row dragging with column virtualization enabled

• Fixed filter mode switching away from empty/notEmpty having an empty space value

• Fixed any setDragImage errors with internal try/catch when refs are null

• Fixed filter range slider not having a min width in popover columnFilterDisplayMode

• Implemented better default UI for groupedColumnMode: 'remove'. Expand column shows grouped row values

• Fixed grouped parent row selection toggling bugs

• Tweaked media queries for search textbox on top of top toolbar alert banner

• Fixed MUI Pagination disabled tooltip warning

• Fixed Column Pinning Spacing with Column Virtualization

• Fixed Column Action Clear Filter Item when filterFn was "empty" or "notEmpty"

• Upgraded to TanStack Table v8.11.3 for bug fixes with expanding and row selection

• Added 'datetime', 'datetime-range', 'time', and 'time-range' filter variants

• Added Tooltips to pagination buttons

• Added new MRT_ColumnVirtualizer and MRT_RowVirtualizer types

• Added behavior to not render Save Row button unless either onCreatingRowSave or onEditingRowSave is provided

• Allowed muiColumnActionsButtonProps.children to be overridden with a custom icon

• Fixed issue with Sticky Row Pinning and Row Virtualization

• disable row selection for creating row

• fixed virtualized column index warning

• Added new visibleInShowHideMenu column option to allow for columns to be hidden from the show/hide columns menu, regardless of column visibility state

• Fixed bug where the Show All button in the show/hide columns menu did not properly skip columns with enableHiding: false set

• Fixed bug where creatingRow did not work with virtualization enabled

• Added new useMRT_Rows, useMRT_ColumnVirtualizer, and useMRT_RowVirtualizer hooks to allow for more advanced use cases for headless mode

• Fixed possible duplicate table body row keys warning

• Upgraded to TanStack Table v8.11.2 for new columnResizeDirection table option

• Added proper column resizing support for right-to-left languages

• Updated French locale

• Fixed warning on edit textfield with outlined variant

• Fixed horizontal scrollbar showing up in layoutMode grid with column resizing enabled

• add disabled prop to muiTablePaginationProps

• Upgraded to TanStack Virtual v3.0.1 stable release

• Added MuiTablePagination-root class to mrt pagination root element for easier styling

• Fixed potential duplicate key warning while rendering skeleton rows when getRowId table option is provided and doesn't properly return undefined

• Fixed muiSearchTextFieldProps.InputProps now able to partially overridden

• Add support for 'all' rows pagination option

• Added muiPaginationProps.SelectProps support back to allow for native select

• Locale updates

• Fixed bug with popover filters null ref focus

• Fixed bug where edit row action menu was created for all editDisplayModes

• Fixed rest spread on table head row

• Changed pagination text to a span instead of with hardcoded 0 margin and padding

• Made MaterialReactTable a named export instead of a default export.

• Made @mui/x-date-pickers a required peer dependency.

• Added new useMaterialReactTable hook to replace the need for the tableInstanceRef prop.

• Now exporting all MRT_* sub-components and utility functions from material-react-table package to allow for easier building of custom UIs in headless mode.

• Added createMRTColumnHelper utility function to help with creating columns with slightly more type-safety.

• Added new mrtTheme table option to allow for changing some basic mui theme colors that are hard to target with CSS or the mui theme provider.

• Added new layoutMode: 'grid-no-grow' option for better column resizing behavior.

• Improved column resizing UI.

• Added new columnFilterDisplayMode option to allow for different filter UIs.

• Added new createDisplayMode table option to allow for different create/editing UIs. Added new functionality for creating new rows in the table.

• Renamed editMode prop to editDisplayMode table option.

• Added new paginationDisplayMode option to allow for different pagination UIs.

• Added new rowPinningDisplayMode table option and row pinning features.

• Added new "autocomplete" filterVariant.

• Added new "date" filterVariant.

• Added new "date-range" filterVariant.

• Added new loading overlay UI features when isLoading or showLoadingOverlay are true Progress bars no longer show when isLoading is true.

• Changed the default sort icon and show it as visible with a low opacity by default in table header cells.

• Changed the filter label icon to show before the sort icon in table header cells.

• Changed the default global filter search box UI to be compact and outlined.

• Changed edit text field UI to be more compact by default.

• Changed the default rowNumberDisplayMode to "static".

• Changed how the full screen table UI works internally. (No more mui full screen dialog, just simple CSS)

• Upgraded to TanStack Table v8.10.7

• Upgraded to TanStack Virtual v3.0.0-beta.68

• Renamed options

  • editingMode -> editDisplayMode

  • rowNumberMode -> rowNumberDisplayMode

  • enablePinning -> enableColumnPinning and enableRowPinning

  • virtualizerInstanceRef split into columnVirtualizerRef and rowVirtualizerRef

  • virtualizerProps split into columnVirtualizerOptions and rowVirtualizerOptions

  • columnVirtualizerProps -> columnVirtualizerOptions

  • rowVirtualizerProps -> rowVirtualizerOptions

  • muiTablePaginationProps -> muiPaginationProps

  • muiTableBodyCellCopyButtonProps -> muiCopyButtonProps

  • muiTableBodyCellEditTextFieldProps -> muiEditTextFieldProps

  • muiTableBodyCellSkeletonProps -> muiSkeletonProps

  • muiTableBodyRowDragHandleProps -> muiRowDragHandleProps

  • muiTableDetailPanelProps -> muiDetailPanelProps

  • muiTableHeadCellColumnActionsButtonProps -> muiColumnActionsButtonProps

  • muiTableHeadCellDragHandleProps -> muiColumnDragHandleProps

  • muiTableHeadCellFilterCheckboxProps -> muiFilterCheckboxProps

  • muiTableHeadCellFilterTextFieldProps -> muiFilterTextFieldProps

  • muiTableHeadCellFilterSliderProps -> muiFilterSliderProps

  • MRT_FilterFnsState -> MRT_ColumnFilterFns

  • MaterialReactTableProps -> MRT_TableOptions

  • MRT_FullScreenToggleButton => MRT_ToggleFullScreenButton

Is anything missing from this v2 changelog? Make a PR or join the Discord to discuss.

See the old V1 Changelog

Curious about future releases? Check out the Roadmap