scroller plugin removes line breaks in columns

jsorger

Description of problem: I use Scroller since I'm loading a (relatively) large table. unfortunately Scroller seems to remove the ability to have line breaks in texts within columns.
(click on "measures by country" to expand the table)

Link to test case with scroller: https://csh.ac.at/covid19/cccsl_measure_graph/
Link to test case without scroller: https://csh.ac.at/covid19/without_scroller/

this is the table config:

    let table;
        $(document).ready( function () {
            table= $('#'+id).DataTable( {
                order: [[ascCol, sortOrder]],
                retrieve: true,
                paging: true,
                scrollY: yspace,
                scrollCollapse: true,
                scrollX: true,
                searching: search,
                select: true,
                autoHeight: true,
                autoWidth: true,
                scroller: {
                    loadingIndicator: true,
                    displayBuffer: 20,
                    rowHeight: 30
                },
            } );

kthorngren

IIRC the Scroller extension strives to have each row the same height so it can calculate where its at in the table. @allan or @colin can confirm this.

Have you tried deferRender with the non-scroller version? Maybe that will help with initial loading speed.

Kevin

jsorger

thank you for the fast response!

I tried dereferRender now - but unfortunately then I lose the faster table filtering that Scroller provides: when clicking on a node in the graph, the table is filtered and this filter (search) operation can cause significant slow-down in the non-scroller version.

another weird side effect of Scroller: the table headers are not linked to the column width and to x-scrolling when the table is loaded for the first time - however after filtering via the graph, the headers behave properly. do you have any idea what causes this?

kind regards,
Johannes

allan

IIRC the Scroller extension strives to have each row the same height so it can calculate where its at in the table. @allan or @colin can confirm this.

Spot on. Without that requirement, we’d need to calculate the height of every row in the table, which would mitigate (and more) any performance enhancements Scroller can offer.

the table headers are not linked to the column width and to x-scrolling when the table is loaded for the first time - however after filtering via the graph, the headers behave properly. do you have any idea what causes this?

Are you initialising the table hidden? If so, you need to call columns.adjust() once it is made visible.

Allan

jsorger

thank you @allan, columns.adjust() did the trick for properly displaying the table.

regarding the missing line breaks, that's a pity - I now try to limit the max width of the columns like this ...but without success unfortunately.

        autoWidth: false,
        columnDefs: [
            { width: "20%"}
        ]

kthorngren

Maybe using an ellipsis renderer will help:
https://datatables.net/manual/data/renderers#Custom-helpers

Kevin

jsorger

thank you @kthorngren, I followed the instruction but it did not change my column content. I will investigate more at a later date.