jsp-dsv0.1

Tableshadcn

Rows and columns of records.

Data display
Install
npx shadcn add table
Import from
@/components/ui/table
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

Invoices this quarter
InvoiceClientStatusAmount
INV-0041Into GamesPaid£4,800.00
INV-0042PicslDue£6,250.00
INV-0043Review HubDraft£1,200.00
Rows of records with a caption. Right-align numbers; status is a badge with words.

Guidance

When to use

  • Records people compare across the same columns: invoices, screens, team members.

Rules

  • A TableCaption or a heading names the table.
  • Right-align numbers and use tabular-nums; left-align text.
  • Status is a Badge with words.
  • Keep row actions in a ghost icon button with a menu, labelled with the row's name (Actions for Q3 report).

Known limitation

  • shadcn's wrapper scrolls wide tables but isn't keyboard-focusable (ISS-08). Wrap wide tables yourself until a JSP DataTable exists.

Install

Terminal
npx shadcn add table
Import
import { Table } from "@/components/ui/table"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.