Server-side data tables and pagination
Let the table own interaction state while an authenticated API owns filtering, sorting, pagination, summaries, and mutations.
Manual processing
#Enable manualFiltering, manualSorting, and manualPagination. Send state changes to the API, then call setData(rows, total, summaries).
Managed data source
#The data-source controller adds debounce, AbortSignal cancellation, cache control, stale-response protection, loading status, and refresh/invalidate methods.
Cursors and facets
#Use opaque cursor controllers for infinite loading and loadFacets for remote SearchPanes. Superseded requests are cancelled automatically.
- Authenticate every request and authorize tenant/query scope on the server.
- Treat cursor values as opaque and sign them when exposed to clients.
- Destroy observers and data-source controllers with the owning view.
Connect table state to an API
#This recipe focuses on the integration pattern. Replace application-specific values and callbacks with your own data and services.
const remote = createDataTableDataSourceController({
table: table.core,
debounceMs: 200,
async dataSource({ state, signal }) {
const response = await fetch('/api/people?' + toQuery(state), { signal });
return response.json(); // { rows, rowCount, summaryValues }
}
});The framework quick start includes install commands, a typed data file, and the component that renders it.
Go to the quick start →Ready to try it with real data?
Explore configurable examples ↗