Skip to content
Handsontable dev

Migrate to server-side data

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