WUI logo

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 #

NameType(s)DefaultRequired
indent
Boolean

Add space on first and last child on the Td and Th component

Packages #

Dependencies #
Peer dependencies #

Previous

Swiper

Next

Tag