Cell Renderers
Every column has a renderer (defaults to 'plain'). Three rendererOptions — transform, preRender, and postRender — let you customise any renderer without writing a custom one.
transform
Converts the raw cell value before it reaches the renderer. Receives the raw value and the full row object.
typescript
createColumn('salary', 'Salary', 'plain', {
rendererOptions: {
transform: (value) =>
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value),
},
})nullHandler
When the (possibly transformed) value is null or undefined, the cell falls back to this renderer instead. Useful to keep a column's type-specific formatting while gracefully handling missing data.
typescript
createColumn('salary', 'Salary', 'plain', {
rendererOptions: { nullHandler: 'null-empty' },
})preRender / postRender
Inject additional content to the left or right of the main cell value. When either is set the cell switches to a flex layout with three zones: pre · content · post. Return a plain HTML string or a RenderableValue for Vue components.
typescript
createColumn('name', 'Name', 'plain', {
rendererOptions: {
preRender: (_value, row) =>
`<span style="width:8px;height:8px;border-radius:50%;background:${row.active ? 'green' : '#aaa'}"></span>`,
},
})typescript
createColumn('score', 'Score', 'plain', {
rendererOptions: {
transform: (value) => `${(value * 100).toFixed(1)} %`,
postRender: (value) =>
`<span style="width:${(value * 60).toFixed(0)}px;height:6px;background:#4caf50"></span>`,
},
})Live demo
Alice Johnson
Engineering
$75,000
92.3 %
Mar 15, 2020
✓
Bob Smith
Marketing
45.6 %
Jul 22, 2019
✗
Carol White
Engineering
$92,000
78.9 %
Nov 1, 2021
✓
David Brown
Sales
$68,000
May 30, 2022
✓
Eve Davis
HR
$58,000
61.1 %
Jan 10, 2023
✗
Frank Miller
Engineering
$88,000
84.1 %
Jun 3, 2018
✓
Grace Lee
Design
$71,000
73.2 %
Mar 22, 2021
✓
Henry Wilson
Sales
29.8 %
Sep 14, 2020
✗
Iris Chen
Engineering
$105,000
96.7 %
Jan 30, 2017
✓
James Taylor
Marketing
$63,000
Nov 7, 2022
✓
Karen Martinez
HR
$55,000
54.4 %
Apr 18, 2023
✓
Leo Anderson
Design
$78,000
81.2 %
Dec 1, 2019
✗
Mia Thomas
Engineering
$97,000
88.8 %
Aug 25, 2016
✓
Nathan Jackson
Sales
$72,000
50.3 %
Jul 9, 2021
✓
Olivia Harris
Marketing
67.1 %
Feb 14, 2020
✗
Paul Robinson
HR
$61,000
Aug 30, 2022
✓
Quinn Walker
Engineering
$83,000
75.9 %
Nov 11, 2018
✓
Rachel Hall
Design
$69,000
62.7 %
Jun 5, 2023
✓
Steve Young
Sales
$74,000
44.1 %
Apr 27, 2019
✗
Tina Allen
Engineering
$91,000
90.5 %
Oct 19, 2015
✓
Alice Johnson
Engineering
$75,000
92.3 %
Mar 15, 2020
✓
Bob Smith
Marketing
45.6 %
Jul 22, 2019
✗
Carol White
Engineering
$92,000
78.9 %
Nov 1, 2021
✓
David Brown
Sales
$68,000
May 30, 2022
✓
Eve Davis
HR
$58,000
61.1 %
Jan 10, 2023
✗
Frank Miller
Engineering
$88,000
84.1 %
Jun 3, 2018
✓
Grace Lee
Design
$71,000
73.2 %
Mar 22, 2021
✓
Henry Wilson
Sales
29.8 %
Sep 14, 2020
✗
Iris Chen
Engineering
$105,000
96.7 %
Jan 30, 2017
✓
James Taylor
Marketing
$63,000
Nov 7, 2022
✓
Karen Martinez
HR
$55,000
54.4 %
Apr 18, 2023
✓
Leo Anderson
Design
$78,000
81.2 %
Dec 1, 2019
✗
Mia Thomas
Engineering
$97,000
88.8 %
Aug 25, 2016
✓
Nathan Jackson
Sales
$72,000
50.3 %
Jul 9, 2021
✓
Olivia Harris
Marketing
67.1 %
Feb 14, 2020
✗
Paul Robinson
HR
$61,000
Aug 30, 2022
✓
Quinn Walker
Engineering
$83,000
75.9 %
Nov 11, 2018
✓
Rachel Hall
Design
$69,000
62.7 %
Jun 5, 2023
✓
Steve Young
Sales
$74,000
44.1 %
Apr 27, 2019
✗
Tina Allen
Engineering
$91,000
90.5 %
Oct 19, 2015
✓
Alice Johnson
Engineering
$75,000
92.3 %
Mar 15, 2020
✓
Bob Smith
Marketing
45.6 %
Jul 22, 2019
✗
Carol White
Engineering
$92,000
78.9 %
Nov 1, 2021
✓
David Brown
Sales
$68,000
May 30, 2022
✓
Eve Davis
HR
$58,000
61.1 %
Jan 10, 2023
✗
Frank Miller
Engineering
$88,000
84.1 %
Jun 3, 2018
✓
Grace Lee
Design
$71,000
73.2 %
Mar 22, 2021
✓
Henry Wilson
Sales
29.8 %
Sep 14, 2020
✗
Iris Chen
Engineering
$105,000
96.7 %
Jan 30, 2017
✓
James Taylor
Marketing
$63,000
Nov 7, 2022
✓
Karen Martinez
HR
$55,000
54.4 %
Apr 18, 2023
✓
Leo Anderson
Design
$78,000
81.2 %
Dec 1, 2019
✗
Mia Thomas
Engineering
$97,000
88.8 %
Aug 25, 2016
✓
Nathan Jackson
Sales
$72,000
50.3 %
Jul 9, 2021
✓
Olivia Harris
Marketing
67.1 %
Feb 14, 2020
✗
Paul Robinson
HR
$61,000
Aug 30, 2022
✓
Quinn Walker
Engineering
$83,000
75.9 %
Nov 11, 2018
✓
Rachel Hall
Design
$69,000
62.7 %
Jun 5, 2023
✓
Steve Young
Sales
$74,000
44.1 %
Apr 27, 2019
✗
Tina Allen
Engineering
$91,000
90.5 %
Oct 19, 2015
✓