Material React Table

As of June 2023, most feature development is complete for MRT Version 1. MRT Version 2 is actively being developed. Some V1 bugs may still get fixed.

• Replaced "Unsorted" tooltip on header sort icon buttons with sort by next sort direction tooltip

• Fixed accessorFn being called during loading and other undefined data states during loading

• Fixed some button tooltips titles were not overridable

• Fixed virtualized nested column header groups to not crash

• Upgraded to latest TanStack Table v8.10.7 various performance improvements and bug fixes

• Upgraded to latest TanStack Virtual v3.0.0-beta.65 for various bug fixes

• Upgraded to latest TanStack Table v8.10.3 various performance improvements and bug fixes

• Upgraded to latest TanStack Virtual v3.0.0-beta.60 for various bug fixes

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

• Added new internalColumnMenuItems param in the renderColumnActionsMenuItems prop/column option for rendering custom column actions menu items

• Fixed renderColumnActionsMenuItems prop not replacing all default column actions menu items

• Fixed "Clear Filter" menu item not being disabled when no filter is applied for range filters

• Fixed issues with faceted values not being re-calculated when data changes in filter components

• Fixed issue with getFacetedMinMaxValues sometimes returning the wrong data type for the min/max values for range-slider filters

• Added new 'range-slider' filter variant using the MUI Slider component

• Added the enableFacetedValues prop to allow for generating faceted values from the data under the hood

• Small performance improvements by only using certain row models under the hood when certain features are enabled (e.g. no getSortedRowModel() when sorting is disabled)

• Fixed new Next.js key prop warning in console

• Upgraded to latest TanStack Table v8.9.2

• Added MaterialReactTable as a named export and gave a deprecation warning for the default export (will still work but will be removed in v2). This was done in order to comply with rollup bundling best practices.

• Fixed potential internal const issues when columnOrder state was manually managed

• Fixed right column pinning spacing issues

• Implemented enableSortingRemoval in column actions menu

• Internal virtualization specific logic for Firefox vs Chrome

• Exported new MRT_FilterFnsState type

• Exported MRT_TableHeadCellFilterContainer component

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

• Removed internal measureElement virtualizer option to prevent firefox from crashing with virtualization enabled

• Improved row virtualization performance by moving translateY to row style instead of sx to create less emotion css classes

• Upgrade to TanStack Table v8.9.1 for new getGroupingValue column option, and median aggregation function bug fix

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

• update it and nl locales grammar

• tweaked how column actions "filter by" menu menu item behaves

• Removed Column Actions Submenu for "Show all Columns" Menu Item (was complicated unnecessary UI)

• Disabled Column Actions Filter By Menu Item when columns are already visible

• Fixed column resizing causing extra horizontal scrollbar to appear when dense padding is enabled

• Fixed column header min-size being too big for columns with less than 5 characters

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

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

• New highly requested renderEmptyRowsFallback prop for rendering custom JSX when there are no rows to display

• Added staticRowIndex param to muiTableBodyRowProps to make styling striped virtual rows easier

• Now allowing table head, body, and footer cell widths to be specified in sx prop when enableColumnRisizing is disabled. BUT YOU SHOULD STILL USE THE size COLUMN OPTION INSTEAD!

• Fixed issue with "Reset Order" button not always being accurate when position props === "last"

• Fixed issue with draggable columns with grouping disabled still being allowed to be dragged to dropzone.

• Fixed row actions and row menu actions async memo issues

• Upgraded to latest TanStack Table v8.8.5 for new getCanSomeRowsExpand bugfix

• Fixed issue where page index could be out of bounds after the number of rows in the table decreases. Table now goes to the last page automatically when this happens.

• Fixed issue where global filter textbox would not initialize from external state properly

• Fixed typo in onShowColumnFiltersChange prop name (renamed from onShowFiltersChanged)

• Upgraded to latest TanStack Table v8.8.4 for new row.getParentRow APIs and various select all bug fixes

• Upgraded to latest TanStack Virtual v3.0.0-beta.54 for various bug fixes

• Fixed issues with filter match highlighting highlighting cells that had global filtering turned off

• Filter highlighting now uses exactMatch for non "fuzzy" filter modes

• gave hovered selected rows a better primary shade color

• fixed several logic bugs with filter mode switching

• added new multi-sort badge number to sort label

• added new Serbian locales

• improved textOverflow ellipsis

• fixed not empty and empty filters switch not re-rendering

• fixed sort arrow cutoff in non-left alignment

• fixed row action menu click propagation issue

• refactored row cell hover

• Used more comprehensive regex to create css vars for column resizing from column ids/accessorKeys

• Fixed more column resizing issues with nested column groups

• Added official css classNames for column resizing elements

• Added exports for MRT_ExpandButton and MRT_GrabHandleButton components

• Exported MRT_Updater type so it does not have to be imported from @tanstack/react-table

• zh locale row vs column translation tweaks

• Fixed column resizing issues with nested column groups

• Added back support for custom edit and filter textfield children

• Added tableFeatures prop for advanced tableInstance customization

• Flattened TS types for readability

• Fixed more issues with column filter modes onChange resetting column filters too often

• Fixed sorting button accessibility issue

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

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

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

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

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

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