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 className="text-right">Number</Table.Th>
          <Table.Th className="text-center">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 className="text-right">23</Table.Td>
          <Table.Td className="text-center">
            <Button size="md" variant="tertiary">
              <Icon name="ellipsis-v" size="sm" />
            </Button>
          </Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>Suspendisse</Table.Td>
          <Table.Td>Pellentesque a maximus magna</Table.Td>
          <Table.Td className="text-right">41</Table.Td>
          <Table.Td className="text-center">
            <Button size="md" variant="tertiary">
              <Icon name="ellipsis-v" 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 className="text-right">8</Table.Td>
          <Table.Td className="text-center">
            <Button size="md" variant="tertiary">
              <Icon name="ellipsis-v" 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.

Clickable rows

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

Github

Selected rows

You can show a selected state by adding aria-selected to Table.Tr.

Github

With vertical divider

You can show vertical divider between columns by adding withColumnDivider to Table.

Github

With sort icons

Click on a column header to sort rows by that column.

Github

Swiper Tag