Remote data

Set dataMode="remote", pass the Grid sourceId, and implement dataSourceExecutor. The Grid calls records.list with a zero-based page, pageSize, and any active sort and filters.

{
  sourceId: 'current-account-invoices',
  operation: 'records.list',
  input: {
    page: 0,
    pageSize: 25,
    sort: [{field: 'dueDate', direction: 'asc'}],
    filters: {customer: 'north', status: 'pending'},
  },
}

Return the current page and the total matching records:

{operation: 'records.list', records: [{id: 'FAC-00481'}], total: 137}

const [filters, setFilters] = useState<Record<string, unknown>>({});

<DyonaGrid
  columns={columns}
  getRowId={(row) => row.id as string}
  dataMode="remote"
  sourceId="current-account-invoices"
  pageSize={25}
  dataSourceExecutor={dataSourceExecutor}
  filters={filters}
  onFiltersChange={setFilters}
/>

The built-in pagination sends the current page and pageSize; total defines the complete remote result.

Try it live in the Lab