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 6 components to create a table:
Table
: Wrapper component to declare a tableTableHead
: Declare a header row for the table and acts as a wrapper component for the header cellsTableHeaderCell
: Declare a header cellTableBody
: Wrapper component for the body of the table (rows)TableRow
: Child component representing a rowTableCell
: 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
Name | Position | Department | Status |
---|---|---|---|
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
API Reference: TableHead
This component does not have any public properties.
API Reference: TableHeaderCell
- textAlignmentoptional
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