Sorting and Pagination

Both sorting and pagination use a strategy pattern and persist state in URL params by default.

Sorting

Default Behavior

Clicking a column header toggles sorting. The urlSortStrategy writes state to URL: ?sort=name:ASC or ?sort=name:DESC,email:ASC for multi-sort.

SortingStrategy Interface

interface SortingStrategy {
  get: (options: { url?: URL; sortingDefault?: ColumnSort[] }) => SortingState;
  set: (state: SortingState) => void;
}

Setting Default Sort

Pass initial sorting via tableOptions.state.sorting:

const { table, dataGrid } = useDataGrid({
  tableOptions: {
    columns: [...],
    state: {
      sorting: [{ id: 'createdAt', desc: true }],
    },
  },
  data: { data: items, count },
});

Pagination

Default Behavior

The urlPaginationStrategy reads/writes ?page=2&pageSize=10 in the URL. Default page size is 10.

PaginatedResult

Data must conform to:

interface PaginatedResult<T> {
  data: T[];
  count: number; // total row count (not just current page)
}

PaginationStrategy Interface

interface PaginationStrategy {
  get: (options: { url?: URL; default?: PaginationState }) => PaginationState;
  set: (state: PaginationState) => void;
}

Custom Default Page Size

const { table, dataGrid } = useDataGrid({
  tableOptions: {
    columns: [...],
    state: {
      pagination: { pageIndex: 0, pageSize: 25 },
    },
  },
  data: { data: items, count },
});

URL Format Summary

Feature	URL Param	Example
Sort	sort	?sort=name:ASC,email:DESC
Page	page	?page=3
Page size	pageSize	?pageSize=25
Filters	filters	?filters=status:active,name:Bob

All params are optional. Missing params fall back to defaults.