Density Toggle Feature Guide
Mantine React Table includes a density toggle button in the top toolbar by default where a user can toggle between 3 different density levels. This is a great feature to include to help with accessibility for different user preferences, but it can easily be disabled if it is not wanted.
Relevant Table Options
By default, Mantine React Table will render with a medium
A density toggle is shown by default to let a user change the density to cycle through
xsdensity is set, whitespace is set to
nowrapby default to keep the rows as short in height as possible. This can be overridden in the
mantineTableBodyCellPropsstyles or sx prop.
Change Default Density
If you want to change the default density, you can set that in either the
Disable or Hide the Density Toggle
You can change the default density, and disable the density toggle itself if you want.
In this example, the density toggle is disabled and a
xsdensity is set by default in the
|Dylan||Murray||261 Erdman Ford||East Daphne||Kentucky|
|Raquel||Kohler||769 Dominic Grove||Columbus||Ohio|
|Ervin||Reinger||566 Brakus Inlet||South Linda||West Virginia|
|Brittany||McCullough||722 Emie Stream||Lincoln||Nebraska|
|Branson||Frami||32188 Larkin Turnpike||Charleston||South Carolina|
1-5 of 5