Material React Table

• Fixed sorting button accessibility issue

• Allow enableEditing prop and column options to be enabled conditionally per row (row) => boolean

• Add editVariant and editSelectOptions column options to make it easier to create edit dropdowns

• Add enableFilterMatchHighlighting as a column option to enable/disable filter match highlighting on a per column basis

• Fixed issue with column resizing vars when "(" or ")" are in accessor keys

• Fixed issue with column filter modes onChange resetting column filters too often

• Fixed issue with manually managed grouping state not auto-showing the built-in mrt-expand-row column

• Re-export all State types from TanStack Table so that they can be imported from material-react-table instead of @tanstack/react-table

• Re-export all Virtualizer types from TanStack Virtual so that they can be imported from material-react-table instead of @tanstack/react-virtual

• Export all MRT sortingFns, filterFns, and aggregationFns from 'material-react-table' so that they can be imported from material-react-table instead of @tanstack/react-table

• Upgrade to TanStack Virtual v3 beta 47

• Fixed issue with nested grouped columns and column re-ordering sizes

• Added new PlaceholderCell cell render override as a column option

• Touched up the cell resize handle styling

• Allow expand button props to override children for custom icons

• Fixed issue with column resizing css vars when "+" are in accessor keys

• Fixed issue with column resizing css vars when spaces are in accessor keys

• Fixed issue with column resizing css vars when using nested accessor keys with dot notation

• Column Resizing performance improvements by switching to CSS vars for column widths and memoizing the table body during resizing by default

• columnResizeMode now defaults to "onChange" instead of "onEnd"

• Allow for column sizes to not grow if flex grow is disabled when layoutMode is "grid"

• Get rid of table row hover transition time for better UI.

• Added sv translations that can be imported from 'material-react-table/locales/sv'

• Added uk translations that can be imported from 'material-react-table/locales/uk'

• Fixed row dragging borders not showing in semantic layout mode

• Disabled ranked results when expanded sub rows are present

• Auto disable select checkboxes when row.getCanSelect() is false

• Upgrade to latest TanStack Table v8.7.9 for select all checkbox bug fix when row selection is conditionally enabled per row

• Fixed alert banner z-index issue

• Added new Filter Match Highlighting feature that is enabled by default, but can be disabled with the enableFilterMatchHighlighting prop

• Added import for the MRT_EditActionButtons component for better custom row actions

• Cleaned up Toolbar DropZone styling

• Fixed issue with table body cell "center" and "right" alignment when layoutMode="grid" or virtualization is enabled

• Upgraded to latest TanStack Table v8.7.8 for various bug fixes relating to null values in data

• Added da translations that can be imported from 'material-react-table/locales/da'

• Fixed small resize handle drift issue when resizing columns

• Adjust TableFooterRow background color to match TableHeadRow background color by default

• Add table border-collapse 'separate' to fix row borders not showing in Firefox

• Add imports for bottom and top toolbar components for custom toolbar rendering

• Fixed issue with memoized rows not sorting correctly with row virtualization enabled

• Fixed issue with exiting full screen causing virtualized rows to disappear

• Freeze TanStack Virtual version to beta 30

• Fixed global filtering with manual pagination when on page 2 or greater

• Upgrade to latest TanStack Table v8.7.6 for various bug fixes

• Fixed filter text field value not updating from external state change and fix filter clear icon button being disabled when value is not a string

• Fixed empty and not empty filter chip clearing defaulting back to only available filter modes

• Added new showToolbarDropZone state option to allow manual control of when the toolbar drop zone is visible

• Fixed sticky footer z-index issue when using column pinning

• Added zh-Hans and zh-Hant translations that can be imported from 'material-react-table/locales/zh-Hans' and 'material-react-table/locales/zh-Hant' respectively

• New column virtualization feature that can be enabled with the enableColumnVirtualization prop and customized with the columnVirtualizationProps and columnVirtualizerInstanceRef props

• Deprecated (renamed) virtualizerInstanceRef prop in favor of rowVirtualizerInstanceRef

• Deprecated (renamed) virtualizationProps prop in favor of rowVirtualizationProps

• Fixed crashes with empty nested data and initial filter, sorting, grouping, and pagination states

• Fixed MUI debounce import when @mui/material v5.11.0 is installed

• Fixed select placeholder when muiTableBodyCellEditTextFieldProps.placeholder is set

