tabulator: Does not render all rows

Hi Oli 3.0 from today.

Chrome. My standard test

    $('#tabulatortestJournal').tabulator({
        height: "600px",
        fitcolumns: false,
        columns: [
            { title: "Rownum", field: "JourID", formatter:"rownum" },
            { title: "JourID", field: "JourID" },
            { title: "JourTime", field: "JourTime" },
            { title: "Zust1", field: "Zust1" },
            { title: "Dokname", field: "Dokname" },
            { title: "Doktype", field: "Doktype" },
            { title: "JourInhaltTextOnly", field: "JourInhaltTextOnly", formatter: "textarea", width:350},
        ],
        ajaxURL: daUrl,
        ajaxConfig: "GET"
    })

JourInhaltTextOnly large text < 8000 chars as always even with only 200 rows does not render all rows, and choppy. stops rendering somewhere between 160 and 200. When scrolling all variants with pgDn, scrollbar cursor, scrollbar button Ctrl End.

Same problem behaviour. with virtualDom: false

Cheers Michael

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 29 (15 by maintainers)

Most upvoted comments

Hey @michaelongithub,

Just to let you know i have been taking a deeper dive into rendering performance for a patch update this weekend.

Have a play with the rendering_performance_improvements branch, you should find it much more responsive even on IE.

I have also added some options to speed up rendering on larger tables.

The resizableColumns option can now be set to “header” to render column resize handles in just the column headers instead of cells, which offers considerable render time improvements on tables with a lot of columns.

$("#example-table").tabulator({
    resizableColumns:"header",
});

I have also added the virtualDomBuffer to allow you to manually set size of the rendering buffer in pixels. The buffer is the amount of extra rows that are rendered beyond the start and end of the table to allow for smooth scrolling without any visible rendering. By default it automatically sets to be the same size as the table height, on large (fullscreen) tables with a lot of columns or intensive formatters this can cause a burden for the re-render of the rows in the DOM as they move so this options lets you manually set a smaller size if needed.

$("#example-table").tabulator({
    virtualDomBuffer:50, //set virtual DOM buffer to 50 px
});

Any feedback you have would be great!

Cheers

Oli 😃

olifolkerd on Jul 6, 2017