data · interactive grid

TuxRichDataGrid

Interactive data grid for operational and research-dashboard surfaces — Landscape-class apps where the reader needs to act on rows, not just read them. Anatomy adapted from Ant Design Table and Microsoft Fabric Rich-data-grid; identity stays TUX (Work Sans / JetBrains Mono, maroon focus, warm- neutral surfaces, tabular figures throughout).

State is host-driven — selection, expansion, sort, filters, and pagination are all v-model bindings or events. The component renders; it doesn't own the data. For static editorial tables (numbered captions, footnotes, source line), use TuxDataTable. For the thin UTable wrap, use TuxTable.

flagship · operational dashboard

Full interactive grid

Sticky header, row selection, expandable detail panels, sortable columns, active-filter chips, and a bulk-action bar that surfaces when ≥1 row is selected. Click the chevron to expand a row; click headers to sort.

FiltersDistrict:Houston, Austin, San AntonioStatus:Active or Risk

2 selected


	I-45 Central Sustained PRJ-2847 · Construction	Houston	T. Nguyen	Risk	28.7	19.9	1280
Scope · PRJ-2847 Stack reconstruction; ROW acquisition lagging 14% behind plan. Last update 2025-10-29
	I-10 Border Freight PRJ-2844 · Construction	El Paso	J. Aguirre	Active	21.0	48.2	644.8
	I-35 Capital Express PRJ-2841 · Construction	Austin	L. Whitfield	Active	18.4	23.6	482
	US-290 East Reliever PRJ-2842 · Design 60%	Houston	C. Okafor	Active	12.1	31.4	218.5
	Loop 1604 Reconstruction PRJ-2845 · Design 90%	San Antonio	P. Choudhury	Active	9.3	14	312.4
	US-59 Lufkin Bypass PRJ-2848 · Design 30%	Atlanta	K. Boyd	Active	6.8	11.2	154.1
	SH-130 Rural ITS PRJ-2843 · Scoping	San Antonio	M. Reyes	Hold	4.2	9.8	36.2
	FM-1488 Rural Realign PRJ-2846 · Closeout	Houston	S. Patel	Closed	0.0	5.1	41.7

<TuxRichDataGrid
  title="Active corridor projects"
  meta="FY 2025 · 8 of 184 · last sync 14 min ago"
  :columns="columns"
  :rows="sortedRows"
  :filters="filters"
  v-model:selected="selected"
  v-model:expanded="expanded"
  v-model:sort-key="sortKey"
  v-model:sort-dir="sortDir"
  pagination-label="Showing 1–8 of 184 projects"
  :pagination-tokens="paginationTokens"
>
  <template #cell-status="{ row }">
    <span class="rdg-status" :data-tone="row.status">
      <span class="rdg-status-dot" />
      {{ row.status }}
    </span>
  </template>

  <template #expanded="{ row }">
    <div class="rdg-expanded">
      <p class="eyebrow">Scope · {{ row.id }}</p>
      <p>{{ row.scope }}</p>
    </div>
  </template>
</TuxRichDataGrid>

embedded · dashboard tile

Compact variant

Disable selection, expansion, and the search/filter trio for a denser surface that lives inside a dashboard tile or side rail. Density set to compact for tighter row rhythm.

Project	Status	Delay	Budget
I-35 Capital Express	Active	18.4	482
US-290 East Reliever	Active	12.1	218.5
SH-130 Rural ITS	Hold	4.2	36.2
I-10 Border Freight	Active	21	644.8
Loop 1604 Reconstruction	Active	9.3	312.4

<TuxRichDataGrid
  title="Top corridors by delay"
  :columns="compactColumns"
  :rows="compactRows"
  density="compact"
  selection-disabled
  expansion-disabled
  :show-search="false"
  :show-filter="false"
  :show-columns="false"
/>

per-column controls

Header-menu slot

The #headerMenu slot mounts a consumer-supplied control next to each column header. Use it to expose sort / hide / pin / filter actions from the header itself — TUX ships no default chrome, so consumers compose with UDropdownMenu, UPopover, or a full TuxFilterPanel. Slot scope: { column, sortKey, sortDir }.


I-35 Capital Express	Austin	L. Whitfield	Active
US-290 East Reliever	Houston	C. Okafor	Active
SH-130 Rural ITS	San Antonio	M. Reyes	Hold
I-10 Border Freight	El Paso	J. Aguirre	Active
Loop 1604 Reconstruction	San Antonio	P. Choudhury	Active

<TuxRichDataGrid :columns :rows>
  <template #headerMenu="{ column }">
    <UDropdownMenu :items="menuItemsFor(column)">
      <button class="th-menu-btn" aria-label="Column actions">⋮</button>
    </UDropdownMenu>
  </template>
</TuxRichDataGrid>

big lists

Virtualized mode — 5,000 rows

Pass virtualized and the body windows through @tanstack/vue-virtual: only the visible slice of rows renders, bracketed by spacer rows that preserve the scroll extent — sticky header, sorting, and key-based selection all keep working. Rows should be uniform height (virtual-row-height, default 44). Row expansion is disabled while virtualized. This demo scrolls 5,000 generated rows; inspect the DOM to watch the window move.

<TuxRichDataGrid
  virtualized
  :virtual-row-height="44"
  :rows="rows"      <!-- 5,000 rows -->
  :columns="columns"
  row-key="id"
  max-height="360px"
/>