Simple Table · paneui

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "ghost"	"default"	How much the button stands out.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height and padding.
disabled	boolean	false	Dims the button and ignores presses.

Installation

pnpm dlx shadcn@latest add @paneui/simple-table

Usage

import {
  SimpleTable,
  SimpleTableBody,
  SimpleTableCell,
  SimpleTableHead,
  SimpleTableHeader,
  SimpleTableRow,
} from "@/components/ui/simple-table"

<SimpleTable>
  <SimpleTableHeader>
    <SimpleTableRow>
      <SimpleTableHead>Prop</SimpleTableHead>
      <SimpleTableHead>Description</SimpleTableHead>
    </SimpleTableRow>
  </SimpleTableHeader>
  <SimpleTableBody>
    <SimpleTableRow>
      <SimpleTableCell variant="code">size</SimpleTableCell>
      <SimpleTableCell>Height and padding.</SimpleTableCell>
    </SimpleTableRow>
  </SimpleTableBody>
</SimpleTable>

Composition

SimpleTable
├── SimpleTableHeader
│   └── SimpleTableRow
│       └── SimpleTableHead
└── SimpleTableBody
    └── SimpleTableRow
        └── SimpleTableCell   variant

Examples

Numbers

Comparisons

Short values across many columns fit a reading column without scrolling.

Markdown Tables

Map the table elements in your MDX components so GFM tables render as SimpleTable.

RTL

When to use

For reference content that is read, not worked in: prop tables, token lists, comparisons. For data people sort, select or scroll through, use Table.

Overflow

Inline code never breaks inside a word. On screens narrower than 40rem, body-text cells keep an 8rem floor, so a table that doesn't fit scrolls sideways instead of squeezing its prose; wider screens drop the floor, so short tables fit a reading column. Empty cells never get one. cellMinWidth="always" keeps the floor everywhere, "none" removes it, and a min-w-* class on the table sets a wider floor for the whole table.

Inline code and alignment

Bare <code> in default and numeric cells and in headers gets the inline-code chip, inside or outside prose; code with its own className keeps it. align takes the values Markdown and HTML write: left (:--), center (:-:) and right (--:) map to the start edge, the center and the end edge, so they flip under RTL. justify justifies the text and char is accepted and falls back to start.

API Reference

SimpleTable

Also accepts every prop of table.

containerClassName: string; Class for the raised, scrolling surface around the table.
cellMinWidth= "auto": "auto" | "always" | "none"; Floor for body-text cells: 8rem below 40rem of viewport with auto, always with always, never with none.

Prop	Type	Default	Description
containerClassName	string	—	Class for the raised, scrolling surface around the table.
cellMinWidth	"auto" \| "always" \| "none"	"auto"	Floor for body-text cells: 8rem below 40rem of viewport with `auto`, always with `always`, never with `none`.

data-cell-min-width: On the container, the cellMinWidth in use.

Data attribute	Description
data-cell-min-width	On the container, the `cellMinWidth` in use.

SimpleTableHeader

Also accepts every prop of thead.

SimpleTableBody

Also accepts every prop of tbody.

SimpleTableRow

Also accepts every prop of tr.

SimpleTableHead

Also accepts every prop of th.

align: "left" | "center" | "right" | "justify" | "char"; The Markdown or HTML value: left maps to start, center to center, right to end; justify and char are accepted. Without it, start.

Prop	Type	Default	Description
align	"left" \| "center" \| "right" \| "justify" \| "char"	—	The Markdown or HTML value: `left` maps to start, `center` to center, `right` to end; `justify` and `char` are accepted. Without it, start.

SimpleTableCell

Also accepts every prop of td.

variant= "default": "default" | "code" | "code-muted" | "type" | "numeric"; code for names, code-muted for defaults, type for long type strings, numeric for aligned numbers.
align: "left" | "center" | "right" | "justify" | "char"; Same as SimpleTableHead. Without it, the cell follows the table.

Prop	Type	Default	Description
variant	"default" \| "code" \| "code-muted" \| "type" \| "numeric"	"default"	`code` for names, `code-muted` for defaults, `type` for long type strings, `numeric` for aligned numbers.
align	"left" \| "center" \| "right" \| "justify" \| "char"	—	Same as `SimpleTableHead`. Without it, the cell follows the table.