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>
);
}