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>);
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';
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> );}
This component does not have any public properties.
This component does not have any public properties.
This component does not have any public properties.
This component does not have any public properties.
This component does not have any public properties.
This component does not have any public properties.
Element | Theme Token |
---|---|
Font size fontSizetremor-default | fontSizetremor-default |
Text color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
Element | Theme Token |
---|---|
Text color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
Border color (Footer Only) colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
Element | Theme Token |
---|---|
Text color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
Element | Theme Token |
---|---|
Divider color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |