StellarUI

<stellar-datatable>

Backend-controlled data table with semantic authored markup, Datastar request events, and non-optimistic pagination, sorting, filtering, and selection.

Properties

Component

Example

Preview

Launch roster Backend-controlled preview

36 matches

0 selected

Name	Email	Role	Team
Ana Reyes u_1	ana.reyes@stellar.test	admin	Flight
Aria Long u_28	aria.long@stellar.test	viewer	Payload
Ava Turner u_14	ava.turner@stellar.test	editor	Guidance
Cole Hughes u_24	cole.hughes@stellar.test	viewer	Finance
Drew Simmons u_34	drew.simmons@stellar.test	editor	Payload
Eli Watson u_15	eli.watson@stellar.test	support	Mission Control
Emma Bell u_25	emma.bell@stellar.test	admin	Flight
Ezra Kim u_8	ezra.kim@stellar.test	viewer	Guidance
Finn Cox u_31	finn.cox@stellar.test	support	Flight
Iris Rivera u_30	iris.rivera@stellar.test	editor	Finance

Showing 1 to 10 of 36 rows. 0 visible selections confirmed.

Markup

Copy

<div
  id="datatable-demo"
  data-signals:datatable-loading="false"
  data-indicator:datatable-loading
  data-on:datatable-request="@post('/components/stellar-datatable/demo/request', { payload: evt.detail.next })"
>
  <stellar-datatable
    data-attr:label="$label || 'Launch roster'"
    page="1"
    page-size="10"
    total-rows="36"
    sort='[{"id":"email","desc":false}]'
    filters='{}'
    selected-ids='[]'
    data-attr:selection="$selection || 'multiple'"
    data-attr:filter-debounce="$filterDebounce || 250"
    data-attr:sticky-header="$stickyHeader ? true : null"
    data-attr:loading="$datatableLoading ? true : null"
  >
    <stellar-toolbar slot="toolbar">...</stellar-toolbar>
    <stellar-table zebra hover data-attr:pin-rows="$stickyHeader ? true : null">
      <table>...</table>
    </stellar-table>
    <stellar-pagination data-datatable-pagination></stellar-pagination>
  </stellar-datatable>
</div>

API

Complete props, events, slots, and implementation notes for the shipped backend-controlled datatable.

Props

Prop	Type	Default	Notes
`label`	`string`	`Data table`	Accessible region label for the enhanced table surface.
`page`	`number`	`1`	Current backend-confirmed page.
`page-size`	`number`	`25`	Rows per page. Changes emit `datatable-request` with `reason="page-size"`.
`total-rows`	`number`	`0`	Total backend-confirmed row count used to sync the nested pagination control.
`sort`	`Array<{ id, desc }>`	`[]`	Controlled sort model. Header clicks cycle `asc → desc → none`; `Shift+click` appends multi-sort entries.
`filters`	`object`	`{}`	Controlled filter payload keyed by `data-datatable-filter`.
`selected-ids`	`string[]`	`[]`	Controlled selected row ids. The component computes proposals but does not commit them locally.
`loading`	`boolean`	`false`	Truthful pending state. Use Datastar `data-indicator` to bind this prop during requests.
`selection`	`none \| single \| multiple`	`multiple`	Selection mode for row and visible-page controls.
`filter-debounce`	`number`	`300`	Debounce duration in milliseconds for `input`-driven filters.
`sticky-header`	`boolean`	`true`	Makes the table header sticky inside the internal overflow viewport.

Events

Event	Source	Notes
`datatable-request`	`stellar-datatable`	Primary backend request event. Detail includes `reason`, `current`, `next`, and `meta`.
`before-page-change`	`stellar-pagination`	The datatable intercepts the nested pagination control's cancelable event to keep page changes non-optimistic.
`input` / `change`	`descendant controls`	Observed on sort, filter, selection, and page-size controls. The table derives a proposed next state from these interactions.

Slots

Slot	Notes
`default`	Author the semantic table markup, nested pagination, and any surrounding helper content directly in light DOM.
`slot="toolbar"`	Optional authored toolbar content that sits above the viewport. Existing StellarUI filter and action controls belong here.

Backend Flow

The browser owns only transient interaction. A sort click, filter edit, page change, or row selection makes stellar-datatable emit datatable-request with detail.current, detail.next, detail.reason, and detail.meta.
The docs demo listens on the wrapper with data-on:datatable-request and posts to /components/stellar-datatable/demo/request. The request body is just evt.detail.next.
Datastar sets datatable-loading from data-indicator while that request is in flight. The table binds that signal into its loading prop, so pending UI is backend-honest instead of optimistic.
The Go handler at POST /components/stellar-datatable/demo/request decodes the posted state into datatableDemoState, normalizes it, applies role or query filters, sorts the full row set, clamps paging, and computes the visible selection count.
The handler then renders DatatableDemoFragment(viewModel) and patches only #datatable-demo back over SSE. That one patch updates rows, counts, pagination, and the authoritative datatable props together.
Because the backend re-renders the confirmed state, checkbox state, sort indicators, and the current page do not visually commit until the server response lands.

Notes

stellar-datatable is controlled like TanStack's server-side patterns, not a client-owned grid model. The backend confirms page, sort, filters, and selection by patching props and rows back together.
The preview follows Datastar's data-indicator pattern so loading is visible and honest. Interactions emit datatable-request, but the component does not optimistically commit row selection or pagination.
AG Grid's broader feature set was used as a capability reference only. v1 intentionally stops at server-controlled paging, sorting, filters, visible-page selection, and semantic table markup.
Use existing StellarUI controls around the table: stellar-toolbar, stellar-text-field, stellar-select, stellar-checkbox, and stellar-pagination.