According to this example: https://handsontable.com/docs/binding-to-data/#array-of-objects-with-column-as-a-function
HOT will create missing properties on demand, however I'm not seeing this behavior.
HOT version is 11.1.0
Here's the raw data:
let hotData2temp = [
[40109, "question1", 1, "a1", "a2", "a3"],
[40110, "question2", 1, "a3", "a4", "a5"],
[41764, "question3", 2, "jjj", "jjj", "jjj"],
[41765, "question4", 1, "jj", "jj", "jj", "jj"]
];
And here are the column headers:
const mcColumnHeaders = ["Card ID","Question","Correct Answer","Answer 1","Answer 2","Answer 3","Answer 4"];
Component settings:
const hotSettings2 = {
data: hotData2temp,
licenseKey,
allowInsertRow: true,
id: 'hot2',
manualColumnResize: true,
manualRowResize: true,
contextMenu: true,
colHeaders: mcColHeaders,
rowHeaders: true,
dropdownMenu: true,
filters: true,
width: 1050,
height: 200
};
However when this table gets rendered, the last column (for which the first 3 rows don't have data specified), isn't show initially. If I then manually add a column, the column gets added with the data for row 4 already populated. So the component does have the data, it just isn't showing it upon the initial rendering.
Screencast of the behavior https://d.pr/i/V34kff
This is one of the possible options for getting all of the data rendered at the beginning.
let hotData2temp = [
[40109, "question1", 1, "a1", "a2", "a3", ''],
[40110, "question2", 1, "a3", "a4", "a5", ''],
[41764, "question3", 2, "jjj", "jjj", "jjj", ''],
[41765, "question4", 1, "jj", "jj", "jj", "jj"]
];
You need to create empty, let's say, holders for the rows that don't have any data, and then everything is rendered correctly. That's what adding a column manually does underneath.