bc-grid
GitHub

Paged row model

View source

Pull pages on demand from a server endpoint instead of loading the whole dataset client-side. Sort, filter, and search round-trip to the server; the grid manages cache, abort, retries, and viewKey-aware invalidation.

Synthetic dataset of 100,000 rows. Each page request simulates a 250ms server round trip.
Order #
Customer
Sales rep
Status
Amount
Opened
Region
Loading

Try this

Each interaction sends a fresh query — watch the brief loading state.

  • Click a sortable header — query refires with a new sort.
  • Use the search input — query refires; the grid pages from the filtered set.
  • Change page size — the grid refetches with the new window.
  • Page through with the chevron buttons. Total rows update in the status bar.

The contract

  • loadPage(query, ctx). Receives a typed ServerPagedQuery ({ pageIndex, pageSize, view: { sort, filter, search, groupBy }, requestId, viewKey }). Returns a ServerPagedResult ({ rows, totalRows, pageIndex, pageSize }).
  • AbortSignal. ctx.signal aborts in-flight requests when the view changes (filter / sort / search refire). Wire it through to fetch for proper cancellation.
  • viewKey. Stable string identifying the current view; pages with stale viewKeys are dropped on arrival even if the network round trip wins the race.
  • requestId. Monotonic per-grid identifier; useful for telemetry / log correlation.

Server-side editing

Pair <BcServerGrid rowModel="paged"> with onServerRowMutation and the grid handles optimistic overlay, rollback on rejection, stale-mutation suppression, and cache reconciliation. See the Edit grid page for the per-cell commit lifecycle and useServerPagedGrid for the turnkey hook that wires everything together.