mates-grid
mates-grid
Cell Rendering
Cells are text by default. Supply cellRenderer as a template function — (params) => html`…` — not a component. Use valueFormatter for display strings and cellClass / cellStyle for chrome.
Pills and custom templates
statusRenderer returns a mates html template. Amount shows both the formatted string and the raw number.
Name
Status
Amount
Notes
Ada Lovelace
Active
$20
(20)
Needs review
Grace Hopper
Pending
$57
(57)
ok
Linus Torvalds
Churned
$94
(94)
ok
Margaret Hamilton
Active
$131
(131)
ok
Dennis Ritchie
Pending
$168
(168)
ok
Barbara Liskov
Churned
$205
(205)
Needs review
Alan Turing
Active
$242
(242)
ok
Katherine Johnson
Pending
$279
(279)
ok
Donald Knuth
Churned
$316
(316)
ok
Radia Perlman
Active
$353
(353)
ok
Ken Thompson
Pending
$390
(390)
Needs review
Frances Allen
Churned
$427
(427)
ok
Ada Lovelace
Active
$464
(464)
ok
Grace Hopper
Pending
$21
(21)
ok
Linus Torvalds
Churned
$58
(58)
ok
Margaret Hamilton
Active
$95
(95)
Needs review
Dennis Ritchie
Pending
$132
(132)
ok
Barbara Liskov
Churned
$169
(169)
ok
{
field: "status",
cellRenderer: ({ value }) => html`<span class="pill">${value}</span>`,
}