Basic Table React component
A clean, semantic table for showing data as it is: plain, striped or bordered, comfortable or compact, a caption and a totals row, custom cells such as status pills, a sticky header that casts a shadow once you scroll, and rows that fade in on load.
About the Basic Table component
Basic Table is a clean, readable data table built from real table markup, for invoices, specs, schedules and comparisons that people read rather than sort or filter. It has a caption above it, a header row, an optional summary row at the bottom, rows that fade in one after another and a soft hover highlight.
columns sets each column's key, label, alignment, width and an optional render function that receives the cell value and the whole row, for badges, links or formatted numbers. rows takes plain objects keyed by column. variant picks plain, striped or bordered and density comfortable or compact. stickyHeader with maxHeight keeps the header in view while the body scrolls, and the table scrolls sideways on narrow screens.
When to use it
Use Basic Table to present data that people read rather than manipulate: invoices, specs, pricing comparisons, schedules, results. It's real table markup, so it's accessible and copies cleanly.
When people need to sort, filter, select or paginate, use Data Table instead.
Installation
Add the Basic Table component to your project with the shadcn CLI. It lands in components/basic-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/basic-tableOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<BasicTable /> accepts 12 props, all optional.
| Prop | Type | Default |
|---|---|---|
| columns | TableColumn[] | DEFAULT_COLUMNS |
| rows | Record<string, React.ReactNode>[] | DEFAULT_ROWS |
| caption A title above the table (also its accessible caption). | string | "Recent invoices" |
| footer Values for a summary row at the bottom, by column key. | Record<string, React.ReactNode> | { customer: "6 invoices", amount: "$8,380.00" } |
| variant | "plain" | "striped" | "bordered" | "plain" |
| density | "comfortable" | "compact" | "comfortable" |
| hoverable | boolean | true |
| stickyHeader Keep the header visible while the body scrolls (needs maxHeight). | boolean | false |
| maxHeight | number | — |
| animateIn Rows fade in one after another on mount. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- columnsTableColumn[]Default: DEFAULT_COLUMNS
- rowsRecord<string, React.ReactNode>[]Default: DEFAULT_ROWS
- caption
A title above the table (also its accessible caption).
stringDefault: "Recent invoices" - footer
Values for a summary row at the bottom, by column key.
Record<string, React.ReactNode>Default: { customer: "6 invoices", amount: "$8,380.00" } - variant"plain" | "striped" | "bordered"Default: "plain"
- density"comfortable" | "compact"Default: "comfortable"
- hoverablebooleanDefault: true
- stickyHeader
Keep the header visible while the body scrolls (needs maxHeight).
booleanDefault: false - maxHeightnumber
- animateIn
Rows fade in one after another on mount.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Basic Table FAQ
- How do I show badges or links in cells?
- Give a column a render function; it receives the cell value and the whole row, so you can return a status pill, a link or anything else.
- Does the header stay visible on long tables?
- Set stickyHeader and a maxHeight. The body scrolls under the header, which picks up a soft shadow once you scroll.
- Is it accessible?
- It uses caption, thead, th scope=col and scope=row, tbody and tfoot, so screen readers announce headers with every cell.
- How do I remove the summary row?
- footer has sample totals by default, and passing undefined keeps them. Pass your own footer row, keyed by column, or delete the footer default in the component file to show no summary row.
