The following is a list of notable changes to the Mantine DataTable component.
Minor versions that are not listed in the changelog are bug fixes and small improvements.
- Remove leftover
console.log
statement
- Revert previous commit to fix regression (#663 (comment))
- Fix #663 - buttons not clickable inside emptyState
- Fix #659 - filter popup not closing after clicking outside
- Fix #645 - implement
filterPopoverProps
to allow overriding the default filter popover behavior - Update dev dependencies to ensure compatibility with Mantine 7.14.2 and Next.js 15
- Update build workflow Node.js version
- Minor docs app fixes
- Fix #625 - after implementing row dragging support, inputs inside columns were losing focus
- Update dev dependencies to ensure compatibility with Mantine 7.12.2
- Update dev dependencies
- Implement drag and drop support (see #616)
- Update dev dependencies
- Emphasize that PRs should be made against the
next
branch in the README and on the documentation website
- Add new
paginationWithControls
prop (thanks to @ValentinJS for PR #611) - Minor docs website improvements
- Attempt to fix issue #596 again, thanks to @gfazioli for PR #608
- Update deps to ensure compatibility with Mantine 7.11.0
- Fix issue #596 (new columns don't appear when added to
useDataTableColumns
), thanks to @gfazioli for PR #603 - Update dev dependencies
- Update dev dependencies to ensure compatibility with Mantine 7.10.2 and Next.js 14.2.4
- Update dev dependencies to ensure compatibility with Mantine 7.10.1
- Add support for sorting by nested property in columns (see PR #600)
- Fix issue #593 (
cursor: pointer
not showing when usingonRowClick
)
- Update dev dependencies to ensure compatibility with Mantine 7.9.1
- Improve row expansion styling to hide bottom border when being rendered in the last row of the table
- Fix #588 -
withRowBorders=false
being ignored in the last row - Add documentation notice about
pinFirstColumn
andpinLastColumn
not being supported in combination with nested tables
- Update dev dependencies to ensure compatibility with Mantine 7.9
- Update GitHub workflow action versions
- Add
rowExpansion.expandable
property defining if row can be expanded (see #579, by @camdarley) - Update dev dependencies to ensure compatibility with Mantine 7.8.1, Next.js 14.2.3 and React 18.3
- Update all internal
<Text/>
components to output divs instead of paragraphs to avoid issues such as #570
- Update peer dependencies to Mantine 7.8
- Remove
useDragToggleColumns
hook, previously deprecated in favor ofuseDataTableColumns
- Make the scroll shadows gentler, especially in dark mode
- Optimize scroll-triggered re-renders by using a
debouncedProcessScrolling
method - Implement
maxHeight
property
- Allow passing getInitialValueInEffect to useLocalStorage hook in useDataTableColumns (see #560 by @Sajarin-M)
- Update dev dependencies to ensure compatibility with Mantine 7.7.0
- Update peer deps to exclude Mantine
7.7.1
due to this bug that causes "maximum update depth exceeded" - Add a default value of
'mantine-datatable'
tostoreColumnsKey
(used as a prefix in theuseDataTableColumns
hook)
- Update dev dependencies to ensure compatibility with Mantine 7.6.1 & Next.js 14.1.2
- Update dev dependencies to ensure compatibility with Mantine 7.6.0
- Fix #553 - loading spinner makes the table too dark in dark mode
- Update dev dependencies to ensure compatibility with Mantine 7.5.0
- Improve first and last column pinning CSS to allow combining the feature with column groups
- Improve last column pinning CSS to fix a minor glitch in webkit browsers
- A few documentation improvements
- Improve column toggling UX & code efficiency
- Update dev dependencies to ensure compatibility with Mantine 7.4.2 and Next.js 14.1
- Fix unhandled Runtime Error with column dragging/toggling (PR #514)
- Update dev dependencies
- Implement the
selectionCheckboxProps
property to allow customizing all selection checkboxes at once
- Improve default column toggling behavior
- Implement
pinFirstColumn
feature - Fix minor UI glitch when using highlight on hover and the table contains no records (issue #508)
- Expose
tableRef
property to access the table element
- Ensure compatibility with Mantine 7.4
- Minor docs improvements
- Minor README updates
- Minor README improvements
- Fix checkbox inside filter popover not working (issue #481)
- Implement column resizing (see #490);
- Deprecate
useDragToggleColumns
hook in favor ofuseDataTableColumns
; - Implement
onRowDoubleClick
andonCellDoubleClick
callbacks; - Fix typos in the documentation;
- Update deps to ensure compatibility with Mantine 7.3.2
- Implement column dragging and toggling (see #483);
- Implement
selectionColumnClassName
andselectionColumnStyle
properties; - Update deps to ensure compatibility with Mantine 7.3.0
- Make sure to omit
stickyHeader
andstickyHeaderOffset
properties from inherited Table component props to avoid confusion, since Mantine DataTable header is sticky "as needed"
- Add
selectionTrigger
property to allow maximizing the selection area to the entire cell holding the checkbox
- Fix backgrounds for selection cell and last column when using
pinLastColumn
feature (see issues #464 and #465)
- Improve shadows positioning CSS
- Implement
pinLastColumn
feature - Add missing
package.json
fields (main
andmodule
)
- Switch to
tsup
building, to fix usage issues with Remix & Next.js
- Switch to
esm
export only, to fix this issue: #451
This is a potentially breaking change and I'm sorry to do it in a patch release, but the library needs to work with Next.js pages router
This is a major rewrite of the library internals, with the following goals in mind:
- Mantine V7 compatibility - switch the styling approach from CSS-in-JS to PostCSS (or PostCSS modules)
- Make the repo easier to maintain by switching from a monorepo approach to a single-package that includes the source code, documentation and examples; this should also make it easier for new contributors to get started
- Streamline the build process - switch from
esbuild
to plaintsc
andpostcss
commands - Rewrite the entire documentation website to make use of Next.js app router and React Server Components; this should also ensure the package will work properly in such an environment
Since the V7 is a major rewrite, it contains a number of BREAKING CHANGES, including but not limited to:
- The
sx
styling properties are no longer supported; usestyle
,className
,styles
andclassNames
instead - The column
textAlignment
property was renamed totextAlign
- The table
verticalAlignment
property was renamed toverticalAlign
- The internal context-menu functionality was removed in favor of using the Mantine ContextMenu package (built by the same author), which is more flexible and feature-rich
- Some method signatures (such as click handlers) were changed from
(record, index) => ...
to({ record, index }) => ...
for clarity
- Initial V7 alpha releases
- Bump version to 6.0.0 to match the compatible versions of
@mantine/hooks
and@mantine/core
. From now on, let's keep the major version ofmantine-datatable
in sync with the major version of Mantine core
- The internal
useElementOuterSize
hook now return floats instead of integers, for better shadow rendering
- Use a custom
useElementOuterSize
hook instead of Mantine'suseElementSize
to avoid this bug
- Fix
@mantine/core
&@mantine/hooks
peer dependencies version numbers inpackage.json
to>=6 <=6.0.17 || >=6.0.19
- Try to lock
@mantine/hooks
and@mantine/core
peer dependencies to!= 6.0.18
, to avoid a bug introduced by theuse-element-size
hook
- Fix a minor display bug when using rows selection inside nested tables (see #387)
- Relax
customRowAttributes
&customCellAttributes
return types toRecord<string, unknown>
in order to support custom event handlers (see #380)
- Fix a bug when filtering popover triggers sorting button (see #368)
- Make records selection feature optional for generic usage (see #361)
- Fix row context menu not showing properly when used on tables inside modals (see #354)
- Add
defaultColumnProps
(see #340)
- Relax
peerDependencies
(to Mantine 6.x)
- Implement column groups (issue #207 / PR #330 / thanks to @MatthijsMud)
- Accept
scrollAreaProps
(issue #327/ PR #328)
- Allow
idAccessor
to be a string or a function, in order to support composite keys (issue #315)
- Improve filtering support documentation
- Implement filtering support, thanks to @MatthijsMud (PR #297)
- Slight change in the default sorting behavior (issue #295)
- Implement column footers (issue #252)
- Internal refactoring of the pagination component
- Make
rowExpansion.expanded.onRecordIdsChange
optional - Implement
noHeader
property to hide the table header (issue #253) - Add nested tables examples
- Improve sort icons accessibility (issue #263)
- Fix
paginationColor
not being applied correctly to the page size selector (issue #261)
- Implement additional properies to improve accesibility:
allRecordsSelectionCheckboxProps
,getRecordSelectionCheckboxProps
,getPaginationControlProps
- Pass the original event to the
onCellClick
andonRowClick
callbacks
- Implement custom sort icons
- Prevent row click when clicking the selector cell (issue #238)
- Export utility functions:
differenceBy
,getValueAtPath
,humanize
,uniqBy
- Add Jest tests (thanks to @AlexcastroDev)
- Improve sort column header accessibility (thanks to @arperry)
- Minor performance improvements
- Fix left scroll shadow (when row selection enabled) regression due to Mantine 6.x upgrade
- Update to TypeScript 5.x
- Add
scrollViewportRef
property to access the scroll viewport element - Adjust the infinite scrolling example to use the new
scrollViewportRef
property
- Add
onScrollToTop
,onScrollToBottom
,onScrollToLeft
andonScrollToRight
callbacks - Add infinite scrolling example
- Ensure Mantine 6.x compatibility
- Switch from
tabler-icons-react
to@tabler/icons-react
- Fix incorrect sorting arrow direction (#191)
- Decrease space between column name and sorting arrow
- Fix row column border color not being applied correctly
- Improve
bodyRef
property type
- Fix
noWrap
column property not working - Expose
bodyRef
property to access the table body element (useful for animating table row operations with AutoAnimate)
- Ensure footer background respects theme color scheme
- Implement
noWrap
column property - Use explicit type imports in package
- Implement
defaultColumnRender
property to customize the default column render function
- Implement additional row styling properties (
rowClassName
,rowStyle
,rowSx
)
- Implement the custom row / cell attributes feature
- Update Mantine to 3.8.0 & TypeScript to 4.9.3
- Update Mantine to 3.7.2
- Update Mantine to 3.7.1
- Implement #116: custom loader component
- Add
loaderColor
property
- Implement #100: page size selector
- Fix #110: context-menu positioning bug in RTL display mode
- Implement #101:
isRecordSelectable: (record: T) => boolean
property to prevent the selection of certain records
- Fix #102:
paginationText
was overriden when no records were found - Add
loadingText
option
- Implement row expansion controlled mode
- Implement margin props on the DataTable component (m, my, mx, mt, mb, ml, mr)
- Add cell click handlers
- Add
recordIndex
as a second parameter on various hadlers and callbacks (such asonRowClick
, columnrender
, etc.)
- Implement the row expansion feature
- Drop
lodash
peer dependency
- Initial release