[GH #4352] Split load data into the table

#1

Hi,
I have 2000 rows on the table, and when I try to apply a filter for them it seems to be very slow and also while loading the table, resizing also it seems to be slow.
Is there any good solution for this to be fixed? Or handsontable provides any mechanism to handle this case?

Please do help with this case?

#2

Hey @subashdbc

what features do you use besides filters? There’s one issue that mentions that once you use filters for larger data performance downgrades https://github.com/handsontable/handsontable/issues/4352 but maybe I’ll be able to help you speed this up a little.

#3

@aleksandra_budnik I use only cell setting the colors for the cells,

let listOfCells = [{"id":3042,"year":2019,"cells":"[{\"row\":0,\"col\":4}]","color":"rgba(237,251,11,1)"},{"id":3043,"year":2019,"cells":"[{\"row\":0,\"col\":4}]","color":"rgba(249,12,68,1)"},{"id":3044,"year":2019,"cells":"[{\"row\":1,\"col\":4},{\"row\":2,\"col\":4},{\"row\":3,\"col\":4},{\"row\":4,\"col\":4},{\"row\":5,\"col\":4},{\"row\":1,\"col\":4}]","color":"rgba(139,157,251,1)"},{"id":3045,"year":2019,"cells":"[{\"row\":1,\"col\":4},{\"row\":2,\"col\":4},{\"row\":3,\"col\":4},{\"row\":4,\"col\":4},{\"row\":5,\"col\":4},{\"row\":1,\"col\":4},{\"row\":1,\"col\":6},{\"row\":3,\"col\":6},{\"row\":3,\"col\":7},{\"row\":3,\"col\":8},{\"row\":1,\"col\":8}]","color":"rgba(14,249,235,1)"},{"id":3046,"year":2019,"cells":"[{\"row\":5,\"col\":6},{\"row\":5,\"col\":8},{\"row\":7,\"col\":6},{\"row\":7,\"col\":8}]","color":"rgba(249,12,68,1)"},{"id":3047,"year":2019,"cells":"[{\"row\":7,\"col\":7},{\"row\":6,\"col\":6},{\"row\":5,\"col\":7},{\"row\":6,\"col\":8}]","color":"rgba(237,251,11,1)"},{"id":3048,"year":2019,"cells":"[{\"row\":6,\"col\":7}]","color":"rgba(12,251,12,1)"},{"id":3049,"year":2019,"cells":"[{\"row\":6,\"col\":7}]","color":"rgba(40,12,251,1)"},{"id":4044,"year":2019,"cells":"[{\"row\":13,\"col\":7},{\"row\":12,\"col\":5},{\"row\":10,\"col\":5}]","color":"rgba(139,157,251,1)"},{"id":4045,"year":2019,"cells":"[{\"row\":1,\"col\":12}]","color":"rgba(237,251,11,1)"},{"id":4046,"year":2019,"cells":"[{\"row\":6,\"col\":12}]","color":"rgba(40,12,251,1)"},{"id":5045,"year":2019,"cells":"[{\"row\":1,\"col\":22},{\"row\":1,\"col\":22},{\"row\":1,\"col\":20},{\"row\":1,\"col\":18},{\"row\":1,\"col\":16},{\"row\":1,\"col\":14}]","color":"rgba(237,251,11,1)"},{"id":5046,"year":2019,"cells":"[{\"row\":5,\"col\":10}]","color":"rgba(139,157,251,1)"}]

self.tableInstance.updateSettings({
        cells: function (row, col) {
          let cellProperties = {}
          if (listOfCells && listOfCells.length) {
            for (let i = 0; i < listOfCells.length; i++) {
              let cellRefs = listOfCells[i].cells ? JSON.parse(listOfCells[i].cells) : []
              for (let j = 0; j < cellRefs.length; j++) {
                if (row === cellRefs[j].row && col === cellRefs[j].col) {
                  cellProperties.style = { id: 4, background: listOfCells[i].color, color: listOfCells[i].color ? self.setColorBasedOnBackColor(listOfCells[i].color) : '' }
                  cellProperties.renderer = self.colorsRenderer
                }
              }
            }
          }
          return cellProperties
        }
      })

so each time when they apply color, I used to add it as the new entry in the DB with rows and cols and apply colors for them

Is there anything that I do wrong here?

Please help me

#4

Can you share the logic for colorsRenderer ?

#5

@aleksandra_budnik Here is the method

   colorsRenderer (instance, td, row, col, prop, value, cellProperties) {
          Handsontable.renderers.TextRenderer.apply(this, arguments)
          td.style.color = cellProperties.style.color;
          td.style.background = '#CEC';
        
    	}
#6

@aleksandra_budnik Any idea you have to make the performance better?

#7

I would replace

cellProperties.renderer = self.colorsRenderer

with

cellProperties.className= "color"

and add the class based on the renderer

.handsontable .color { background:'#CEC' }
#8

Update: Demo v 8.3.0 http://jsfiddle.net/731o9rbp/ seems to remove the columns with the same speed for the table with and without filters.

I highly recommend updating the version of Handsontable.

#9