React Table: examples and API

Preview

Live preview

Changes apply to this preview only.

Workspace projects
Project	Status
Atlas	Live
Orbit	Review

Loading the interactive example?

Width adapts to the available space

"use client";

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

export function TableExample() {
  return (
    <Table caption="Workspace projects" striped>
      <TableHeader>
        <TableRow>
          <TableHead>Project</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableHead scope="row">Atlas</TableHead>
          <TableCell>
            <Badge
              variant="success"
            >
              Live
            </Badge>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableHead
            scope="row"
          >
            Orbit
          </TableHead>
          <TableCell>
            <Badge
              variant="warning"
            >
              Review
            </Badge>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

More examples

Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.

Pricing table

TableHeader, TableBody and TableFooter keep the native table structure; a row header names each plan.

Open preview

Densities

sm, md and lg change padding, body type and header type together.

Open preview

Treatments

striped alternates body rows; bordered draws cell borders. They compose.

Open preview

Usage

Compose TableHeader, TableBody, TableRow, TableHead and TableCell. Use caption to explain the dataset and density to change row spacing.

Table does not add sorting, selection or pagination on its own. Use DataTable or DataGrid for those workflows, and preserve contained horizontal scrolling when columns need room.

API reference

Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.

PimoluTableProps

Type source

PimoluTableProps public API
Name	Type	Default	Description
`density`	`PimoluTableDensity \| undefined`	`"md"`	Row density. Defaults to "md".
`striped`	`boolean \| undefined`	`false`	Alternate the background of body rows. Defaults to false.
`bordered`	`boolean \| undefined`	`false`	Draw borders around the table and its cells. Defaults to false.
`stickyHeader`	`boolean \| undefined`	`false`	Keep the header visible while the wrapper scrolls. Defaults to false.
`caption`	`ReactNode`	—	Convenience caption rendered before the children.
`containerClassName`	`string \| undefined`	—	Extra class for the horizontal-scroll wrapper.
`containerProps`	`HTMLAttributes<HTMLDivElement> \| undefined`	—	Native attributes for the horizontal-scroll wrapper.
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableElement> \| undefined`	—	Standard React/HTML attribute.

density: PimoluTableDensity | undefined
Default: "md"
Row density. Defaults to "md".
striped: boolean | undefined
Default: false
Alternate the background of body rows. Defaults to false.
bordered: boolean | undefined
Default: false
Draw borders around the table and its cells. Defaults to false.
stickyHeader: boolean | undefined
Default: false
Keep the header visible while the wrapper scrolls. Defaults to false.
caption: ReactNode
No default extracted.
Convenience caption rendered before the children.
containerClassName: string | undefined
No default extracted.
Extra class for the horizontal-scroll wrapper.
containerProps: HTMLAttributes<HTMLDivElement> | undefined
No default extracted.
Native attributes for the horizontal-scroll wrapper.
children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableHeaderProps

Type source

PimoluTableHeaderProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableSectionElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableSectionElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableSectionElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableBodyProps

Type source

PimoluTableBodyProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableSectionElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableSectionElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableSectionElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableFooterProps

Type source

PimoluTableFooterProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableSectionElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableSectionElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableSectionElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableRowProps

Type source

PimoluTableRowProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableRowElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableRowElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableRowElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableRowElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableHeadProps

Type source

PimoluTableHeadProps public API
Name	Type	Default	Description
`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup" \| undefined`	`"col"`	Native scope, defaulting to "col".
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`children`	`ReactNode`	—	Standard React/HTML attribute.
`onChange`	`ChangeEventHandler<HTMLTableCellElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableCellElement> \| undefined`	—	Standard React/HTML attribute.

scope: "col" | "row" | "colgroup" | "rowgroup" | undefined
Default: "col"
Native scope, defaulting to "col".
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
children: ReactNode
No default extracted.
Standard React/HTML attribute.
onChange: ChangeEventHandler<HTMLTableCellElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableCellElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableCellProps

Type source

PimoluTableCellProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableCellElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableCellElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableCellElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableCellElement> | undefined
No default extracted.
Standard React/HTML attribute.

PimoluTableCaptionProps

Type source

PimoluTableCaptionProps public API
Name	Type	Default	Description
`children`	`ReactNode`	—	Public Pimolu prop; see the source declaration for details.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onChange`	`ChangeEventHandler<HTMLTableCaptionElement, Element> \| undefined`	—	Standard React/HTML attribute.
`onClick`	`MouseEventHandler<HTMLTableCaptionElement> \| undefined`	—	Standard React/HTML attribute.

children: ReactNode
No default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onChange: ChangeEventHandler<HTMLTableCaptionElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
onClick: MouseEventHandler<HTMLTableCaptionElement> | undefined
No default extracted.
Standard React/HTML attribute.

Accessibility

Keep column headings and the caption descriptive. TableHead defaults to scope=col.
For a row heading, use TableHead with scope=row. Do not rebuild tabular relationships with generic div elements.

Read the accessibility guide →

Preview

More examples

Pricing table

Densities

Treatments

Usage

API reference

PimoluTableProps

PimoluTableHeaderProps

PimoluTableBodyProps

PimoluTableFooterProps

PimoluTableRowProps

PimoluTableHeadProps

PimoluTableCellProps

PimoluTableCaptionProps

Accessibility

Related components