• Fixed custom muiTableBodyProps.children not being rendered

• Give TableBody a default minHeight of 100px when no rows are present

• Fixed row virtualization with detail panels to make it usable

• Added classNames to Detail Panel Rows and Cells to make them easier to target with CSS

• Lowered default row virtualization overscan default count from 10 to 4

• Added imports for MRT_ToolbarAlertBanner and MRT_ToolbarDropZone components for custom toolbars

• Upgrade to TanStack Virtual v3 for better virtualization performance and bug fixes - (small breaking changes if using advanced virtualized customization features)

• New layoutMode prop to allow for either "semantic" or "grid" (flex) CSS layouts for table components

• New onEditingRowCancel prop

• New "Collapse" tooltip for all locales on expand buttons when expanded

• Clicking filter icon in header now focuses filter textfield

• Added nl translations that can be imported from 'material-react-table/locales/nl'

• Updated ru translations that can be imported from 'material-react-table/locales/ru'

• Fixed some column hiding menu edge cases

• Added ro translations that can be imported from 'material-react-table/locales/ro'

• Upgraded to latest TanStack Match Sorter Utils 8.7.0 for webpack compatibility fixes and better esm support

• Upgraded to latest TanStack Table 8.7.0 for webpack compatibility fixes and better esm support

• Added vi translations that can be imported from 'material-react-table/locales/vi'

• Upgraded to latest TanStack Table 8.6.0 for new maxLeafRowFilterDepth prop

• Added fr translations that can be imported from 'material-react-table/locales/fr'

• Upgraded to latest TanStack Table 8.5.30 for better TypeScript performance

• Upgraded to latest TanStack Table 8.5.27 for better sorting in grouped rows

• Fixed filter textfield calling clear method on mount which sometimes caused additional data fetches

• Upgraded to latest TanStack Table 8.5.24 to fix filterFromLeafRows bug

• Fixed getRowId prop type

• Added tr translations that can be imported from 'material-react-table/locales/tr'

• Emergency fix remove fa as default translations

• Added fa translations that can be imported from 'material-react-table/locales/fa'

• Upgraded to latest TanStack Table v8.5.22 for massive grouping performance improvements

• small optional chaining fix for custom textfileds

• it locale fix

• Upgraded to latest TanStack Table v8.5.21

• Added Multi-Aggregation Per Column Feature

• renamed onFilterFnsChange to onColumnFilterFnsChange (breaking change)

• fixed grouped rows should not show edit text fields when in "table" editing mode

• Upgraded to latest TanStack Table v8.5.18

• Added it translations that can be imported from 'material-react-table/locales/it'

• Allow Sort Icon (ArrowDownward) to be replaced with custom icon

• Fixed some minor spacing issues in Table Head Cell icon buttons

• Fixed select and expand column headers sometimes not showing correctly

• Un-memoized localization prop internally to allow for dynamic localization updates

• Made Columns Actions Button slightly smaller

• Fixed: globalFilterFn prop had wrong type

• Fixed: All Mui imports use default exports to reduce number of modules in dev mode

• Fixed: Icon imports use default exports to reduce number of modules in dev mode

• Disable more display columns and detail panel stuff while isLoading is true

• Fixed overflow issues with expand all button and select all checkbox

• Disable detail panel render while isLoading is true

• New Header default ellipsis behavior when column width is smaller than header string

• Column Actions and Column Grab Handles now left-align by default

• Column Alignment Improvements when align is 'center' or 'right'

• footer z-index fix during fullscreen mode

• bigger resize handle accessibility

• New memoMode prop to enable memoizing cells, rows, or the entire table body

• Radio Buttons now show instead of checkboxes when enableMultiRowSelection=

• Fixed dragging column bottom-border sometimes showing on wrong row

• Various Render Performance Improvements

• Fixed Sticky Header with pinned columns in full screen mode

• Added ru translations that can be imported from 'material-react-table/locales/ru'

• Added de translations that can be imported from 'material-react-table/locales/de'

• Update es translations

• Remove unnecessary memo that was causing issues with aggregated cells not updating

• Fixed Actions Column sometimes forced to be first column

• Fixed Mixed Header Groups levels not created with correct column order state

• Added cs translations that can be imported from 'material-react-table/locales/cs'

