Search code examples
tabulator

Tabulator total Rows count (Column Calculations) gets exported as well


I am using this approach to show the total rows in a table:

var tabulator_table = new Tabulator("#example", {

                        columns: [

                            { title: "name", field: "name", bottomCalc: "count", headerFilter: "input" },
                            { title: "Type", field: "Type", bottomCalc: "count", headerFilter: "input" },
                        ],
                        dataFiltered: function (filters, rows) {
                            var el = document.getElementById("search_count");
                            el.innerHTML = rows.length;
                        },
                        dataLoad: function (data) {
                            var el = document.getElementById("total_count");
                            el.innerHTML = data.length;
                        },
                    });
  var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
                    $("#total_count").text(total_count);


$(".tabulator-footer").append("<span class='search_count' id='search_count'></span> Of<span class='search_result'>Total Productions: <span class='total_count'></span></span>")

                    var totalsearch = $("#total_count").text();
                    var resultsearch = $("#search_count").text();
                    $(".total_count").text(totalsearch)
                    $(".search_count").text(totalsearch);
//This CSS will hide the footer:
   .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
                    display: none;
                }

This works good but there is one issue: when i hit export to excel, it exports the calculation row as well such as:

  • Name Type
  • john human
  • 1 1

How do I stop the count row (1 1) from being exported or is there other approach to show total rows. This is the export function:

document.getElementById("myButtons").addEventListener("click", function () {
                        tabulator_table.download("xlsx", "name.xlsx", { sheetName: "Info" });
                    });

Solution

  • I think all you need is the downloadConfig option in your table options. http://tabulator.info/docs/4.6/download#advanced-config

    So, just add downloadConfig: {columnCalcs: false} to your table options.

    Here is a working example. https://jsfiddle.net/nrayburn/0hn6v48r/11/