Table

Allows user to organize informations with a scrollable table 🎓

version

4.2.0

install

yarn add @welcome-ui/table

usage

import { Table } from '@welcome-ui/table'

View package View source

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

Packages #

Dependencies #

@welcome-ui/box [^4.2.0]

@welcome-ui/system [^4.2.0]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Swiper

Tag