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' },
];

Table component accepts the same children as table element and adds mantine theme styles.

Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
import React from 'react';
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>
);
}

Caption and tfoot

Table support tfoot and caption elements. Pass 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 React from 'react';
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

You can make table striped by passing striped prop to Table. If highlightOnHover prop is true rows will be highlighted with gray color on hover.

Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
<Table>
<thead>
<tr>
<th>Element position</th>
<th>Element name</th>
<th>Symbol</th>
<th>Atomic mass</th>
</tr>
</thead>
<tbody>
{elements.map((element) => (
<tr key={element.name}>
<td>{element.position}</td>
<td>{element.name}</td>
<td>{element.symbol}</td>
<td>{element.mass}</td>
</tr>
))}
</tbody>
</Table>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback