mates-grid
Selection
Multiple row selection, shift ranges, and cell ranges when cellSelection is on. Selected ids live on grid.selectedIds. There is no built-in checkbox column — render your own via cellRenderer if you need one.
Rows and cell ranges
Click a row to select. Shift-click a range. Drag across cells when cellSelection is enabled. Ctrl/Cmd+C copies TSV.
Name
Region
Status
Year
Amount
Qty
Joined
Ada Lovelace
EMEA
Active
2022
$20
1
2024-01-01
Grace Hopper
APAC
Pending
2023
$57
2
2024-02-02
Linus Torvalds
Americas
Churned
2024
$94
3
2024-03-03
Margaret Hamilton
EMEA
Active
2022
$131
4
2024-04-04
Dennis Ritchie
APAC
Pending
2023
$168
5
2024-05-05
Barbara Liskov
Americas
Churned
2024
$205
6
2024-06-06
Alan Turing
EMEA
Active
2022
$242
7
2024-07-07
Katherine Johnson
APAC
Pending
2023
$279
8
2024-08-08
Donald Knuth
Americas
Churned
2024
$316
9
2024-09-09
Radia Perlman
EMEA
Active
2022
$353
1
2024-10-10
Ken Thompson
APAC
Pending
2023
$390
2
2024-11-11
Frances Allen
Americas
Churned
2024
$427
3
2024-12-12
Ada Lovelace
EMEA
Active
2022
$464
4
2024-01-13
Grace Hopper
APAC
Pending
2023
$21
5
2024-02-14
Linus Torvalds
Americas
Churned
2024
$58
6
2024-03-15
Margaret Hamilton
EMEA
Active
2022
$95
7
2024-04-16
Dennis Ritchie
APAC
Pending
2023
$132
8
2024-05-17
Barbara Liskov
Americas
Churned
2024
$169
9
2024-06-18
selected 0 · ids —
gridAtom({
columns,
data: people,
rowSelection: "multiple",
cellSelection: true,
getRowId: (row) => String(row.id),
});