MultiSortPlugin

Multi-Sort Plugin for tbw-grid

Enables sorting by multiple columns at once—hold Shift and click additional column headers to build up a sort stack. Priority badges show the sort order, so users always know which column takes precedence.

Installation

import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';

Configuration Options

Option	Type	Default	Description
maxSortColumns	number	3	Maximum columns to sort by
showSortIndex	boolean	true	Show sort priority badges
initialSort	SortModel[]	-	Pre-configured sort order on load

Keyboard Shortcuts

Shortcut	Action
Click header	Sort by column (clears other sorts)
Shift + Click	Add column to multi-sort stack
Ctrl + Click	Toggle sort direction

Events

Event	Detail	Description
sort-change	{ sortModel: SortModel[] }	Fired when sort changes

Programmatic API

Method	Signature	Description
setSort	(sortModel: SortModel[]) => void	Set sort programmatically
getSortModel	() => SortModel[]	Get current sort model
clearSort	() => void	Clear all sorting
addSort	(field, direction) => void	Add a column to sort
removeSort	(field) => void	Remove a column from sort

Examples

Basic Multi-Column Sorting

import { queryGrid } from '@toolbox-web/grid';
import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name', sortable: true },
    { field: 'department', header: 'Department', sortable: true },
    { field: 'salary', header: 'Salary', type: 'number', sortable: true },
  ],
  plugins: [new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })],
};

grid.on('sort-change', ({ sortModel }) => {
  console.log('Active sorts:', sortModel);
});

Initial Sort Configuration

new MultiSortPlugin({
  initialSort: [
    { field: 'department', direction: 'asc' },
    { field: 'salary', direction: 'desc' },
  ],
})

See Also

• MultiSortConfig for all configuration options
• SortModel for the sort model structure

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Methods

getSortModel()

Get the current sort model.

getSortModel(): SortModel[]

Returns

SortModel[] - Copy of the current sort model

---

setSortModel()

Set the sort model programmatically.

setSortModel(model: SortModel[]): void

Parameters

Name	Type	Description
model	SortModel[]	New sort model to apply

---

clearSort()

Clear all sorting.

clearSort(): void

---

getSortIndex()

Get the sort index (1-based) for a specific field.

getSortIndex(field: string): number | undefined

Parameters

Name	Type	Description
field	string	Field to check

Returns

number | undefined - 1-based index or undefined if not sorted

---

getSortDirection()

Get the sort direction for a specific field.

getSortDirection(field: string): "desc" | "asc" | undefined

Parameters

Name	Type	Description
field	string	Field to check

Returns

"desc" | "asc" | undefined - Sort direction or undefined if not sorted

---