Skip to content

Table

  • Displays tabular data.
import {
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow
} from '@viamrobotics/prime-core';
Name Address Overlylongunbrokenheader Phone
John Connor 42 Terminal Ave Someunbrokenlongtextthingamajig 555-555-5555
P Sherman 42 Wallaby Way x 555-555-5555
John Connor 42 Terminal Ave Someunbrokenlongtextthingamajig 555-555-5555
John Connor 42 Terminal Ave Someunbrokenlongtextthingamajig 555-555-5555
John Connor 42 Terminal Ave Someunbrokenlongtextthingamajig 555-555-5555
<Table
variant="auto"
cols={['10%', '10%', '60%', '10%', '10%']}
>
<TableHeader>
<TableHeaderCell>
<input type="checkbox" />
</TableHeaderCell>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>Address</TableHeaderCell>
<TableHeaderCell>Overlylongunbrokenheader</TableHeaderCell>
<TableHeaderCell>Phone</TableHeaderCell>
</TableHeader>
<TableBody cx="text-center">
<TableRow>
<TableCell>
<input type="checkbox" />
</TableCell>
<TableCell>John Connor</TableCell>
<TableCell>42 Terminal Ave</TableCell>
<TableCell>Someunbrokenlongtextthingamajig</TableCell>
<TableCell>555-555-5555</TableCell>
</TableRow>
<TableRow>
<TableCell>
<input type="checkbox" />
</TableCell>
<TableCell>P Sherman</TableCell>
<TableCell>42 Wallaby Way</TableCell>
<TableCell>x</TableCell>
<TableCell>555-555-5555</TableCell>
</TableRow>
<TableRow variant="success">
<TableCell>
<input type="checkbox" />
</TableCell>
<TableCell>John Connor</TableCell>
<TableCell>42 Terminal Ave</TableCell>
<TableCell>Someunbrokenlongtextthingamajig</TableCell>
<TableCell>555-555-5555</TableCell>
</TableRow>
<TableRow variant="disabled">
<TableCell>
<input type="checkbox" />
</TableCell>
<TableCell>John Connor</TableCell>
<TableCell>42 Terminal Ave</TableCell>
<TableCell>Someunbrokenlongtextthingamajig</TableCell>
<TableCell>555-555-5555</TableCell>
</TableRow>
<TableRow variant="error">
<TableCell>
<input type="checkbox" />
</TableCell>
<TableCell>John Connor</TableCell>
<TableCell>42 Terminal Ave</TableCell>
<TableCell>Someunbrokenlongtextthingamajig</TableCell>
<TableCell>555-555-5555</TableCell>
</TableRow>
</TableBody>
</Table>