Server Row Model

import {
  createDataGrid, filtering, serverRowModel, sorting, virtualization
} from '@sv5ui/datagrid';
import type {
  DataSource, GetRowsRequest, GetRowsResult
} from '@sv5ui/datagrid';

const source: DataSource<Order> = {
  async getRows(request: GetRowsRequest): Promise<GetRowsResult<Order>> {
    const response = await fetch('/api/orders?' + new URLSearchParams({
      start: String(request.startRow),
      end: String(request.endRow),
      sort: JSON.stringify(request.sortModel),
      filter: JSON.stringify(request.filterModel)
    }));
    const { rows, total } = await response.json();
    return { rows, rowCount: total };
  }
};

const grid = createDataGrid<Order>({
  columns,
  data: [],
  getRowId: (order) => order.id,
  rowModel: 'server',
  features: [
    sorting(),
    filtering(),
    virtualization({ rowHeight: 40 }),
    serverRowModel(source, {
      mode: 'infinite',
      blockSize: 100,
      maxBlocks: 8,
      placeholder: (index) => ({
        id: `pending-${index}`,
        sku: '',
        customer: '',
        units: 0,
        total: 0
      })
    })
  ]
});

// rowModel: 'server' is required. Without it the pipeline would filter and
// sort the page again, over rows the source already filtered and sorted.

import { toSortRequest, type DataSource, type GetRowsRequest } from '@sv5ui/datagrid';

// The client half. One POST per block, and nothing else.
const source: DataSource<Person> = {
  async getRows(request: GetRowsRequest) {
    const response = await fetch('/api/people', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        startRow: request.startRow,
        endRow: request.endRow,
        // toSortRequest turns the grid's sortModel into what a backend is
        // written against: the field name, and which end blanks belong at.
        sort: toSortRequest(request.sortModel, columns),
        filter: request.filterModel
      })
    });
    if (!response.ok) throw new Error(`The people service answered ${response.status}`);

    const body = await response.json();
    return { rows: body.rows, rowCount: body.rowCount };
  }
};

const grid = createDataGrid<Person>({
  columns, data: [], getRowId,
  rowModel: 'server',
  features: [
    sorting(), filtering(),
    virtualization({ rowHeight: 40, overscan: 6 }),
    serverRowModel(source, {
      mode: 'infinite',
      blockSize: 100,
      // Drawn while a block is on its way. Infinite mode will not build
      // without it, because getRowId has to name a row that has not arrived.
      // A negative id cannot collide with a real one.
      placeholder: (index) => ({ ...blankPerson, id: -1 - index })
    })
  ]
});

// And the server half, a SvelteKit endpoint. rowCount is the size of the
// whole result rather than of the slice: it is what lets the grid size its
// scrollbar for 5,000 rows while holding a hundred.
export const POST: RequestHandler = async ({ request }) => {
  const { startRow = 0, endRow = 100, sort, filter } = await request.json();
  const matched = applyQuery(rows, filter, sort);
  return json({ rows: matched.slice(startRow, endRow), rowCount: matched.length });
};

serverRowModel(source, { mode: 'paged' });   // the default

const paged = createDataGrid<Order>({
  columns, data: [], getRowId, rowModel: 'server',
  features: [
    sorting(),
    pagination({ pageSize: 8 }),
    serverRowModel(source, { mode: 'paged' })
  ]
});

const infinite = createDataGrid<Order>({
  columns, data: [], getRowId, rowModel: 'server',
  features: [
    sorting(),
    virtualization({ rowHeight: 40 }),
    serverRowModel(source, {
      mode: 'infinite',
      blockSize: 100,
      maxBlocks: 8,
      placeholder: (index) => ({ id: `pending-${index}` })
    })
  ]
});

// pagination() and virtualization() both decide which rows are in the
// window, so the grid takes one or the other and throws on a pair.

serverRowModel(source, {
  placeholder,
  onError: (error, request) =>
    report(error, { startRow: request.startRow, endRow: request.endRow })
});

const model = getServerRowModel(grid)!;

model.error;      // the message, or null
model.loading;
model.answered;   // false until the first block comes back
model.rowCount;   // the total, once a source has reported one
model.refresh();  // throw away every block and ask again

grid.status;      // { loading, error, onRetry } for the body to read

const model = getServerRowModel(grid)!;

const everything = await model.fetchAll({
  // 5000 by default, and deliberately independent of the page size the
  // reader is browsing at: a 25-row page over 50,000 rows would otherwise
  // mean two thousand round trips.
  batchSize: 500,
  onProgress: (loaded, total) => {
    done = loaded;
    expected = total;
  }
});

everything.length;   // 5000

await grid.api.fetchAllServerRows?.({ batchSize: 500 });

// It walks the source in batches. Nothing is added to the grid: you get the
// array, and what you do with it is yours.