let data = [
[
"Sandeep",
"Anil",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Sandeep",
"Rodrigues",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"50",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Ganesh",
"Yadav",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Ravi",
"Lal",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Suraj",
"Riona",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Sudeep",
"Avil",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Sushma",
"Ancita",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Karis",
"Dsilva",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
[
"Viera",
"Riona",
"Done",
"Done",
"Done",
"Done",
"Done",
"Done",
"80",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
"Not Started",
],
];
this.container = this.hotContainer.nativeElement;
this.hotInstance = new Handsontable(this.container, {
data: data,
colWidths: [
200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200,
200, 200,
],
hiddenColumns: {
columns: [4, 5, 7, 8, 12, 13, 15, 16],
indicators: false,
},
colHeaders: true,
rowHeaders: false,
mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 1 }],
fixedRowsTop: 3,
height: 400,
readOnly: true, // ๐ make all cells read-only!
cells(row, col) {
const cellProperties: Partial<Handsontable.CellProperties> = {};
const cellValue = data?.[row]?.[col];
if (col > 1) {
if (cellValue === "Done" || cellValue === "100") {
cellProperties.className = "done-cell";
} else if (cellValue === "Not Started") {
cellProperties.className = "wip-cell";
} else {
cellProperties.className = "partial-cell";
}
}
return cellProperties;
},
nestedHeaders: [
[
{ label: "Year", colspan: 2 },
{ label: "Jan โ Feb", colspan: 3 },
{ label: "March", colspan: 3 },
{ label: "April", colspan: 2 },
{ label: "May โ Jun", colspan: 3 },
{ label: "July", colspan: 3 },
],
[
{ label: "Section", colspan: 2 },
{ label: "Plan", colspan: 3 },
{ label: "Target", colspan: 3 },
{ label: "Thinking", colspan: 2 },
{ label: "Dancing", colspan: 3 },
{ label: "Sleeping", colspan: 3 },
],
[
{ label: "Task", colspan: 2 },
"Design phase completed", // 3 words
"Quality assured", // 2 words
"Performance testing passed", // 3 words
"Firmware settings configured settings configured", // 3 words
"Component sourcing completed settings configured", // 4 words
"Functional testing approved settings configured", // 4 words
"Thermal profile verified settings configured", // 4 words
"System tests validated settings configured settings configured", // 7 words
"Shipping plan finalized settings configured", // 3 words
"Packaging and branding designed settings configured", // 4 words
"Marketing launch assets approved settings configured settings configured", // 5 words
"Software tested and optimized", // 5 words
"Performance targets achieved settings configured settings configured", // 5 words
"All launch issues resolved settings configured settings configured" // 5 words
],
],
collapsibleColumns: [
{ row: -3, col: 2, collapsible: true },
{ row: -3, col: 5, collapsible: true },
{ row: -3, col: 8, collapsible: true },
{ row: -3, col: 10, collapsible: true },
{ row: -3, col: 13, collapsible: true },
],
licenseKey: 'non-commercial-and-evaluation',
});
const collapsiblePlugin = this.hotInstance.getPlugin("collapsibleColumns");
collapsiblePlugin.collapseAll();
collapsiblePlugin.expandSection({ row: -3, col: 8 });
Hereโs Aleksandra from the Support team.
I saw that you posted the same question tat support@handsontable.com and I replied there.
Please continue the conversation on email to avoid subject duplication.