• Fixed sticky header z-index issue with select checkboxes and expand buttons

• Added pl translations that can be imported from 'material-react-table/locales/pl'

• Added es translations that can be imported from 'material-react-table/locales/es'

• Initial Stable Release

• v1.0.0-beta.16 - selectAllMode default value changed to "page"

• v1.0.0-beta.6 - onColumnDrop and onRowDrop props removed, since they can easily be hooked up manually in muiTableBodyRowCellDragHandleProps

• v0.41.0 - Filter start icon will no longer be shown if enableColumnFilterModes is not enabled

• v0.40.7 - enabledGlobalFilterOptions renamed to globalFilterModeOptions

• v0.40.2 - new tableInstanceRef and virtualizerInstanceRef props

• v0.39.0 - Renamed enableColumnFilterChangeMode to enableColumnFilterModes, renamed enableGlobalFilterChangeMode to enableGlobalFilterModes. New renderColumnFilterModeMenuItems and renderGlobalFilterModeMenuItems props.

• v0.38.3 - New enableStickyFooter prop useful for aggregation features

• v0.38.0 - New GroupedColumn cell render column def option, new muiToolbarAlertBannerChipProps, renamed muiTableToolbarAlertBannerProps to muiToolbarAlertBannerProps, muiTableTopToolbarProps to muiTopToolbarProps, muiTableBottomToolbarProps to muiBottomToolbarProps

• v0.37.2 - Aggregation cell renders enabled, AggregatedCell needed to render aggregated cell.

• v0.37.0 - Major Editing Feature Changes: "modal" is now the default editingMode. New required exitEditingMode param in onEditingRowSave to allow dev to exit editing mode only after validation passes. Fixed auto-filled values not saving in editing row submit. tableId prop removed as it is now unnecessary and was being confused with an html id attribute. Major internal ref refactors to better follow React best practices and improve performance.

• v0.36.0 - onCellEditBlur and onCellEditChange props removed because the already exist on muiTableBodyCellEditTextFieldProps. Examples given here

• v0.35.2 - Change onEditRowSubmit name to onEditingRowSave

• v0.35.1 - "current" prefix in some state options removed from name (i.e. currentEditingRow is now just editingRow), new editing value(s) arguments, better types for editing features

• v0.34.0 - rolled back to react-virtual 2.0 to fix flickering issue, MRT_Internal Toolbar components are now exported from MRT instead of in params

• v0.33.0 - onTableInstanceChange removed, onStateChange removed, currentFilterFns renamed to columnFilterFns, custom filterFns can be used again, renamed ToolbarBottom to BottomToolbar and ToolbarTop to TopToolbar

• v0.31.0 - new DropZone component in toolbar for grouping while dragging a column that can be grouped

• v0.29.0 - new filterVariant option on columnDef to indicate if filter is a select filter, multi-select filter, text filter, etc.

• v0.28.0 - virtualizerProps has slightly differently named options, as MRT upgraded to @tanstack/react-virtual v3.

• v0.27.0 - enableColumnFilterModes is now false by default, but can be turned on easily by just setting it to true.

• v0.23.0 - TanStack Table v8.2 has new cell.getValue<>() generics

• v0.22.1 - showFilters state renamed to showColumnFilters

• v0.22.0 - React DnD replaced with custom solution for drag and drop. Now lib is 16kb smaller!

• V0.19.0 - Data Column Definitions now need an accessorKey or a combination of an id and accessorFn to be used as the key for the data row.

• V0.19.0 - instance was renamed to table across all callback functions to be inline with TanStack Table V8.1.

• V0.18.0 - on...Changed callback props were removed as they were redundant with the on...Change callback props. Hoisting state will be the recommended way to watch for table state changes and react to them.

Most of the features that will ever be added in Version 1 have been added. They will continue to be polished, and bugs will continue to be fixed.

One area of focus, however, will be improving the editing features. There is still some room for improvement and quality of life improvements that can be made.

Another large feature that could be added is a "row pinning" feature. It would allow users to pin rows to the top of the table, and would be useful for things like "favorites" or "pinned" rows. It would work very similarly to the "column pinning" feature that is already in the table.

Version 2 will probably not come out until Material UI v6 is released. It will be developed while MUI v6 is in alpha, and will be released when MUI v6 is released.

If you are interested in following along the development of any of these features, be sure to join the Discord