JavaScript
const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
data: [{
C0: 'A',
C1: 'v1',
C2: null,
C3: null,
C4: null,
C5: null,
C6: null,
C7: null,
C8: null,
C9: null,
C10: null,
C11: null,
C12: null,
C13: null
}, {
C0: 'B',
C1: 'v1',
C2: 'v1'
}, {
C0: 'C'
}, {
C0: 'D'
}, {
C0: 'E'
}, {
C0: 'F'
}, {
C0: 'G'
}, {
C0: 'H'
}, {
C0: 'I'
}, {
C0: 'J'
}, {
C0: 'K'
}, {
C0: 'L'
}, {
C0: 'M',
C10: 'v10'
}],
dataSchema: { C0: null, C1: null, C2: null, C3: null, C4: null, C5: null, C6: null, C7: null, C8: null, C9: null, C10: null, C11: null, C12: null, C13: null},
rowHeaders: true,
colHeaders: true,
columns: [{
data: 'C0',
title: 'C0',
renderer: 'text'
}, {
data: 'C1',
title: 'C1',
renderer: 'text'
}, {
data: 'C2',
title: 'C2',
renderer: 'text'
}, {
data: 'C3',
title: 'C3',
renderer: 'text'
}, {
data: 'C4',
title: 'C4',
renderer: 'text'
}, {
data: 'C5',
title: 'C5',
renderer: 'text'
}, {
data: 'C6',
title: 'C6',
renderer: 'text'
}, {
data: 'C7',
title: 'C7',
renderer: 'text'
}, {
data: 'C8',
title: 'C8',
renderer: 'text'
}, {
data: 'C9',
title: 'C9',
renderer: 'text'
}, {
data: 'C10',
title: 'C10',
renderer: 'text'
}, {
data: 'C11',
title: 'C11',
renderer: 'text'
}, {
data: 'C12',
title: 'C12',
renderer: 'text'
}, {
data: 'C13',
title: 'C13',
renderer: 'text'
}],
contextMenu: true,
comments: true,
cell: [{
row: 0,
col: 1,
comment: {
value: 'COM1'
}
},
{
row: 1,
col: 2,
comment: {
value: 'COM2'
}
},
{
row: 2,
col: 3,
comment: {
value: 'COM3'
}
},
{
row: 3,
...