Migrate to server-side data

Use this checklist when moving from a full in-memory data array and hooks such as afterChange to dataProvider. For an overview and demo, see Server-side data.

Checklist

1. Stable row ids — Set rowId to a property name (for example 'id') or a function. Every row from the server must include that field.
2. fetchRows — Replace ad hoc loadData calls with fetchRows(queryParameters, { signal }). Read page, pageSize, sort, and filters from queryParameters, call your API, return { rows, totalRows }, and honor signal for cancellation. Drop or stop updating the old data array; with a complete provider, it is not used.
3. CRUD callbacks — Implement onRowsCreate, onRowsUpdate, and onRowsRemove for your backend. Until all three are valid functions (with rowId and fetchRows), the configuration is incomplete. Details: Create, update, and remove.
4. Pagination and sort — Set pagination to true or pass an object (for example { pageSize: 10 } so fetchRows receives that pageSize in queryParameters). Use columnSorting for single-column server sort. Keep multiColumnSorting, trimRows, manualRowMove, and manualColumnMove off if you need DataProvider to run; when any of them is truthy, the DataProvider plugin does not enable (see Plugins and options that conflict with DataProvider).
5. Save hooks — If you only used afterChange to POST each edit, remove that and rely on onRowsUpdate batches instead. Keep unrelated hooks (validation UI, analytics, etc.).
6. Filters (optional) — Enable filters and translate queryParameters.filters on the server. See Column filter.
7. Frameworks — Pass dataProvider inside grid settings (HotTable, hot-table, or Vue :settings). After updateSettings in React, preserve selection with selection.exportSelection() and selection.importSelection() on the Handsontable instance where your wrapper documents it.

More in this guide

Server-side data→

Configuration and query parameters→

Create, update, and remove→

Fetching, hooks, and examples→

Result

Your grid now loads and saves data server-side using the updated API.