Search code examples
javascripttabulator

Tabulator list items disappear when scrolling; virtualDomBuffer issue?

Tabulator v3.5.3
Electron Desktop app (OSX & PC)

With 300+ items, Tabulator is exhibiting odd behavior; most serious is that items are disappearing. Other symptoms include the scroll "thumb" size and position becoming erratic and inconsistent (e.g thumb position not reflecting scroll position in overall list).

I'm wondering if I set the virtualDomBuffer too high or too low. The behavior is occurring when it is set to 300. Only 13-15 items will ever appear on-screen at once. I am setting the height of the Tabulator instance thus: height: "84vh". Is that a valid CSS value that Tabulator can handle?

I've tried setting virtualDomBuffer to 1000 but maybe that is the wrong way to handle this?

(I know there is a newer version of Tabulator but I am needing to support and existing app and don't want to introduce a big change unless I have to.

enter image description here - - - - enter image description here

Tabulator instance initialization

  eventList = $("#event-list");
        eventList.tabulator({
            height: "84vh",
            virtualDomBuffer: 300,
            layout: "fitColumns",
            resizableColumns: false,
            selectable: 1,
            responsiveLayout: "hide",
            placeholder: "No Events",
            columns: [
                {
                    title: "Events",
                    field: "startDate",
                    formatter: eventListRowFormatter,
                    variableHeight: true,
                    headerSort: false
                },
                { formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
            ],
            rowClick: function (e, row) {
                // prevent deselecting clicked row
                var selectedRows = eventList.tabulator("getSelectedRows");
                if (selectedRows.length == 0) {
                    eventList.tabulator("selectRow", row);
                } else if (isEventDirty == false) {
                    lastEventSelected = row;
                    setActiveEvent(row.row.data)
                } else {
                    eventList.tabulator("deselectRow");
                    eventList.tabulator("selectRow", lastEventSelected);
                }
            },
            rowDeselected: function (row) {
                if (isEventDirty == true) {
                    lastEventSelected = row;
                }
            },
            ajaxLoader: false
        });

Column formatter 

function eventListRowFormatter(cell) {
    var data = cell.cell.row.data

    if (data.eventTitle == "") {
        return " - " + "<br>" + "<small>" + data.startDate + "</small>"
    } else {

        return data.eventTitle + "<br>" + "<small>" + data.startDate + "</small>"
    }
}
Solution

  • There were some rendering glitches in version 3.5, i would suggest updating to the 4.1 release