Hi, I am using the non-commercial version of Handsontable with SvelteKit. Everything works super smooth when my data size is relatively small (up to 500 rows, 15 columns). But if the number of rows goes into thousands, the performance takes a hit.
I have tried all the optimisations suggested in the docs and more (reducing pre-rendering, removing auto resizing, removing sorting, cell editing, loading rows in view only mode) but can’t seem to make it work.
It’s clearly an issue in my codebase because this example with 50,000 rows and 35 columns seems to run just fine.
How can I optimise this configuration? bigDataView is a boolean flag that is true when the number of rows > 500.
hot = new Handsontable(container, {
data: dataRows,
height: 'auto',
colHeaders: true,
dropdownMenu: bigDataView ? ['filter_by_condition', 'filter_operators', 'filter_by_value', 'filter_action_bar'] : true,
hiddenColumns: {
indicators: true,
},
contextMenu: bigDataView ? [] : ['cut', 'copy', '---------', 'undo', 'redo', '---------', 'mergeCells', 'row_above', 'row_below', 'col_left', 'col_right'],
multiColumnSorting: bigDataView ? false : true,
afterColumnSort() {
if (hot && !bigDataView) {
// after each sorting, take header row and change its index to 0
hot.rowIndexMapper.moveIndexes(hot.toVisualRow(0), 0);
}
},
cells(row) {
if (row === 0 && !bigDataView) {
return {
type: 'text',
className: 'htCenter',
readOnly: $viewOnlyMode,
};
}
return bigDataView ? { type: 'text', readOnly: true } : { readOnly: $viewOnlyMode };
},
fixedRowsTop: 1,
filters: true,
afterFilter() {
if (hot) {
const filtersPlugin = hot.getPlugin('filters');
const filtersRowsMap = filtersPlugin?.filtersRowsMap;
filtersRowsMap.setValueAtIndex(0, false);
}
},
rowHeaders: true,
colWidths: bigDataView ? getColumnWidth() : '100',
viewportRowRenderingOffset: bigDataView ? 10 : 'auto',
autoWrapCol: true,
autoWrapRow: true,
autoRowSize: bigDataView ? false : true,
autoColumnSize: bigDataView ? false : true,
allowInsertColumn: bigDataView ? false : true,
allowInsertRow: bigDataView ? false : true,
manualColumnMove: bigDataView ? false : true,
manualRowMove: bigDataView ? false : true,
manualColumnResize: bigDataView ? false : true,
manualRowResize: bigDataView ? false : true,
mergeCells: bigDataView ? false : true,
persistentState: false,
stretchH: bigDataView ? 'none' : 'all',
search: bigDataView ? false : true,
selectionMode: bigDataView ? 'single' : 'multiple',
formulas: bigDataView ? undefined : { engine: hyperformulaInstance, sheetName: 'Sheet1' },
licenseKey: "non-commercial-and-evaluation",
});