Table

A styled table for displaying rows of data.

Default

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member
Esther Howard	esther@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableDefault() {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Esther Howard</Table.Cell>
          <Table.Cell>esther@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Striped

The striped prop applies a zebra background to alternating rows.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member
Esther Howard	esther@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableStriped() {
  return (
    <Table striped>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Esther Howard</Table.Cell>
          <Table.Cell>esther@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Striped columns

The stripedColumns prop applies a zebra background to alternating columns.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableStripedColumns() {
  return (
    <Table stripedColumns>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Hover

The hover prop highlights the row under the pointer.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member
Esther Howard	esther@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableHover() {
  return (
    <Table hover>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Esther Howard</Table.Cell>
          <Table.Cell>esther@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Bordered

The bordered prop adds borders around every cell.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableBordered() {
  return (
    <Table bordered>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Borderless

The borderless prop removes the default row borders.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableBorderless() {
  return (
    <Table borderless>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Sizes

The size prop offers two densities: md (default) and sm.

Name	Role
Jane Cooper	Admin
Cody Fisher	Member

Name	Role
Jane Cooper	Admin
Cody Fisher	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableSizes() {
  return (
    <div className="flex flex-col gap-6">
      <Table size="md">
        <Table.Header>
          <Table.Row>
            <Table.Head>Name</Table.Head>
            <Table.Head>Role</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Jane Cooper</Table.Cell>
            <Table.Cell>Admin</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cody Fisher</Table.Cell>
            <Table.Cell>Member</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
      <Table size="sm">
        <Table.Header>
          <Table.Row>
            <Table.Head>Name</Table.Head>
            <Table.Head>Role</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Jane Cooper</Table.Cell>
            <Table.Cell>Admin</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cody Fisher</Table.Cell>
            <Table.Cell>Member</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </div>
  );
}

Colors

The color prop tints the whole table with neutral, primary, secondary, info, success, warning, or danger.

Color	Status
neutral	Active

Color	Status
primary	Active

Color	Status
secondary	Active

Color	Status
info	Active

Color	Status
success	Active

Color	Status
warning	Active

Color	Status
danger	Active

tsx

import { Table } from "@hummingbirdui/react";

const colors = [
  "neutral",
  "primary",
  "secondary",
  "info",
  "success",
  "warning",
  "danger",
] as const;

export default function TableColors() {
  return (
    <div className="flex flex-col gap-6">
      {colors.map((color) => (
        <Table key={color} color={color}>
          <Table.Header>
            <Table.Row>
              <Table.Head>Color</Table.Head>
              <Table.Head>Status</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>{color}</Table.Cell>
              <Table.Cell>Active</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
      ))}
    </div>
  );
}

Active

The active prop on Table.Row or Table.Cell highlights a single row or cell.

Name	Status
Jane Cooper	Active
Cody Fisher	Highlighted row
Esther Howard	Highlighted cell

tsx

import { Table } from "@hummingbirdui/react";

export default function TableActive() {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Status</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>Active</Table.Cell>
        </Table.Row>
        <Table.Row active>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>Highlighted row</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Esther Howard</Table.Cell>
          <Table.Cell active>Highlighted cell</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Highlight

The highlight prop emphasizes the table with a stronger surface treatment.

Name	Email	Role
Jane Cooper	jane@example.com	Admin
Cody Fisher	cody@example.com	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableHighlight() {
  return (
    <Table highlight>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>jane@example.com</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>cody@example.com</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

The stickyHeader prop pins the header to the top while the body scrolls.

Name	Role
Person 1	Member
Person 2	Member
Person 3	Member
Person 4	Member
Person 5	Member
Person 6	Member
Person 7	Member
Person 8	Member
Person 9	Member
Person 10	Member
Person 11	Member
Person 12	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableStickyHeader() {
  return (
    <div className="max-h-48 overflow-y-auto">
      <Table stickyHeader highlight>
        <Table.Header>
          <Table.Row>
            <Table.Head>Name</Table.Head>
            <Table.Head>Role</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {Array.from({ length: 12 }).map((_, i) => (
            <Table.Row key={i}>
              <Table.Cell>Person {i + 1}</Table.Cell>
              <Table.Cell>Member</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  );
}

Caption

Table.Caption renders a caption above the table.

A list of recent team members.
Name	Role
Jane Cooper	Admin
Cody Fisher	Member

tsx

import { Table } from "@hummingbirdui/react";

export default function TableCaptionExample() {
  return (
    <Table>
      <Table.Caption>A list of recent team members.</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Jane Cooper</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cody Fisher</Table.Cell>
          <Table.Cell>Member</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Table.Footer renders a summary row group at the bottom of the table.

Item	Amount
Widget	$12.00
Gadget	$8.00
Total	$20.00

tsx

import { Table } from "@hummingbirdui/react";

export default function TableFooterExample() {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head>Item</Table.Head>
          <Table.Head>Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Widget</Table.Cell>
          <Table.Cell>$12.00</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Gadget</Table.Cell>
          <Table.Cell>$8.00</Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell>Total</Table.Cell>
          <Table.Cell>$20.00</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table>
  );
}

API Reference

Table

Prop	Type	Default
`size`	`"md" \| "sm"`	`"md"`
`color`	`"default" \| "neutral" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"`	`"default"`
`striped`	`boolean`	`false`
`stripedColumns`	`boolean`	`false`
`bordered`	`boolean`	`false`
`borderless`	`boolean`	`false`
`hover`	`boolean`	`false`
`highlight`	`boolean`	`false`
`stickyHeader`	`boolean`	`false`
`active`	`boolean`	`false`
`className`	`string`	—

Table.Row

Prop	Type	Default
`active`	`boolean`	`false`
`className`	`string`	—

Table.Cell

Prop	Type	Default
`active`	`boolean`	`false`
`className`	`string`	—

Table.Header, Table.Body, Table.Footer, Table.Head, and Table.Caption render their native table elements and accept only className alongside their standard element props.

Styling

Hummingbird React table is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available table classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousSonner NextTabs

Table

Default

Striped

Striped columns

Hover

Bordered

Borderless

Sizes

Colors

Active

Highlight

Sticky header

Caption

Footer

API Reference

Table

Table.Row

Table.Cell

Styling