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 size="normal">
    <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>
  <Table.Caption />
  <Table.Header>
    <Table.Row>
      <Table.Head />
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <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
  size="normal"                     // [OPTIONAL] Size of the table
  className="custom-class"             // [OPTIONAL] Custom class name
  tableClassName="custom-table-class"  // [OPTIONAL] Custom table class name
  disableHighlightOnHover={false}   // [OPTIONAL] Disable row highlighting on hover (enabled by default)
>
  {/* Table content */}
</Table.Root>

Prop	Required	Default	Type
size	false	'normal'	'normal' | 'relaxed' | 'compact'
className	false		string
tableClassName	false		string
disableHighlightOnHover	false	false	boolean

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

<Table.Row
  className="custom-class" // [OPTIONAL] Custom class name
  selected={true} // [OPTIONAL] Whether the row is checked/selected
  onClick={(e) => console.log('Row clicked', e)} // [OPTIONAL] Click handler for the row
>
  {/* Row content */}
</Table.Row>

Prop	Required	Default	Type
className	false		string
selected	false		boolean
onClick	false		(event: React.MouseEvent<HTMLTableRowElement>) => void
to	false		string
linkProps	false		LinkProps

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
  onClick={(e) => console.log('Cell clicked', e)} // [OPTIONAL] Click handler for the cell
  to="/path/to/page" // [OPTIONAL] URL to navigate to when the cell is clicked
  linkProps={{ prefixIcon: 'arrow-right', variant: 'secondary' }} // [OPTIONAL] Additional props for the Link component
>
  {/* Cell content */}
</Table.Cell>

Prop	Required	Default	Type
className	false		string
onClick	false		(event: React.MouseEvent<HTMLTableCellElement>) => void
to	false		string
linkProps	false		LinkProps

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