Table

The Table component is a structured layout element used to display data in rows and columns. It provides a clear and organized way to present large amounts of information, supporting features like sorting, filtering, and pagination. This component is essential for applications that require the display of tabular data, enhancing readability and usability.

Source

Github

import { Button } from 'welcome-ui/Button'
import { Icon } from 'welcome-ui/Icon'
import { Table } from 'welcome-ui/Table'

const Example = () => {
  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Name</Table.Th>
          <Table.Th>Description</Table.Th>
          <Table.Th>Number</Table.Th>
          <Table.Th className="text-center w-[80px]">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 className="text-center">
            <Button size="md" variant="primary-neutral">
              <Icon name="setting" 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 className="text-center">
            <Button size="md" variant="primary-neutral">
              <Icon name="setting" size="sm" />
            </Button>
          </Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>Ullamcorper</Table.Td>
          <Table.Td>Cras viverra ac erat ullamcorper maximus</Table.Td>
          <Table.Td>8</Table.Td>
          <Table.Td className="text-center">
            <Button size="md" variant="primary-neutral">
              <Icon name="setting" size="sm" />
            </Button>
          </Table.Td>
        </Table.Tr>
      </Table.Tbody>
    </Table>
  )
}

export default Example

Examples

Use Table, Table.Thead, Table.Th, Table.Tbody, Table.Td, Table.Tr.

With state

You can use one of success, error, warning or info and add indent on Table for more spacing.

Github

Clickable rows

You can make rows clickable by adding the onClick prop to Table.Tr.

Github

Swiper Tag