Table

Render table with theme styles

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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 position	Element name	Symbol	Atomic mass
6	Carbon	C	12.011
7	Nitrogen	N	14.007
39	Yttrium	Y	88.906
56	Barium	Ba	137.33
58	Cerium	Ce	140.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:

Position	Name	Symbol	Mass
6	Carbon	C	12.011
7	Nitrogen	N	14.007
39	Yttrium	Y	88.906
56	Barium	Ba	137.33
58	Cerium	Ce	140.12

HorizontalSpacing

VerticalSpacing

<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 position	Element name	Symbol	Atomic mass
6	Carbon	C	12.011
7	Nitrogen	N	14.007
39	Yttrium	Y	88.906
56	Barium	Ba	137.33
58	Cerium	Ce	140.12
Element position	Element name	Symbol	Atomic 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>
  );
}