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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableDefault() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Esther Howard</TableCell>
          <TableCell>esther@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableStriped() {
  return (
    <Table striped>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Esther Howard</TableCell>
          <TableCell>esther@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableStripedColumns() {
  return (
    <Table stripedColumns>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableHover() {
  return (
    <Table hover>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Esther Howard</TableCell>
          <TableCell>esther@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableBordered() {
  return (
    <Table bordered>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableBorderless() {
  return (
    <Table borderless>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableSizes() {
  return (
    <div className="flex flex-col gap-6">
      <Table size="md">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Role</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Jane Cooper</TableCell>
            <TableCell>Admin</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Cody Fisher</TableCell>
            <TableCell>Member</TableCell>
          </TableRow>
        </TableBody>
      </Table>
      <Table size="sm">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Role</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Jane Cooper</TableCell>
            <TableCell>Admin</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Cody Fisher</TableCell>
            <TableCell>Member</TableCell>
          </TableRow>
        </TableBody>
      </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} 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}>
          <TableHeader>
            <TableRow>
              <TableHead>Color</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell>{color}</TableCell>
              <TableCell>Active</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      ))}
    </div>
  );
}

Active

The active prop on TableRow or TableCell highlights a single row or cell.

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

tsx

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableActive() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
        <TableRow active>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>Highlighted row</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Esther Howard</TableCell>
          <TableCell active>Highlighted cell</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableHighlight() {
  return (
    <Table highlight>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>cody@example.com</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </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,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

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

Caption

TableCaption renders a caption above the table.

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

tsx

import {
  Table,
  TableCaption,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableCaptionExample() {
  return (
    <Table>
      <TableCaption>A list of recent team members.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cody Fisher</TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

TableFooter 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,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
} from "@hummingbirdui/react";

export default function TableFooterExample() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Item</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Widget</TableCell>
          <TableCell>$12.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Gadget</TableCell>
          <TableCell>$8.00</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell>Total</TableCell>
          <TableCell>$20.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}

API Reference

Table

Prop	Type	Default	Description
size	`"md" \| "sm"`	`"md"`	Row density of the table.
color	`"default" \| "neutral" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"`	`"default"`	Color theme of the table.
striped	`boolean`	`false`	Apply a zebra background to alternating rows.
stripedColumns	`boolean`	`false`	Apply a zebra background to alternating columns.
bordered	`boolean`	`false`	Add borders around every cell.
borderless	`boolean`	`false`	Remove the default row borders.
hover	`boolean`	`false`	Highlight the row under the pointer.
highlight	`boolean`	`false`	Emphasize the table with a stronger surface treatment.
stickyHeader	`boolean`	`false`	Pin the header to the top while the body scrolls.
active	`boolean`	`false`	Highlight the entire table.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

TableRow

Prop	Type	Default	Description
active	`boolean`	`false`	Highlight the row.
className	`string`	—	Additional classes merged with the generated classes.

TableCell

Prop	Type	Default	Description
active	`boolean`	`false`	Highlight the cell.
className	`string`	—	Additional classes merged with the generated classes.

TableHeader, TableBody, TableFooter, TableHead, and TableCaption 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.

PreviousPopover NextTabs

Table

Default

Striped

Striped columns

Hover

Bordered

Borderless

Sizes

Colors

Active

Highlight

Sticky header

Caption

Footer

API Reference

Table

TableRow

TableCell

Styling