Table

The table component is used to display data in a tabular format. It does not use the table element, but rather uses CSS Grid to achieve the same effect. These two components are used to create a table layout:

  • <Table>
  • <TableRow>
  • <TableCell>

Properties

Table Properties

Name
Description
column
This is the CSS Grid grid-template-columns property.
hover
Whether the table should have a hover effect or not. Default is false.

TableRow Properties

Name
Description
head
Whether the row is a header row or not. This will change the background color and font weight.

Examples

with Hover Effect

<Table columns="1fr 1fr" hover>
    <TableRow head>
        <TableCell>Col 1</TableCell>
        <TableCell>Col 2</TableCell>
    </TableRow>
    <TableRow>
        <TableCell>Value 1</TableCell>
        <TableCell>Value 2</TableCell>
    </TableRow>
    <TableRow>
        <TableCell>Value 1</TableCell>
        <TableCell>Value 2</TableCell>
    </TableRow>
</Table>
Col 1
Col 2
Value 1
Value 2
Value 3
Value 4