Dynamic cell color in jspdf autoTable? - jspdf

Question

Is it possible to define the cell color with a nested property of the object mapped to the table ?
The JSON structure of the objects is :
objects: [
{
"agent": "agent_1",
"days": {
day_0: {
"code": "ABC",
"color": "#0062cc"
},
day_1: {
"code": "DEF",
"color": "#a09494b2"
}
},
{
[...]
}
]
I have a table defined like this :
let columns = [
{title: "Agent", dataKey: "agent"},
{title: "january 1st", dataKey: "day_0"},
{title: "january 2nd", dataKey: "day_1"}]
let rows = [
{agent: "agent_1", day_0: "ABC", day_1: "DEF"},
[...]
]
All that works fine. But I'd like to set the color of each day cell dynamically, set with the color code of the corresponding object. Something like :
createdCell: function(cell, data) {
{
cell.styles.fillColor = "day_0.color";
}
}
But I can't figure how to pass the data to the table. Is it possible ? Can displayProperty help in any way ?

Answer 1

EDIT: In this case it was that v2.3.4 of jspdf-autotable was needed
Based on our comments discussion I think I understood your problem. You can try something like this (with the hexToRgb function from here)
let columns = [{
title: "Agent",
dataKey: "agent"
},
{
title: "january 1st",
dataKey: "day_0"
},
{
title: "january 2nd",
dataKey: "day_1"
}
]
let objects = [{
agent: "agent_1",
day_0: {
"code": "ABC",
"color": "#00ff00"
},
day_1: {
"code": "DEF",
"color": "#ff0000"
}
// etc
}];
let doc = jsPDF()
doc.autoTable(columns, objects, {
createdCell: function(cell, data) {
let hex = cell.raw.color
if (hex) {
let rgb = hexToRgb(hex)
cell.styles.fillColor = rgb;
cell.text = cell.raw.code
}
}
});
doc.save('jhg.pdf')
function hexToRgb(hex) {
var bigint = parseInt(hex.replace('#', ''), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return [r, g, b];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.4/jspdf.plugin.autotable.js"></script>

Answer 2

I just leave the answer here just in case anyone needs it.
We can use the didParseCell hook.
doc.autoTable({
head: [[..., color]],
body: [[..., #ffffff], [..., #ff0000]], // pass hexa value to the cell
didParseCell: function (HookData) {
if (HookData.cell == undefined)
return;
// find cell taht contains the hexa value
// the change the fillColor property
// and set the cell value to empty
var color = HookData.cell.text[0];
if (color.match(/^#[a-fA-F0-9]{3}([a-fA-F0-9]{3})/g) != null) {
HookData.cell.styles.fillColor = hexToRgb(color);
HookData.cell.text = [];
}
}
});
Code to convert hexa to RGB:
hexToRgb(hex) {
var bigint = parseInt(hex.replace('#', ''), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return [r, g, b];
}
Package version:
jspdf : 2.5.1
jspdf-autotable :3.5.25