Skip to main content

BriteTable

Sharedcomponent✓ stamped

Data table — sortable headers, toolbar, and inline-editable cells.

@brite-nites/design-system/primitives/brite-table

Columns are defined once on <BriteTable>; both header and body cells reference them by column='key'. Resize handles auto-render on every fixed-width column (drag to resize). Width state is shared between header and body via context so body rows always track the header. Pattern matches Linear / Notion / TanStack / AG Grid.

Full example — Customers list

Toolbar (BriteFilterChipGroup + Layout button) + sortable table + square Avatar for account marks + circular Avatar + AvatarStack + BriteActionMenu on hover. Zero custom chrome.

Filters:
Start Date:Feb, 2027
Is Within
Team
Apex Consulting Group
Daniel Garcia
170,310.85
Crestview Communications
Daniel Garcia
200,890.95
Evergreen Logistics
Sarah Davis
+1
190,780.45
Frontier Energy Corp
Robert Clark
220,330.25
Global Dynamics Corp
John Sir
120,800.90
Heritage Manufacturing
Sarah Davis
150,900.40
Innovatech Industries
Michael Smith
130,450.75
Legacy Health Partners
Patricia Harris
+1
210,670.15
Noble Industries
Mary Lewis
230,555.55
Pioneer Technologies
Emily Johnson
+1
140,220.60
Summit Software Systems
Chris Wilson
160,675.50
Vertex Financial Services
James Lee
180,500.00

Density

compact (32) / default (36) / comfortable (44). Default is 36 — reads as dense but legible. Use compact for data-heavy views, comfortable for short lists with imagery.

density="compact"
Name
Role
Team
Max Brengle
Installer
Sarah Chen
Installer
Daniel Garcia
Installer
density="default"
Name
Role
Team
Max Brengle
Installer
Sarah Chen
Installer
Daniel Garcia
Installer
density="comfortable"
Name
Role
Team
Max Brengle
Installer
Sarah Chen
Installer
Daniel Garcia
Installer

Editable cells

Row click selects (or navigates). Any cell that wraps an editable primitive (PropertyField, AssigneeField, BriteChipField, BriteInlineTextCell, BriteInlineDescriptionCell) adds `onClick={(e) => e.stopPropagation()}` so opening a popover doesn't fire the row click. All clipping + overflow concerns live in the primitives — cells themselves stay dumb.

Account
Status
Assignee
Due
Tags
Ref
Description
Evergreen Logistics
Vertex Financial
Heritage Manufacturing

Text field variants: BriteInlineTextCell for short labels / refs (single-line, 60-char cap, tooltip on hover when truncated). BriteInlineDescriptionCell for long-form fields — click opens a floating textarea anchored to the cell that grows downward as you type (250-char cap), commits on Enter or blur, Shift+Enter for newline, Escape to discard. Filled cells render truncated with a hover tooltip that shows the full description.

Striped

Alternating row backgrounds for long, dense lists where the eye needs help tracking across columns.

Account
Lead
Amount
Global Dynamics Corp
John Sir
$120,800.9
Innovatech Industries
Michael Smith
$130,450.75
Pioneer Technologies
Emily Johnson
$140,220.6
Heritage Manufacturing
Sarah Davis
$150,900.4
Summit Software Systems
Chris Wilson
$160,675.5
Apex Consulting Group
Daniel Garcia
$170,310.85