Tabulator: Greater than 300 datas, need 3s+ to render

[yaxino]

hi oli,

when i load > 300 datas ,then call my obj.render(). it took more than 3 seconds, and Loading all the time.

How can i reduce render time, or wait time ?(in v2.*) thanks.

code :

obj.render = function () {
            $(obj.selector).append('<div class="tabulator"></div>');
            $(obj.selector + ' .tabulator').tabulator({ 
                height: $(obj.selector).height() + 'px',
                fitColumns: true,
                movableCols: true, 
                columns: obj.columns
            });

            $(obj.selector + ' .tabulator').tabulator('setData', tableData);

        }

[yaxino]

this is colum define:

var columns = [
            {
                title: "ID", field: "RequestSN", width: 120, formatter: function (value, data) {
                    var curr_user = g_s.user.FirstName + ' ' + g_s.user.LastName
                    if (getName(data.Checkers).indexOf(curr_user) >= 0) {
                        return "<a href='/pipeline/approve/?formid=" + data.ID + "'>" + value + "</div>";
                    }
                    else {
                        return "<a href='/pipeline/view/?formid=" + data.ID + "'>" + value + "</div>";
                    }
                }
            },
            {
                title: "Title", field: "Title", width: 200, visible: hasColumn(tabid, 'Title')
            },
            {
                title: "Submit Date", field: "ApplyDate", width: '150px', visible: hasColumn(tabid, 'ApplyDate'), formatter: function (value, data) {
                    return "<div>" + Utility.convert.toDate(value) + "</div>";
                }
            },
             {
                 title: "Domain", field: "Domain", width: '100px', visible: hasColumn(tabid, 'Domain')
             },
             {
                 title: "Lead Tower", field: "LeadTower", width: '150px', visible: hasColumn(tabid, 'LeadTower')
             },
            {
                title: "Status", field: "FormState", width: '150px', visible: hasColumn(tabid, 'FormState'), formatter: function (value, data) {
                    function phaseColorClass(currstepid) {
                        if (machArr(phaseConfig.ConceptPhase, currstepid)) {
                            return 'label-warning';
                        }
                        if (machArr(phaseConfig.SolutionPhase, currstepid)) {
                            return 'label-pink';
                        }
                        if (machArr(phaseConfig.ExecutionPhase, currstepid)) {
                            return 'label-success';
                        }
                        if (machArr(phaseConfig.ClosePhase, currstepid)) {
                            return 'label-inverse';
                        }

                    }
                    if (value == 'Reject') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">Reject</span></div>';
                    }
                    if (value == 'Pending Submission') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">Pending Submission</span></div>';
                    }
                    if (value == 'Waiting for Approval') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">Waiting for Approval</span></div>';
                    }
                    if (value == 'PMO Verification') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">PMO Verification</span></div>';
                    }
                    if (value == 'Approved') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">Approved</span></div>';
                    }
                    if (value == 'Closed') {
                        value = '<div><span class="label ' + phaseColorClass(data.CurrentStepID) + '">Closed</span></div>';
                    }

                    return value == '' ? '<div>TBD</div>' : value;
                }
            },
            {
                title: "Owner", field: "Approvers", width: '150px', visible: hasColumn(tabid, 'Checkers'), formatter: function (value, data) {

                    var reassign = (machArr(g_s.user.RoleIDs, 1) && data.CurrentStepID != 0) ? '<button type="button" data-id="' + data.ID + '" class="btn btn-bold btn-minier reassign-user" title="Re-assign User"><i class="ace-icon fa fa-users"></i></button> ' : '';
                    return "<div>" + reassign + '<span>' + getName(value) + "</span></div>";
                }
            },
            {
                title: "Tower Lead", field: "TowerLead", width: '150px', visible: hasColumn(tabid, 'TowerLead')
            },
{
    title: "Project Lead", field: "ProjectLead", width: '150px', visible: hasColumn(tabid, 'ProjectLead')
},
            {
                title: "Priority", field: "Priority", width: '100px', visible: hasColumn(tabid, 'Priority')
            },
            {
                title: "Last Modified", field: "ApprovedDate", width: '150px', visible: hasColumn(tabid, 'ApprovedDate'), formatter: function (value, data) {
                    return "<div>" + Utility.convert.toDate(value) + "</div>";
                }
            }
        ];

[tomheaps]

If you update to latest version 3.2 and set a height for the table that is less than its actual height, the table should render very fast as a virtual DOM. See http://olifolkerd.github.io/tabulator/examples/3.2/ for more information.

[olifolkerd]

@tomheaps is bang on there, 3.2 now has a virtual DOM that renders much faster!