Table

The Table component provides a way to display tabular data with various sub-components for customization.

Usage

import { Table } from '@harnessio/ui/components'

//...

return (
  <Table.Root variant="asStackedList">
    <Table.Header>
      <Table.Row>
        <Table.Head>Name</Table.Head>
        <Table.Head>Email</Table.Head>
        <Table.Head>Display Name</Table.Head>
        <Table.Head>Date added</Table.Head>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>John Doe</Table.Cell>
        <Table.Cell>john@example.com</Table.Cell>
        <Table.Cell>John</Table.Cell>
        <Table.Cell>2023-01-01</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>
)

Anatomy

All parts of the Table component can be imported and composed as required.

<Table.Root variant="asStackedList">
  <Table.Caption>List of users</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Email</Table.Head>
      <Table.Head>Display Name</Table.Head>
      <Table.Head>Date added</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
      <Table.Cell>John</Table.Cell>
      <Table.Cell>2023-01-01</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colSpan={4}>Total users: 1</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>

API Reference

Note

All components extend their HTML equivalents, so all relevant HTML props also apply.

Root

The root component for the table.

<Table.Root
  variant="asStackedList"             // [OPTIONAL] Variant of the table
  disableXScroll={false}              // [OPTIONAL] Disable horizontal scroll
  className="custom-class"            // [OPTIONAL] Custom class name
  tableClassName="custom-table-class" // [OPTIONAL] Custom table class name
>
  {/* Table content */}
</Table.Root>

Prop	Required	Default	Type
variant	false	default	'default' | 'asStackedList'
disableXScroll	false	false	boolean
className	false		string
tableClassName	false		string

Header

The header section of the table.

<Table.Header
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Header content */}
</Table.Header>

Prop	Required	Default	Type
className	false		string

Body

The body section of the table.

<Table.Body
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Body content */}
</Table.Body>

Prop	Required	Default	Type
className	false		string

Footer

The footer section of the table.

<Table.Footer
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Footer content */}
</Table.Footer>

Prop	Required	Default	Type
className	false		string

Row

A row within the table.

<Table.Row
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Row content */}
</Table.Row>

Prop	Required	Default	Type
className	false		string

Head

A header cell within the table.

<Table.Head
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Header cell content */}
</Table.Head>

Prop	Required	Default	Type
className	false		string

Cell

A cell within the table.

<Table.Cell
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Cell content */}
</Table.Cell>

Prop	Required	Default	Type
className	false		string

Caption

A caption for the table.

<Table.Caption
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Caption content */}
</Table.Caption>

Prop	Required	Default	Type
className	false		string