1. Components
  2. Table

Components

Table

Display data efficiently in a column and row format.

NameMonsters SlayedRegionStatus
Wilhelm Tell1Uri, Schwyz, UnterwaldenNational Hero
The Witcher129KaedwenLegend
Mizutsune82JapanN/A

Import Table components

Tremor exports 6 components to create a table:

  • Table: Wrapper component to declare a table
  • TableHead: Declare a header row for the table and acts as a wrapper component for the header cells
  • TableHeaderCell: Declare a header cell
  • TableBody: Wrapper component for the body of the table (rows)
  • TableRow: Child component representing a row
  • TableCell: Child component representing a cell within a row
import {
  Table,
  TableHead,
  TableHeaderCell,
  TableBody,
  TableRow,
  TableCell,
} from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import {
  Table,
  TableHead,
  TableHeaderCell,
  TableBody,
  TableRow,
  TableCell,
} from "@tremor/react";

export default () => (
  <Table marginTop="mt-0">
    <TableHead>
      <TableRow>
      <TableHeaderCell textAlignment="text-left"></TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell textAlignment=""></TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

Usage example

The example below shows a composition of a table using Card, Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell, Text, Bold, Title, and Badge components.

List of Swiss Federal Councillours

NamePositionDepartmentStatus
Viola Amherd

Federal Councillor

The Federal Department of Defence, Civil Protection and Sport (DDPS)

active

Simonetta Sommaruga

Federal Councillor

The Federal Department of the Environment, Transport, Energy and Communications (DETEC)

active

Alain Berset

Federal Councillor

The Federal Department of Home Affairs (FDHA)

active

Ignazio Cassis

Federal Councillor

The Federal Department of Foreign Affairs (FDFA)

active

Ueli Maurer

Federal Councillor

The Federal Department of Finance (FDF)

active

Guy Parmelin

Federal Councillor

The Federal Department of Economic Affairs, Education and Research (EAER)

active

Karin Keller-Sutter

Federal Councillor

The Federal Department of Justice and Police (FDJP)

active

import { StatusOnlineIcon } from "@heroicons/react/outline";
import {
  Card,
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  Text,
  Title,
  Badge,
} from "@tremor/react";

const data = [
  {
    name: "Viola Amherd",
    Role: "Federal Councillor",
    departement:
      "The Federal Department of Defence, Civil Protection and Sport (DDPS)",
    status: "active",
  },
  {
    name: "Simonetta Sommaruga",
    Role: "Federal Councillor",
    departement:
      "The Federal Department of the Environment, Transport, Energy and Communications (DETEC)",
    status: "active",
  },
  {
    name: "Alain Berset",
    Role: "Federal Councillor",
    departement: "The Federal Department of Home Affairs (FDHA)",
    status: "active",
  },
  {
    name: "Ignazio Cassis",
    Role: "Federal Councillor",
    departement: "The Federal Department of Foreign Affairs (FDFA)",
    status: "active",
  },
  {
    name: "Ueli Maurer",
    Role: "Federal Councillor",
    departement: "The Federal Department of Finance (FDF)",
    status: "active",
  },
  {
    name: "Guy Parmelin",
    Role: "Federal Councillor",
    departement:
      "The Federal Department of Economic Affairs, Education and Research (EAER)",
    status: "active",
  },
  {
    name: "Karin Keller-Sutter",
    Role: "Federal Councillor",
    departement: "The Federal Department of Justice and Police (FDJP)",
    status: "active",
  },
];

export default () => (
<Card>
    <Title>List of Swiss Federal Councillours</Title>
    <Table marginTop="mt-5">
        <TableHead>
            <TableRow>
                <TableHeaderCell>
                    Name
                </TableHeaderCell>
                <TableHeaderCell>
                    Position
                </TableHeaderCell>
                <TableHeaderCell>
                    Department
                </TableHeaderCell>
                <TableHeaderCell>
                    Status
                </TableHeaderCell>
            </TableRow>
        </TableHead>
        <TableBody>
            { data.map((item) => (
                <TableRow key={ item.name }>
                    <TableCell>
                        { item.name }
                    </TableCell>
                    <TableCell>
                        <Text>{ item.Role }</Text>
                    </TableCell>
                    <TableCell>
                        <Text>{ item.departement }</Text>
                    </TableCell>
                    <TableCell>
                        <Badge text={ item.status } color="emerald" icon={ StatusOnlineIcon } />
                    </TableCell>
                </TableRow>
            )) }
        </TableBody>
    </Table>
  </Card>
);

API Reference: Table

marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: TableHead

This component does not have any public properties.

API Reference: TableHeaderCell

textAlignmentoptional
Description
Controls the alignment of text.
Type
string
Default
text-left

API Reference: TableBody

This component does not have any public properties.

API Reference: TableRow

This component does not have any public properties.

API Reference: TableCell

textAlignmentoptional
Description
Controls the alignment of text.
Type
string
Default
text-left