Table

Usage

import { Table } from '@zalify-ui/react'

<Table.Root>
  <Table.Caption />
  <Table.Head>
    <Table.Row>
      <Table.Header />
    </Table.Row>
  </Table.Head>
  <Table.Body>
  <Table.Row>
    <Table.Cell />
    </Table.Row>
  </Table.Body>
  <Table.Foot>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Foot>
</Table.Root>

Examples

Variants

Use the variant prop to change the appearance of the table.

Striped

Use the striped prop to add zebra-stripes to the table.

Column Border

Use the columnBorder prop to add borders between columns.

Horizontal Scroll

Compose the Table component within a ScrollArea component to enable horizontal scrolling.

Sticky Header

Use the stickyHeader prop to make the table header sticky.

Sticky Column

Here's an example that uses data-sticky attributes to make table columns sticky during horizontal scrolling.

Interactive

Use the interactive prop to highlight rows on hover.

Props