Data display

Table

Compound component: `Table`, `Table.Head`, `Table.Body`, `Table.Foot`, `Table.Row`, `Table.Cell`, `Table.HeaderCell`, `Table.Caption`.

Server safeSource

Import

import { Table } from '@the_viveksingh/vivek-ui'

A semantic table

Real thead, tbody, th and caption. Cell label supplies the header text the responsive stacked layout shows on narrow screens, so nothing becomes unreadable on a phone.

Recent invoices
Invoice	Client	Amount	Status
INV-1042	Northwind	$4,280.00	Paid
INV-1041	Acme Corp	$1,150.00	Pending
INV-1040	Globex	$820.00	Overdue

<Table hoverable>
  <Table.Caption visuallyHidden>Recent invoices</Table.Caption>
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell>Invoice</Table.HeaderCell>
      <Table.HeaderCell>Client</Table.HeaderCell>
      <Table.HeaderCell numeric>Amount</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    {invoices.map((invoice) => (
      <Table.Row key={invoice.id}>
        <Table.Cell label="Invoice">{invoice.id}</Table.Cell>
        <Table.Cell label="Client">{invoice.client}</Table.Cell>
        <Table.Cell label="Amount" numeric>{invoice.amount}</Table.Cell>
      </Table.Row>
    ))}
  </Table.Body>
</Table>

Striped

Zebra striping comes from a data attribute on the root, not a class on every row.

Recent invoices
Invoice	Client	Amount	Status
INV-1042	Northwind	$4,280.00	Paid
INV-1041	Acme Corp	$1,150.00	Pending
INV-1040	Globex	$820.00	Overdue

<Table striped hoverable>
  {/* same markup */}
</Table>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Table
Prop	Type	Default	Description
`size`	`TableSize`	—	—
`striped`	`boolean`	—	Zebra-stripe body rows.
`bordered`	`boolean`	—	Outer border plus cell dividers.
`hoverable`	`boolean`	—	Highlight body rows on hover (pointer devices only).
`stickyHeader`	`boolean`	—	Pin the header while the body scrolls. The scroll container is the wrapper this component renders, so the wrapper needs a block size for there to be anything to scroll: `stickyHeader` therefore caps it at `--vk-table-max-block-size` (60vh by default). Override that variable — or pass a `maxHeight` through `containerProps` — to choose your own.
`containerProps`	`TableContainerProps`	—	Props for the scroll container that wraps the `<table>`. The wrapper exists so a too-wide table scrolls inside itself instead of making the whole page scroll sideways. `className`/`style`/`...rest` on `Table` itself land on the `<table>`, which is also what the forwarded ref points at.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Table carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.