UI
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, TableBody, TableCell, TableHead, TableHeaderCell, TableRow,} from '@tremor/react';
export const TableHero = () => ( <div className="mx-auto max-w-2xl"> <Table> <TableHead> <TableRow> <TableHeaderCell>Name</TableHeaderCell> <TableHeaderCell className="text-right"> Monsters Slayed </TableHeaderCell> <TableHeaderCell>Region</TableHeaderCell> <TableHeaderCell>Status</TableHeaderCell> </TableRow> </TableHead>
<TableBody> <TableRow> <TableCell>Wilhelm Tell</TableCell> <TableCell className="text-right">1</TableCell> <TableCell>Uri, Schwyz, Unterwalden</TableCell> <TableCell>National Hero</TableCell> </TableRow> <TableRow> <TableCell>The Witcher</TableCell> <TableCell className="text-right">129</TableCell> <TableCell>Kaedwen</TableCell> <TableCell>Legend</TableCell> </TableRow> <TableRow> <TableCell>Mizutsune</TableCell> <TableCell className="text-right">82</TableCell> <TableCell>Japan</TableCell> <TableCell>N/A</TableCell> </TableRow> </TableBody> </Table> </div>);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, TablerFooterCell,} from '@tremor/react';
Usage example
The example below shows a composition of a table using Card, Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell 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 |
| Beat Jans | Federal Councillor | The Federal Department of Justice and Police (FDJP) | 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 Home Affairs (FDHA) | active |
import { RiFlag2Line } from '@remixicon/react';import { Badge, Card, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow,} 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: 'Albert Rösti', Role: 'Federal Councillor', departement: 'The Federal Department of the Environment, Transport, Energy and Communications (DETEC)', status: 'active', }, { name: 'Beat Jans', Role: 'Federal Councillor', departement: 'The Federal Department of Justice and Police (FDJP)', status: 'active', }, { name: 'Ignazio Cassis', Role: 'Federal Councillor', departement: 'The Federal Department of Foreign Affairs (FDFA)', status: 'active', }, { name: 'Karin Keller-Sutter', 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: 'Elisabeth Baume-Schneider', Role: 'Federal Councillor', departement: 'The Federal Department of Home Affairs (FDHA)', status: 'active', },];
export function TableUsageExample() { return ( <Card> <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">List of Swiss Federal Councillours</h3> <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> {item.Role} </TableCell> <TableCell> {item.departement} </TableCell> <TableCell> <Badge color="emerald" icon={RiFlag2Line}> {item.status} </Badge> </TableCell> </TableRow> ))} </TableBody> </Table> </Card> );}API Reference: Table
This component does not have any public properties.
API Reference: TableHead
This component does not have any public properties.
API Reference: TableHeaderCell
This component does not have any public properties.
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
This component does not have any public properties.
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 |
TableBody
| Element | Theme Token |
|---|---|
| Divider color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |