Table Fully Re-renders When Out of Tab

Tags: #<Tag:0x00007efc605b3c78> #<Tag:0x00007efc605b3a70>
#1

Hello. Im currently using handsontable in conjunction with bootstrap tabs. I have a tab for my main table and another for extra menus and additional options not related to the table. The tab for the table is always initially visible and I get no warnings

I have enabled a fixed height and the option renderAllRows to false to help with performance (I know renderAllRows is set to false by default but just in case)

    height: "550px",
    renderAllRows: false

My problem is that for larger tables that go higher than a 1000 rows, whenever I switch from the table tab, to the second tab mentioned before, the page temporarily freezes and I get the following error:

Handsontable rendered more than 1000 visible rows. Consider limiting the number of rendered rows by specifying the table height and/or turning off the “renderAllRows” option.

However, like I mentioned before, the renderAllRows option is already set to false as well as having a defined height. Could it be that the tabs cause the table to re-render fully whenever it gets hidden? What could I do to prevent this issue. Thank you for the help!

#2

Hi @eddysanoli

Thank you for contacting us. That’s correct, when you switch the tabs the tables are being re-rendered each time. You can additionally try with different settings for this option: https://handsontable.com/docs/react-data-grid/api/options/#viewportrowrenderingoffset It also may help with the performance.

Besides that you can find more performance tips here: https://handsontable.com/docs/react-data-grid/performance/

#3

Thank you so much @adrian.szymanski ! I will try these tips out and get back to you for anyone else that might have run into something similar.

Another suggestion I have seen on the internet is to manually reset the height when switching tabs, to prevent the table from seemingly rendering all rows at the same time. Would this be effective as well? I just found it confusing for my table to be ignoring my max height restrictions when out of sight

#4

Hey, quickly reporting back. So I tried the “viewportRowRenderingOffset” trick, as well as a couple of performance recomendations including setting row heights and removing some of my custom renderers, but still the same results. Seems like once outside view, the table renders all of the rows (about 4k) causing a slowdown.Can I cancel or pause re-renders when clicking outside?

This is my current configuration:

    // The number of rows that will render outside the regular viewport
    viewportRowRenderingOffset: 15,

    hiddenColumns: {
        columns: hiddenColumnIdxs,
        indicators: false,
        copyPasteEnabled: false,
    },

    // Avoid rendering all rows at once to improve performance
    height: "550px",
    renderAllRows: false,

    // Enable the column menu and filtering
    dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
    filters: true,

    // Be able to sort row data by clicking on the column headers
    columnSorting: true,

    // Menu when you right click on a cell
    contextMenu: [
        "undo",
        "redo",
        "---------",
        "copy",
        "cut"
    ],

    width: '100%',
    stretchH: 'all',
#5

Hi @eddysanoli

Can you please share your current implementation in some sandbox? It will be easier to find a solution this way.

#6

Hi @eddysanoli

Do we have any updates here?

#7

Hello! Sorry didnt have the time to respond, but will work in a sandbox today to show the error

#8

Hi @eddysanoli

Just a small reminder about the demo :wave:

#9