Components

Table

Display data efficiently in a column and row format.

Name	Monsters Slayed	Region	Status
Wilhelm Tell	1	Uri, Schwyz, Unterwalden	National Hero
The Witcher	129	Kaedwen	Legend
Mizutsune	82	Japan	N/A

Import Table components

Tremor exports 8 components to create a table:

Table: Wrapper component to declare a table
TableHead: Declare a header row for the table. 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
TableFoot: Declare a footer row for the table. Acts as a wrapper component for the footer cells
TableFooterCell: Declare a footer cell

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

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

Name	Position	Department	Status
Viola Amherd	Federal Councillor	The Federal Department of Defence, Civil Protection and Sport (DDPS)	active
Albert Rösti	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
Karin Keller-Sutter	Federal Councillor	The Federal Department of Finance (FDF)	active
Guy Parmelin	Federal Councillor	The Federal Department of Economic Affairs, Education and Research (EAER)	active
Elisabeth Baume-Schneider	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 className="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 color="emerald" icon={StatusOnlineIcon}>
                {item.status}
              </Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </Card>
);

Theming

Table

Element	Theme Token
Font size fontSizetremor-default	fontSizetremor-default
Text color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT

TableHead, Table Foot

Element	Theme Token
Text color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Border color (Footer Only) colorstremor-border-DEFAULT	colorstremor-border-DEFAULT

TableHeaderCell, TableFooterCell

Element	Theme Token
Text color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT