Tables · Registers · Data grids

Table scenarios for RAD and product screens.

Sort, filter, paginate, select, act on rows, and switch responsive behavior using native table markup and `data-uif-*` attributes.

5 scenarios Native semantics Remote mock

Scenario 1

Local account register

Client-side search, column filters, typed sorting, reset, and responsive cell labels for small-to-medium lists.

Local mode

Local accounts with sortable typed columns
Account	ARR	Renewal	Status	Owner
Metro Finance	$42,000	2026-07-15	Review	Asha
Kalinga Retail	$118,000	2026-08-02	Active	Ravi
Eastern Health	$76,000	2026-06-28	Paused	Nina
Blue Harbor	$94,000	2026-09-11	Active	Asha

Scenario 2

Remote table with query state

Mocked server-side sort, filter, page, and page-size requests using the same URL parameters a RAD endpoint would receive.

Mock endpoint

Remote accounts loaded from a mock endpoint
Account	ARR	Status	Owner

Scenario 3

Responsive priority and stack modes

Columns carry labels and priorities, so dense tables can scroll on desktop and become label/value rows on narrow screens.

Resize viewport

ScrollUse `.uif-table-wrap` for dense grids.

StackUse `data-uif-responsive="stack"`.

PriorityUse `data-uif-priority` on headers.

LabelsUse `data-uif-label` for mobile cells.

Responsive order queue
Order	Customer	Amount	Channel	SLA
ORD-2041	Sundar Foods	$1,420	Partner	4h
ORD-2042	Metro Finance	$892	Direct	12h
ORD-2043	Blue Harbor	$2,210	Marketplace	2h

Scenario 4

Selection, bulk actions, and row actions

Row checkboxes expose selected counts and stable IDs. Bulk and row actions emit events for governed server-side handlers.

0 selected

Approval queue with selectable rows
Request	Risk	Owner
Export billing report	Medium	Ada
Update workspace region	High	Grace
Refresh connector cache	Low	Linus

EventsInteract with selection or action buttons.

Scenario 5

RAD register starter

Copy-ready server-rendered markup for a register route with filters, pagination hooks, row actions, and progressive enhancement.

Server-friendly

<form class="uif-table-toolbar" data-uif-table-controls="#users-table">
  <input class="uif-input" name="q" type="search" data-uif-table-filter="#users-table">
  <select class="uif-input" name="status" data-uif-table-filter="#users-table" data-uif-filter-column="status" data-uif-filter-op="equals">...</select>
  <button type="button" data-uif-table-reset="#users-table">Reset</button>
</form>

<table id="users-table" class="uif-table" data-uif="table" data-uif-mode="remote" data-uif-src="/workspace/users" data-uif-key="id" data-uif-page-size="25">
  <thead>
    <tr>
      <th><input type="checkbox" data-uif-role="select-all" aria-label="Select all users"></th>
      <th data-uif-sort="name" data-uif-label="Name">Name</th>
      <th data-uif-sort="status" data-uif-label="Status">Status</th>
      <th data-uif-label="Action">Action</th>
    </tr>
  </thead>
  <tbody><!-- server JSON rows or trusted HTML rows --></tbody>
</table>