Data (Accessor) Columns
Data columns are used to display data and are the default columns that are created when you create a column with an
The table can perform processing on the data of a data column, such as sorting, filtering, grouping, etc.
The other type of column that you can make is a display column, which you can learn more about in the next section.
Accessors (Connect a column to data)
Each column definition must have at least an
accessorKey(or a combination of an
accessorFn) and a
accessorFnproperty is the key that will be used to join the data from the
headerproperty is used to display the column header, but is also used in other places in the table.
Method 1 - Using an accessorKey (Recommended)
The simplest and most common way to define a column is to use the
accessorKeyproperty is the key that will be used to join the data from the
accessorKeymust match one of the keys in your data, or else no data will show up in the column. The
accessorKeyalso supports dot notation, so you can access nested data.
By default, the
accessorKeywill double as the
idfor the column, but if you need the id of the column to be different than the accessorKey, you can use the
idproperty in addition.
Method 2 - Using an accessorFn and id
You can alternatively use the
accessorFnproperty. Here are at least three ways you can use it.
In each case, the
idproperty is now required since there is no
accessorKeyfor MRT to derive it from.
Custom Header Render
If you want to pass in custom JSX to render the header, you can pass in a
Headeroption in addition to the
header(lowercase) property is still required and still must only be a string because it is used within multiple components in the table and has string manipulation methods performed on it.
Custom Cell Render
Similarly, the data cells in a column can have a custom JSX render with the
Custom Footer Render
If you want to pass in custom JSX to render the footer, you can pass in a
Footeroption. If no custom markup is needed, you can just use the
The footer cells can be a good place to put totals or other summary information.
Enable or Disable Features Per Column
In the same way that you can pass props to the main
<MantineReactTable />component to enable or disable features, you can also specify options on the column definitions to enable or disable features on a per-column basis.
Set Column Widths
This topic is covered in detail in the Column Resizing Guide, but here is a brief overview.
Setting a CSS (sx or style) width prop will NOT work. Mantine React Table (or, more accurately, TanStack Table) will keep track and set the widths of each column internally.
You CAN, however, change the default width of any column by setting its
sizeoption on the column definition.
maxSizeare also available to set the minimum and maximum width of the column during resizing.
However, the column sizes might not change as much as you would expect. This is because the browser treats
<td>elements differently with in a
<table>element by default.
You can improve this slightly by changing the table layout to
fixedinstead of the default
The columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.
To learn more about how table-layout
autoworks, we recommend reading this blog post by CSS-Tricks.
Disable Column Growing
By default, columns grow to fill the width of the table. However, you can disable this behavior by setting the
flexGrowcss for the table head and body cells to
layoutModeprop is also set to
"grid". This is covered in more detail in the Column Resizing Guide.
Set Column Alignment
By default, all columns are left-aligned. You can change the alignment of a column by setting the
alignoption to either
1-5 of 5