Components

Table

Display data efficiently in a column and row format.

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.

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

API Reference: TableHead

This component does not have any public properties.

API Reference: TableHeaderCell

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