Table
Allows user to organize informations with a scrollable table 🎓
version
4.1.2
install
yarn add @welcome-ui/table
usage
import { Table } from '@welcome-ui/table'
Usage #
Use Table
, Table.Thead
, Table.Th
, Table.Tbody
, Table.Td
, Table.Tr
.
<Table><Table.Thead><Table.Tr><Table.Th>Name</Table.Th><Table.Th>Description</Table.Th><Table.Th>Number</Table.Th><Table.Th textAlign="center" w={80}>Actions</Table.Th></Table.Tr></Table.Thead><Table.Tbody><Table.Tr><Table.Td>Consectetur</Table.Td><Table.Td>Lorem ipsum dolor sit amet</Table.Td><Table.Td>23</Table.Td><Table.Td textAlign="center"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr><Table.Tr><Table.Td>Suspendisse</Table.Td><Table.Td>Pellentesque a maximus magna</Table.Td><Table.Td>41</Table.Td><Table.Td textAlign="center"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr><Table.Tr onClick={() => console.log('jungle')}><Table.Td>Ullamcorper</Table.Td><Table.Td>Cras viverra ac erat ullamcorper maximus</Table.Td><Table.Td>8</Table.Td><Table.Td textAlign="center"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr></Table.Tbody></Table>
With state #
You can use one of success
, error
, warning
or info
and add indent
on Table for more spacing.
<Table indent><Table.Thead><Table.Tr><Table.Th>Name</Table.Th><Table.Th>Description</Table.Th><Table.Th>Number</Table.Th><Table.Th textAlign="right">Actions</Table.Th></Table.Tr></Table.Thead><Table.Tbody><Table.Tr variant="error"><Table.Td>Consectetur</Table.Td><Table.Td>Lorem ipsum dolor sit amet</Table.Td><Table.Td>23</Table.Td><Table.Td textAlign="right"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr><Table.Tr variant="warning"><Table.Td>Suspendisse</Table.Td><Table.Td>Pellentesque a maximus magna</Table.Td><Table.Td>41</Table.Td><Table.Td textAlign="right"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr><Table.Tr variant="info"><Table.Td>Ullamcorper</Table.Td><Table.Td>Cras viverra ac erat ullamcorper maximus</Table.Td><Table.Td>8</Table.Td><Table.Td textAlign="right"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr><Table.Tr variant="success"><Table.Td>Vestibulum</Table.Td><Table.Td>Aliquam erat volutpat</Table.Td><Table.Td>102</Table.Td><Table.Td textAlign="right"><Button shape="circle" size="sm" variant="secondary"><SettingsIcon size="sm" /></Button></Table.Td></Table.Tr></Table.Tbody></Table>
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
indent | Boolean Add space on first and last child on the Td and Th component |