Table
The Table component is a UI component used to display tabular data in a structured format. It provides options for customizing the appearance and behavior of the table.
Components:
Table
Type
Components
import
import { Table } from '@pillar-ui/core'
Usage
import { Table } from '@pillar-ui/core'
<Table />
Examples
Size
Default
4
Type
'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
import { Flex, IconButton, Switch, Table } from '@pillar-ui/core'
import { Pencil, Trash } from '@pillar-ui/icons'
const content = (
<>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Followers</th>
<th>Following</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>#HE1234</td>
<td>Samir Lamir</td>
<td>15.3K</td>
<td>1</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
<tr>
<td>#HE12sd</td>
<td>Kent Lempo</td>
<td>19.3K</td>
<td>190.9K</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
</tbody>
</>
)
export const TableSize= ()=> {
return (
<>
<Table size="3">{content}</Table>
<Table>{content}</Table>
<Table size="7">{content}</Table>
</>
)
}
Variants
Default
default
Type
'default' | 'striped' | 'soft' | 'head-color'
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
import { Flex, IconButton, Switch, Table } from '@pillar-ui/core'
import { Pencil, Trash } from '@pillar-ui/icons'
const content = (
<>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Followers</th>
<th>Following</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>#HE1234</td>
<td>Samir Lamir</td>
<td>15.3K</td>
<td>1</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
<tr>
<td>#HE12sd</td>
<td>Kent Lempo</td>
<td>19.3K</td>
<td>190.9K</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
</tbody>
</>
)
export const TableVariant= ()=> {
return (
<>
<Table>{content}</Table>
<Table variant="striped">{content}</Table>
<Table variant="soft">{content}</Table>
<Table variant="head-color">{content}</Table>
</>
)
}
Color
Default
p
Type
'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
ID | User | Followers | Following | Action |
---|---|---|---|---|
#HE1234 | Samir Lamir | 15.3K | 1 | |
#HE12sd | Kent Lempo | 19.3K | 190.9K |
import { Flex, IconButton, Table } from '@pillar-ui/core'
import { Pencil, Trash } from '@pillar-ui/icons'
const content = (
<>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Followers</th>
<th>Following</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>#HE1234</td>
<td>Samir Lamir</td>
<td>15.3K</td>
<td>1</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
<tr>
<td>#HE12sd</td>
<td>Kent Lempo</td>
<td>19.3K</td>
<td>190.9K</td>
<Flex as="td" gap="2">
<IconButton title="Update" color="i" icon={<Pencil />} size="3" />
<IconButton title="Delete" color="d" icon={<Trash />} size="3" />
</Flex>
</tr>
</tbody>
</>
)
export const TableColor= ()=> {
return (
<>
<Table variant="striped" color="d">
{content}
</Table>
<Table variant="striped" color="w">
{content}
</Table>
<Table variant="striped" color="su">
{content}
</Table>
<Table variant="striped" color="p">
{content}
</Table>
<Table variant="striped" color="se">
{content}
</Table>
<Table variant="striped" color="b">
{content}
</Table>
<Table variant="striped" color="i">
{content}
</Table>
</>
)
}