multiSort

Whether Shift adds a column to the sort, or a grid sorts by one column at a time.

Type	boolean
Default	true
Live update (update())	No — read once, when the grid is made
Angular	the [multiSort] input
<dz-grid>	the multi-sort attribute
Declared in	packages/dom/src/settings.ts

What it does

By default a click on a header sorts by that column alone, and Shift+click (Shift+Enter from the keyboard) adds it after the others: by town, then by name. false keeps one sort only: Shift+click, Shift+Enter and a header part’s toggleSort(true) act as a plain click, replacing the sort.

It limits the user, not your code: a sort of several columns that the application sets itself (sort.set, a saved state) is kept. It is read once: update() refuses a change.

Example

TypeScript

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

type Shop = { id: string; town: string; name: string };

createGrid<Shop>(document.getElementById('shops')!, {
  rows: [{ id: 's1', town: 'Larkfield', name: 'The Copper Kettle' }],
  columns: [{ id: 'town', header: 'Town' }, { id: 'name', header: 'Shop' }],
  getRowId: (s) => s.id,
  messages: EN,
  multiSort: false,
});

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { EN } from '@dzgrid/dom/locales/en';

type Shop = { id: string; town: string; name: string };

@Component({
  selector: 'app-shops',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [multiSort]="false" />`,
})
export class Shops {
  readonly rows: Shop[] = [{ id: 's1', town: 'Larkfield', name: 'The Copper Kettle' }];
  readonly columns: DzgColumnOrGroup<Shop>[] = [{ id: 'town', header: 'Town' }, { id: 'name', header: 'Shop' }];
  readonly rowId = (s: Shop) => s.id;
  readonly messages = EN;
}

Web Component

<dz-grid multi-sort="false"></dz-grid>

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { EN } from '@dzgrid/dom/locales/en';

type Shop = { id: string; town: string; name: string };

const grid = document.querySelector<DzGridElement<Shop>>('dz-grid')!;
grid.columns = [{ id: 'town', header: 'Town' }, { id: 'name', header: 'Shop' }];
grid.getRowId = (s) => s.id;
grid.messages = EN;
grid.rows = [{ id: 's1', town: 'Larkfield', name: 'The Copper Kettle' }];

Live demo

Click Town, then Shift+click Shop: the sort is replaced, never added to.

See also

• Sort, filter, search.