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'
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.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'
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.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'
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.9K
IDUserFollowersFollowingAction
#HE1234Samir Lamir15.3K1
#HE12sdKent Lempo19.3K190.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>
    </>
  )
}