import Head from 'next/head';
<title>{'V2 Changelog and Roadmap - Material React Table V2 Docs'}</title>- 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.
- New
- 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
, anddata-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
andenableEditing
, 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 whenlayoutMode: 'grid-no-grow'
is enabled, or to force a column to not grow whenlayoutMode: 'grid'
is enabled andgrow: false
is setmrt-row-select
,mrt-row-drag
,mrt-row-pin
, andmrt-row-number
columns are now set togrow: false
by default nowmrt-row-expand
column is also set togrow: false
if only detail panels are enabledmrt-row-expand
is now set to asize: 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
andMRT_RowVirtualizer
types - Added behavior to not render Save Row button unless either
onCreatingRowSave
oronEditingRowSave
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
, anduseMRT_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 newcolumnResizeDirection
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 tomuiTablePaginationProps
- 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 returnundefined
- 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 thetableInstanceRef
prop. - Now exporting all
MRT_*
sub-components and utility functions frommaterial-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 toeditDisplayMode
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
orshowLoadingOverlay
are true Progress bars no longer show whenisLoading
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
andenableRowPinning
virtualizerInstanceRef
split intocolumnVirtualizerRef
androwVirtualizerRef
virtualizerProps
split intocolumnVirtualizerOptions
androwVirtualizerOptions
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
Material React Table V2 was a big release months in the making that mostly focussed on the new useMaterialReactTable
hook and paradigms. New features will be added and many bug fixes around virtualization compatibility with advanced features will be prioritized first.
A lighter weight useMaterialReactTableLight
hook is also being considered in the near future that will be a bit more bare-bones and tree-shakable. All features will be opt-in and will not be enabled by default.