Skip to content
ThorbisInterface Guidelines (opens in a new tab)
All components

Table

Semantic rows and columns for exact comparison and accessible reading order.

Adopted
Family
Evidence
Available import
@/components/ui/table
Status
Thorbis wrapper and live specimen ship here.
Live Thorbis specimentable
Today’s scheduled work
JobCustomerStatusAmount
#1842 · Water heaterMike ReyesScheduled$1,840
#1846 · Main-line inspectionOwen BrooksEn route$385
#1851 · Kitchen leakRina PatelNeeds approval$640
Use
Use when values share attributes and people need to compare them precisely.
Avoid
Do not use for layout, omit headers, or force a desktop-width grid onto mobile.

Use this component

GitHub source links require access to the private Thorbis design repository.

Wrapper sourceRepository and dependencies

Value exports
  • Table
  • TableBody
  • TableCaption
  • TableCell
  • TableFooter
  • TableHead
  • TableHeader
  • TableRow
Type exports
None.
Setup, styles, and dependencies

These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.

Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.

For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.

Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.

Direct imports in this wrapper:

  • ./table.stylex
  • @stylexjs/stylex
  • react

A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.

Adoption contract

  1. Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
  2. Use Thorbis color, type, space, radius, shadow, and motion tokens only.
  3. Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
  4. Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.
Official ShadCN component directory

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Preserve the place as the collection grows

Large customer, property, and inspiration collections become expensive to navigate when every inspection loses the current place.

Treat filters, selected records, scroll, and Back behavior as part of the task. Loading a child or optional panel should not reset the whole collection. A saved reference includes enough context to be useful when revisited.

Thorbis example. Open a property from a filtered customer list and return to the same filter and position. On the inspiration wall, reserve the media footprint and retain source credit even when the preview is unavailable.

Verify. Try refresh, Back and Forward, a direct record link, an empty result, a failed preview, and a long collection. Check that late data does not overwrite a draft or move the action under the pointer.

Do not import. No unbounded eager media, private information in shareable URLs, or a local-only storage promise borrowed from Copper.

Open the ecosystem skill · Evidence: 7 Principles of Rich Web Applications; Component Architecture for React Server Components; Philosophy; Copper

Keep operational text steady and unambiguous

Changing digits, shifting labels, and brittle wrapping make money and status harder to inspect.

Evaluate numeric alignment where amounts are compared, stable action labels during requests, and wrapping with real content. Treat optical adjustments as controlled system decisions. Keep the existing font families and semantic type roles.

Thorbis example. An invoice comparison aligns changing amounts without hiding their currency or precision. A long property name wraps without displacing the next action. Save remains the action; the adjacent status explains what happened.

Verify. Try zero, negative and large amounts, long names, missing values, fallback fonts, text expansion, and browser zoom. Compare readability at actual size rather than approving a magnified specimen alone.

Do not import. No blanket balanced wrapping on data rows, copied display face, custom page-local type scale, or status copy that claims more than the system knows.

Open the type skill · Evidence: Details that make interfaces feel better; Web Interface Guidelines; Invisible Details

Loading search…

Loading search. You can close this message and keep reading.