demo D97
Remote, with the server doing the work
Blocks fetched as you scroll, sort and filter pushed to the API
source: { mode: 'remote' }
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
columnDefaults: { allowGroup: false, allowPivot: false },
selection: 'multiple',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
statusBar: { panels: ['rowCount', 'progress', 'updates', 'selectedCount'] },
// The sort and the filter are in the request, not in the client. Change
// either and the grid abandons the blocks in flight and asks again, and
// those are cancelled through the AbortSignal the request carries rather
// than left to arrive and be thrown away.
source: {
mode: 'remote',
pageSize: 100,
maxCachedPages: 16,
// A remote result reports its size under count (a paged one uses total).
// Return the wrong name and the grid never learns how many rows there
// are, so the scrollbar stays open-ended.
fetch: async (req) => {
const res = await fetch('/api/instruments', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(req),
signal: req.signal,
});
return res.json(); // { rows, count }
},
},
columns: [
{ field: 'symbol', title: 'Symbol', layout: { width: 130, pin: 'start' } },
{ field: 'name', title: 'Instrument', layout: { flex: 1, min: 170, max: 280 } },
{ field: 'desk', title: 'Desk', filter: { type: 'set' } },
{ field: 'book', title: 'Book', filter: { type: 'set' } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'price', title: 'Price', type: 'number', layout: { width: 120 },
format: { decimals: 4 }, filter: { type: 'number' } },
{ field: 'bid', title: 'Bid', type: 'number', layout: { width: 110 }, format: { decimals: 4 } },
{ field: 'ask', title: 'Ask', type: 'number', layout: { width: 110 }, format: { decimals: 4 } },
{ field: 'volume', title: 'Volume', type: 'number', layout: { width: 120 },
format: { notation: 'compact' }, filter: { type: 'number' } },
{ field: 'notional', title: 'Notional', type: 'number', layout: { width: 150 },
format: { style: 'currency', currency: 'USD', notation: 'compact' } },
{ field: 'status', title: 'Status', filter: { type: 'set' }, layout: { width: 110 },
cell: { decoration: 'pill', variant: { map: { open: 'success', halted: 'danger', settled: 'neutral' } } } },
],
// No rows: the server holds them and returns a block per request.
});
</script>Fetching rows from a server as the grid scrolls
A remote source hands row-fetching to the server: the grid asks for the block of rows a scroll position needs, and the sort, filter and grouping state travel with that request rather than being applied afterwards to a dataset already sitting in the browser. A developer reaches for this when the underlying table is too large to hand over in one response, or when the source of truth already has an index that can sort and filter faster than the client could. Lattice Grid switches on this behaviour with source: { mode: 'remote' }, and from that point the grid’s job is to request blocks, cache what it has already fetched, and re-request only the range that scrolling brings into view. Because this is a JavaScript data grid rather than a table that renders every row into the DOM, the visible viewport stays a fixed number of rows regardless of how many exist on the server, so scroll performance does not depend on total row count the way it would with a server-side row model bolted onto a client-rendered table. A column sort or a filter change triggers one new request for the current viewport rather than a re-fetch of the whole set, and rows already cached from an earlier scroll position are reused rather than requested twice.
How do I connect a data grid to a paginated or remote API?
Set source: { mode: 'remote' } and supply a fetch function that Lattice Grid calls with the requested row range, sort state and active filters. The grid requests only the block a scroll position needs, caches the result, and issues a new request when sorting, filtering or scrolling moves outside the cached range.