Sort Plugin

Use ZenGrid sorting through the public grid.sort API.

The sort plugin is installed automatically by Grid. Application code should use grid.sort.

Public API

sort-api.ts
grid.sort.toggle(1);
grid.sort.apply([{ column: 1, direction: 'asc' }]);
grid.sort.setState([{ column: 2, direction: 'desc' }]);
grid.sort.clear();


const state = grid.sort.getState();
const mode = grid.sort.getMode();
const icons = grid.sort.getIcons();

Column Setup

columns.ts
import type { ColumnDef } from '@zengrid/core';


const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80, sortable: true },
  { field: 'name', header: 'Name', width: 220, sortable: true },
  { field: 'status', header: 'Status', width: 140 },
];

Events

sort-events.ts
grid.on('sort:change', ({ sortState, previousSortState }) => {
  console.log({ sortState, previousSortState });
});


grid.on('header:sort:click', ({ columnIndex, nextDirection }) => {
  console.log(columnIndex, nextDirection);
});

Backend Mode

When dataMode: 'backend', sort state is delegated through onDataRequest.

backend-sort.ts
const grid = new Grid(container, {
  columns,
  rowCount: 100000,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  dataMode: 'backend',
  onDataRequest: async (request) => {
    const response = await fetch('/api/search', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request.query),
      signal: request.signal,
    });


    return response.json();
  },
});
ℹ Info

Flat aliases such as toggleSort() and clearSort() exist for compatibility, but new docs and app code should prefer grid.sort.