I tried setting rowHeaders: false, but the table alignment is broken when I scroll horizontally. The issue seems to occur only when row headers are disabled. When rowHeaders: true is set, the table works as expected.
Here’s the relevant Handsontable configuration I am using:
config.hotInstance = new Handsontable(container, {
colHeaders: [
“SETTIMANA”, “DATA”, “PESO A DIGIUNO [kg]”, “ACQUA [l]”, “SALE [g]”, “KCAL [kcal]”,
“CARB [g]”, “PRO [g]”, “FAT [g]”, “PASTI LIBERI [clicca se SI]”, “PASSI”,
“SEDUTA ALLENAMENTO [indicare NOME seduta]”, “CARDIO [selezionare tipo]”,
“VOGLIA ALLENARTI [scala 1-10]”, “ENERGIE ALLENAMENTO [scala 1-10]”,
“PERFORMANCE [scala 1-10]”, “STANCHEZZA [scala 1-10]”, “FAME [scala 1-10]”,
“STRESS [scala 1-10]”, “ORE SONNO [scala 1-10]”, “QUALITÀ SONNO [scala 1-10]”,
“ADERENZA ALLENAMENTO [scala 1-10]”, “ADERENZA DIETA [scala 1-10]”, “COMUNICAZIONI”
],
hiddenColumns: {
columns: , // Indices of columns to hide initially
indicators: true // Show indicators UI for hidden columns
},
data: tableData,
height: 500,
manualRowMove: true,
bindRowsWithHeaders: ‘strict’,
rowHeaders: false, // Issue happens when rowHeaders are set to false
contextMenu: false,
filters: false,
dropdownMenu: false,
licenseKey: ‘non-commercial-and-evaluation’,
fixedRowsTop: 0,
mergeCells: config.mergeCells,
stretchH: ‘all’,
manualColumnResize: false,
manualRowResize: false,
columnSorting: false,
rowHeights: 30,
renderAllRows: true,
renderAllColumns: true, // <— added this
fixedColumnsLeft: 2,
autoRowSize: true,
autoColumnSize: true,
columns: [
{width: 100}, // SETTIMANA
{type: ‘text’, width: 130}, // DATA
{type: ‘numeric’, allowInvalid: false, width: 170}, // PESO A DIGIUNO
{type: ‘numeric’, allowInvalid: false, width: 90}, // ACQUA
{type: ‘numeric’, allowInvalid: false, width: 80}, // SALE
{type: ‘numeric’, allowInvalid: false, width: 90}, // KCAL
{type: ‘numeric’, allowInvalid: false, width: 80}, // CARB
{type: ‘numeric’, allowInvalid: false, width: 80}, // PRO
{type: ‘numeric’, allowInvalid: false, width: 80}, // FAT
{
type: ‘checkbox’,
className: ‘htCenter’,
checkedTemplate: ‘1’,
uncheckedTemplate: ‘0’,
width: 220
},
{type: ‘numeric’, allowInvalid: false, width: 70}, // PASSI
{type: ‘text’, width: 345}, // SEDUTA ALLENAMENTO
{
type: ‘dropdown’,
source: [“LISS”, “MISS”, “HIIT”, “SPOT REDUCING”, “MIX”],
strict: true,
allowInvalid: false,
width: 190
},
// Colonne scala 1-10
…scaleColumns.map((col, index) => ({
type: ‘dropdown’,
source: [“1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “10”],
strict: true,
allowInvalid: false,
width: [250, 270, 220, 210, 160, 170, 195, 210, 300, 215][index] // distribuisci le larghezze fisse qui
})),
{
type: ‘text’,
renderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.minWidth = ‘150px’; // oppure 200px se preferisci
td.style.whiteSpace = ‘pre-wrap’; // così il testo va a capo se troppo lungo
td.style.maxWidth = ‘300px’;
}
} //COMUNICAZIONI
],
afterGetColHeader: function(col, TH) {
if (col === 0 || col === 1) {
TH.classList.add(‘week-number-header’);
}
},
cells: function (row, col, prop) {
const cellProps = {};
const rowData = this.instance.getDataAtRow(row);
const cellValue = rowData ? rowData[col] : null;
// Settimana (colonna 0)
if (col === 0) {
cellProps.className = 'week-number-cell';
cellProps.readOnly = true;
}
if (col === 1) {
cellProps.readOnly = true;
const rowLabel = rowData ? rowData[1] : null;
const isSpecialRow = rowLabel === "MEDIA" || rowLabel === "MEDIA MANUALE" || rowLabel === "DIFFERENZA";
if (!isSpecialRow) {
cellProps.className = (cellProps.className || '') + ' date-cell';
}
}
return cellProps;
}
});
