Hello, I have a big problem.
I have a very large amount of data, which can vary, but editing the data in the cells takes a long time, around 5 to 10 seconds, it even becomes unfeasible, does anyone have a solution to this problem?
Demo
Very slow to edit cells (without using formulas) - using Vue3
Thank you for contacting us.
There are few things that can be done to improve performance. First, make sure that you are using the latest version of Handsontable available. Current version is 14.5. Then you can take a few additional steps that are described here: https://handsontable.com/docs/react-data-grid/performance/
Also, if you are doing more operations programmatically you can check batch operation to improve the performance: https://handsontable.com/docs/react-data-grid/batch-operations/
Hi,
I’m already using the latest version, regarding the calculations, even without using any, there is still a performance problem, I’m not using any operations, just editing the “raw” cell
Based on the video recording I can see that you are using at least custom renderers or cells formatting. Can you please share your implementation in jsFiddle or StackBlitz?
Hi @adrian.szymanski and @aleksandra_budnik.
I can’t perform the demo, as it involves confidential data, I’ll post some screenshots, showing how the loading is done.
About the calculations:
is carried out in the backend, and this way I get the data return and update it again in the handsontable
Below is the code snippet of the “calculateMaster()” method, which is where the call to back actually makes:
async calculateMaster(distributionPanelDetailId) {
let vm = this;
let listColumns = {};
vm.hotSettings.columns.forEach((item) => {
listColumns[item.data] = null;
return { ...listColumns };
});
let i = 0;
let dataInsertAll = [];
let lineFullActiveInventory = null;
let lineFullExpectedInventory = null;
let lineFullKits = null;
let lineFull = {};
lineFullActiveInventory = vm.distributionPanelBkp.kitsDistributionLine
.filter(x => x.distributionPanelDetailId === DISTRIBUTION_PANEL_DETAIL_ID.INVENTORY)
.reduce((acc, x) => {
acc[x.nameToColumn] = x.quantityInInventoryInSO;
return acc;
}, {});
lineFullExpectedInventory = vm.distributionPanelBkp.kitsDistributionLine
.filter(x => x.distributionPanelDetailId === DISTRIBUTION_PANEL_DETAIL_ID.INFORME_MANUALY)
.reduce((acc, x) => {
acc[x.nameToColumn] = x.quantityInInventory;
return acc;
}, {});
lineFullKits = vm.distributionPanelBkp.kitsDistributionLine
.filter(x => x.distributionPanelDetailId === distributionPanelDetailId)
.reduce((acc, x) => {
acc[x.nameToColumn] = x.value;
return acc;
}, {});
let lineCurrent = vm.hotSettings.data.find(x => x.distributionPanelDetailId == distributionPanelDetailId);
lineCurrent.distributionPanelDetailKits = null;
lineFull = {
...lineCurrent,
kits: lineFullKits,
activeInventory: lineFullActiveInventory,
expectedInventory: lineFullExpectedInventory
}
dataInsertAll.push(lineFull);
await this.$axios
.post("/api/DistributionPanel/Calculate/" + this.$route.params.id, dataInsertAll)
.then((response) => {
response.data.forEach(item => {
let line = vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId);
if (line) {
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).quantifiedItems = item.quantifiedItems;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).activeQuantity = item.activeQuantity;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).predicted = item.predicted;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).percentage = item.percentage;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).technicalReserve = item.technicalReserve;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).total = item.total;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).additional = item.additional;
vm.hotSettings.data.find(x => x.distributionPanelDetailId == item.distributionPanelDetailId).finalTotal = item.finalTotal;
}
});
})
.catch((error) => {
// console.log(error.response.data);
// if (error.response.data) {
// Swal.fire(error.response.data);
// }
}).finally(() => {
});
},The best way to replicate an issue is a working demo. This way, we avoid asking for missing variables.
We never ask for actual datasets and recommend replacing data with dummy data like Handsontable.helper.createSpreadsheetData(row, columns).
If the code itself shouldn’t;t be shared in public (some companies also have those restrictions), we can communicate via email at support@handsontable.com and sign an NDA (Non-Disclosure Agreement). But before that we would need to confirm your Support and Maintenance plan status (also on email).