Mantine

Table

A table displays large quantities of items or data in a list format. Filtering features, date picker, collapsible rows and actions may be added.

View source

Props

NameTypeDefaultDescription
columnsrequiredColumnDef<unknown, unknown>[]
Columns to display in the table.
datarequiredunknown[]
Data to display in the table
childrenReactNode
Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
getExpandChildren(datum: unknown) => ReactNode
Function that generates the expandable content of a row Return null for rows that don't need to be expandable
  • datumthe row for which the children should be generated.
initialStatePartial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & ... 5 more ... & RowSelectionTableState> & Partial<...>
Initial state of the table
loadingbooleanfalse
Whether the table is loading or not
noDataChildrenReactNode
React children to show when the table has no rows to show. You can leverage useTable to get the state of the table
onChangeonTableChangeEvent
Function called when the table should update
  • statethe state of the table
onMountonTableChangeEvent
Function called when the table mounts
  • statethe state of the table

No guidelines exist for Table yet.

Create guidelines