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

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

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 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 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 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 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

Striped

Highlight on hover

<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>