Table

Render table with theme styles
Import

Usage

Table data for all examples:

const elements = [
{ position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
{ position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
{ position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
{ position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
{ position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];
Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
import { Table } from '@mantine/core';
function Demo() {
const rows = elements.map((element) => (
<tr key={element.name}>
<td>{element.position}</td>
<td>{element.name}</td>
<td>{element.symbol}</td>
<td>{element.mass}</td>
</tr>
));
return (
<Table>
<thead>
<tr>
<th>Element position</th>
<th>Element name</th>
<th>Symbol</th>
<th>Atomic mass</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
);
}

Spacing

To control spacing use horizontalSpacing and verticalSpacing props. Both props support spacing from theme.spacing and number values to set cell padding in px:

PositionNameSymbolMass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
HorizontalSpacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
FontSize
xs
sm
md
lg
xl
import { Table } from '@mantine/core';
function Demo() {
return (
<Table verticalSpacing="xs">
{/* {...rows} */}
</Table>
);
}

Caption and tfoot

Table support tfoot and caption elements. Set captionSide prop (top or bottom) to change caption position.

Some elements from periodic table
Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
Element positionElement nameSymbolAtomic mass
import { Table } from '@mantine/core';
function Demo() {
const ths = (
<tr>
<th>Element position</th>
<th>Element name</th>
<th>Symbol</th>
<th>Atomic mass</th>
</tr>
);
const rows = elements.map((element) => (
<tr key={element.name}>
<td>{element.position}</td>
<td>{element.name}</td>
<td>{element.symbol}</td>
<td>{element.mass}</td>
</tr>
));
return (
<Table captionSide="bottom">
<caption>Some elements from periodic table</caption>
<thead>{ths}</thead>
<tbody>{rows}</tbody>
<tfoot>{ths}</tfoot>
</Table>
);
}

Striped and rows hover

Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
import { Table } from '@mantine/core';
function Demo() {
return (
<Table>
{/* {...rows} */}
</Table>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Table component props

NameTypeDescription
captionSide
"bottom" | "top"
Table caption position
fontSize
number | "xs" | "sm" | "md" | "lg" | "xl"
Sets font size of all text inside table
highlightOnHover
boolean
If true row will have hover color
horizontalSpacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Horizontal cells spacing from theme.spacing or number to set value in px
striped
boolean
If true every odd row of table will have gray background color
verticalSpacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Vertical cells spacing from theme.spacing or number to set value in px
withBorder
boolean
Add border to table
withColumnBorders
boolean
Add border to columns