Data
One very large table, understood at a glance.
50,000 developers, virtualized
Drag a header edge to resize (double-click resets). Click a header to sort all 50,000 rows. Scroll right: the developer column stays pinned.
Filter the grid
Filters are a composition, not a grid feature. The DataGrid stays dumb — it renders the rows
it is handed. A SearchField, a TagCombobox, and the applied FilterChips sit in the toolbar snippet and drive a `$derived` filtered array; the
grid never knows a filter exists.
Grid rules
Structure is visible
Row and cell hairlines always render. A table you have to squint at to see its own grid fails the non-technical reader first.
Direct manipulation
Columns resize by dragging, sort by clicking, and pin under horizontal scroll. The pulse green line marks the active resize; the chevron marks the active sort.
Honest scale
Rows virtualize, so fifty thousand render as thirty. Server-mode paging carries the same contract past what one payload can hold.
Cells carry meaning
Typed cells render design-system components, so provenance survives inside the grid: TypeScript Confirmed Top 3%
Charts
Charts are small with short explainers, never hero-sized, and divided bars replace donuts.
- TypeScript 58
- Rust 24
- Go 12
- Python 6
Comparison
Raw signals roll up to named capabilities before anyone reads them, so the UI speaks in velocity and craft, not metric names. Weights never render; evidence does.
Top 9% for code velocity within their cohort.
Top 16% for rigor within their cohort.
Top 17% for craft within their cohort.
Top 28% for influence within their cohort.
Affinity chips read slate, not green: they state a relation to a reference developer, not a quality claim.
When to use what
DataGrid is the table for anything interactive or large. For short static tables in cards and reports, compose Table inside TableCard. TableShell is deprecated as of v4 — DataGrid absorbed its job.