Display (Built-in) Columns
Display columns are used to display non-data elements in a table. They only require an
id
and header
in the column definition. They do not need an accessorKey
or accessorFn
, as they are not meant to connect to your data at all.Display columns do not have any processing features, such as sorting, filtering, grouping, etc. enabled on them by default.
Built-in MRT Display Columns
Mantine React Table has a few built-in display columns that are created automatically when certain features are enabled.
mrt-row-drag
- created whenenableRowDragging
orenableRowOrdering
table options aretrue
mrt-row-actions
- created whenenableRowActions
(or sometimes whenenableEditing
) table options aretrue
mrt-row-expand
- created whenenableExpanding
,enableGrouping
, orrenderDetailPanel
table options aretrue
mrt-row-select
- created whenenableRowSelection
table option istrue
mrt-row-numbers
- created whenenableRowNumbers
table option istrue
Display columns are, for the most part, the same as a data column, except they do not have an accessor to access data. When a display column is created internally by Mantine React Table, the following options are all set to false by default:
All of these values are able to be overridden if needed, and you'll learn about that in the next section down below.
Customize Built-in MRT Display Columns
It is possible to change and override the default behavior of built-in display columns. Whether you want to change the default column width, add some styles, or enable some features, such as column actions or column drag and drop, you can do it with the
displayColumnDefOptions
table option.Display Column Definition Options
Let's say you need to adjust the width of the Actions column to be wide enough to fit all of your action buttons. You could do that as follows:
Or maybe you want to enable a feature that is off by default for display columns, such as column ordering or pinning.
Here is a full example and demo for customizing display columns.
Actions | # | First Name | Last Name | Address | City | State | |
---|---|---|---|---|---|---|---|
1 | Dylan | Murray | 261 Erdman Ford | East Daphne | Kentucky | ||
2 | Raquel | Kohler | 769 Dominic Grove | Columbus | Ohio | ||
3 | Ervin | Reinger | 566 Brakus Inlet | South Linda | West Virginia | ||
4 | Brittany | McCullough | 722 Emie Stream | Lincoln | Nebraska | ||
5 | Branson | Frami | 32188 Larkin Turnpike | Charleston | South Carolina |
1-5 of 5
Create your own Display Columns
You do not have to use the built in Row Actions feature. You can just create your own display columns instead. It is as easy as creating a normal column, only specifying the
columnDefType
as display
.