mates-grid
Sorting
Click a leaf header to cycle sort. Hold Shift or Ctrl/Cmd to add a second key. The current model lives on grid.sortModel.
Default sort by amount
The demo starts sorted descending. Multi-sort shows priority badges in the header.
Name
Region
Status
Year
Amount
Qty
Joined
Linus Torvalds
Americas
Churned
2024
$466
3
2024-03-12
Grace Hopper
APAC
Pending
2023
$465
8
2024-02-26
Ada Lovelace
EMEA
Active
2022
$464
4
2024-01-13
Grace Hopper
APAC
Pending
2023
$429
2
2024-02-11
Ada Lovelace
EMEA
Active
2022
$428
7
2024-01-25
Frances Allen
Americas
Churned
2024
$427
3
2024-12-12
Ada Lovelace
EMEA
Active
2022
$392
1
2024-01-10
Frances Allen
Americas
Churned
2024
$391
6
2024-12-24
Ken Thompson
APAC
Pending
2023
$390
2
2024-11-11
Frances Allen
Americas
Churned
2024
$355
9
2024-12-09
Ken Thompson
APAC
Pending
2023
$354
5
2024-11-23
Radia Perlman
EMEA
Active
2022
$353
1
2024-10-10
Frances Allen
Americas
Churned
2024
$319
3
2024-12-21
Ken Thompson
APAC
Pending
2023
$318
8
2024-11-08
Radia Perlman
EMEA
Active
2022
$317
4
2024-10-22
Donald Knuth
Americas
Churned
2024
$316
9
2024-09-09
Ken Thompson
APAC
Pending
2023
$282
2
2024-11-20
Radia Perlman
EMEA
Active
2022
$281
7
2024-10-07
sort amount desc
gridAtom({
columns,
data: people,
sortModel: [{ colId: "amount", sort: "desc" }],
});
// later:
grid.sortModel.set([{ colId: "name", sort: "asc" }]);