Choose ownership first. Add interactions second.

Local data

Pass the complete array through dataSource. Data Table Pro performs local sorting and filtering in its worker; use onChangeto receive edits and row operations. Memoize column settings and callbacks for smooth virtual scrolling.

<DataTable
  dataSource={rows}
  onChange={setRows}
  columnSettings={columns}
  enablePagination
  showGlobalSearch
/>

Server-side windows

For remote datasets, the host owns ordering, filtering, and cache population. Provide rowCount, getRow, anddataVersion; fetch ranges reported byonVisibleRangeChange. Synchronize sort and filter state with the external props and callbacks.

<DataTable
  rowCount={total}
  getRow={(index) => cache.get(index)}
  dataVersion={cacheVersion}
  onVisibleRangeChange={loadWindow}
  onSortChange={setRemoteSort}
  onFilterChange={setRemoteQuery}
  columnSettings={columns}
/>

Editing and selection

Enable editing at table level and configure an editor oreditCell per editable column. Local edits flow throughonChange; windowed edits use onCellsEdit. Row checkboxes are independent from active-cell and range selection.

Use enableRowSelection, optionallyenableMultiRowSelection, and observe selected rows withonSelectedRowsChange.

Imports and exports

Turn on enableUpload and enableDownload for local CSV workflows. Rich cells should define exportValue. Remote tables must supply getRowsForExport so exports cover the full result, not only the visible cache. When ExcelJS is installed, XLSX uses the built-in lazy createXlsxAdapter by default; pass xlsxAdapter only to customize that integration. Use CSV for very large exports.

Responsive behavior

The grid virtualizes horizontally instead of collapsing columns. Give its container a measurable width, set maxHeight, and seed essential mobile columns with explicit widths and ordering. Let users hide secondary fields through enableColumnSettings; keep touch targets and surrounding page controls outside the scroll surface.