Data display / Table

Table

<Table />Stable

A data-heavy table system in two layers. The token-driven base primitives + cell kit (sortable headers, selection, avatar+name entities, status badges, inline cell editors, row actions, empty + loading states) compose any table by hand; <DataTable> adds a TanStack engine for sorting, global search, pagination, row selection, column show/hide, one-level grouped headers, totals footers, clickable rows, and column-integrated inline editing (text · number · select-of-badges) through meta.editable + onCellCommit. Density, zebra, hover, bordered, and stickyHeader are table-level switches.

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableEntityCell, TableActions, DataTable, selectionColumn, actionsColumn } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

RecruitPosGPAStatus
MR

Marcus Reed

Class of 2027

QB3.42Committed
TB

Tariq Bell

Class of 2027

WR3.81Watchlist
ES

Eli Sanders

Class of 2027

LB3.55Cooling
JC

Jaylen Carter

Class of 2027

RB3.62Top board

Code

import { Table } from "@/components/upnext";


<Table />

Showcase

Every cell type in one table, then the three product recipes: the athlete roster (full engine + row click), career stats (a quiet grouped-header band, emphasized GP/GS, live career totals, missing seasons as neutral dashes), and admin editing (click-to-edit cells that open the real Input primitive — its border and focus ring, hugged inside the cell — plus a permanent select of toned badges; edit affordances stay visible at rest, never hover-revealed). Rows separate with hairline borders and a muted hover, never stripes; empty values render a --text-body-light dash; in-table scrolling shows a thin --border indicator. Everything left-aligns — numeric columns keep tabular digits and never wrap, text cells wrap intelligently instead of truncating.

RecruitPosGPAStatusActions
MR

Marcus Reed

Class of 2027

QB
Committed
TB

Tariq Bell

Class of 2027

WR
Watchlist
ES

Eli Sanders

Class of 2027

LB
Cooling
JC

Jaylen Carter-Wu

Class of 2027

RB
Top board
{/* selection · avatar+name · text · inline-editable · status badge · row actions */}
<Table bordered>
  <TableHeader><TableRow>
    <TableSelectionHead checked={…} onCheckedChange={…} />
    <TableHead>Recruit</TableHead><TableHead>Pos</TableHead>
    <TableHead align="numeric">GPA</TableHead><TableHead>Status</TableHead>
    <TableHead align="end" className="w-12"><span className="sr-only">Actions</span></TableHead>
  </TableRow></TableHeader>
  <TableBody>
    <TableRow data-state={selected ? "selected" : undefined}>
      <TableSelectionCell checked={selected} onCheckedChange={…} />
      <TableEntityCell name="Marcus Reed" secondary="Class of 2027" color="cobalt" />
      <TableCell>QB</TableCell>
      <TableEditableCell align="numeric" value={gpa} onCommit={setGpa} />
      <TableCell><Badge tone="success" appearance="soft">Committed</Badge></TableCell>
      <TableActions>
        <DropdownMenuItem><Pencil /> Edit</DropdownMenuItem>
        <DropdownMenuItem variant="destructive"><Trash2 /> Remove</DropdownMenuItem>
      </TableActions>
    </TableRow>
  </TableBody>
</Table>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.