Table - HapplyUI

A styled HTML table component with header, body, row dividers, and cell sub-components. Works well with @tanstack/react-table for sorting, selection, and pagination.

Installation

bunx @happlyui/cli@latest add table

Dependencies

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
divider

Usage

import * as Table from "@/components/ui/table"

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Email</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Examples

Data Table

A full data table example with sortable columns, avatars, and action buttons using @tanstack/react-table.

Member Name	Title	Status
James Brownjames@example.com	Marketing ManagerSince Aug, 2021	Active

Sophia Williamssophia@example.com	HR AssistantSince Aug, 2021	Active

Arthur Taylorarthur@example.com	Entrepreneur / CEOSince May, 2022	Absent

Emma Wrightemma@example.com	Front-end DeveloperSince Sep, 2022	Active

Matthew Johnsonmatthew@example.com	Data Software EngineerSince Feb, 2022	Active

Laura Perezlaura@example.com	Fashion DesignerSince Mar, 2022	Absent

Wei Chenwei@example.com	Operations ManagerSince July, 2021	Active

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Member</Table.Head>
      <Table.Head>Title</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>...</Table.Cell>
    </Table.Row>
    <Table.RowDivider />
    <Table.Row>
      <Table.Cell>...</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

API Reference

Table.Root

The main table wrapper with horizontal scroll overflow.

Prop	Type	Default	Description

Table.Header

The table header section (thead).

Prop	Type	Default	Description

Table.Head

A table header cell with subtle background and rounded corners.

Prop	Type	Default	Description

Table.Body

The table body section with configurable spacing from the header.

Prop	Type	Default	Description
`spacing`	`number`	`8`	Space in pixels between the header and body

Table.Row

A table row with group hover support.

Prop	Type	Default	Description

Table.RowDivider

A visual divider row between table rows using the Divider component.

Prop	Type	Default	Description
`dividerClassName`	`string`	-	Additional class name for the inner Divider component

Table.Cell

A table data cell with hover background transition.

Prop	Type	Default	Description

Table.Caption

A table caption element.

Prop	Type	Default	Description