Column Header Height Issue

[Sledge-]

I am having this strange issue that causes the column headers to become taller depending on their column position. It looks like it might be a bug in Tabulator.

Screenshot attached:

Here is my code:

$("#report-table2").tabulator({
  // fitColumns:true,
  columns:[
      {
          title:"Begining Num Customers",
          field:"beginingNumberOfCustomers",
          sorter:"number",
          width:175,
      },
      {
          title:"Begining Product Revenue",
          field:"beginingProductRevenue",
          sorter:"number",
          width:175,
          formatter: function(cell, formatterParams){
            var value = cell.getValue(),
                sign = value >= 0 ? "" : "-",
                color = value >= 0 ? "black" : "red";
                text = "<span style='color:"+color+";'>" +sign +"$"+format3(Math.abs(value))+ "</span>";
            return "<div>"+text+"</div>";
          }
      },
      {
          title:"Ending Number of Customers",
          field:"endingNumberOfCustomers",
          sorter:"number",
          width:175,
      },
      {
          title:"Ending Product Revenue",
          field:"endingProductRevenue",
          sorter:"number",
          width:175,
      },
      {
          title:"Cohort",
          field:"level2Cohort",
          sorter:"string",
          width:175,
      }
  ]
});

function parseReport2Data(){};

function createReport2Table(tabledata, cohort){
  $("#report-table2").tabulator("setData", tabledata);
  $("#report-table2").tabulator("setPageSize", 500);
  $("#report-table2").tabulator("setSort", "product_revenue", "desc");
  $("#report-table2").tabulator("redraw");
  var columnHeaders = d3.select('.tabulator-header').selectAll('.tabulator-col');
  columnHeaders.attr('style', 'min-width: 40px; width: 175px; height: 40px;');  // workaround
}

function loadReport2(cohort, yearMonthStart, yearMonthEnd) {
  var requestData = JSON.stringify({level2Product: cohort, yearMonthStart: yearMonthStart, yearMonthEnd: yearMonthEnd});
  var url = 'http://localhost:8181/v2/cohort/';
  console.log(requestData);
  console.log(url);
  d3.request(url)
    .header("Content-Type", "application/json")
    .header("X-Requested-With", "XMLHttpRequest")
    .send("POST",
          requestData,
          function(rawData){
             var data = JSON.parse(rawData.response);
             console.log(data);
             createReport2Table(data, cohort);
       });
}

loadReport2("ADI","201701","201702");)

Here is what the DOM elements look like:

<div class="tabulator-header"><div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" title="" style="min-width: 40px; height: 100px; width: 199px;"><div class="tabulator-col-content"><div class="tabulator-col-title">Begining Num Customers</div><div class="tabulator-arrow"></div></div><div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div><div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" title="" style="min-width: 40px; height: 180px; width: 199px;"><div class="tabulator-col-content"><div class="tabulator-col-title">Begining Product Revenue</div><div class="tabulator-arrow"></div></div><div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div><div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" title="" style="min-width: 40px; height: 340px; width: 199px;"><div class="tabulator-col-content"><div class="tabulator-col-title">Ending Number of Customers</div><div class="tabulator-arrow"></div></div><div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div><div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" title="" style="min-width: 40px; height: 660px; width: 199px;"><div class="tabulator-col-content"><div class="tabulator-col-title">Ending Product Revenue</div><div class="tabulator-arrow"></div></div><div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div><div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="asc" title="" style="min-width: 40px; height: 1300px; width: 199px;"><div class="tabulator-col-content"><div class="tabulator-col-title">Cohort</div><div class="tabulator-arrow"></div></div><div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div></div>

What's weird about it it is that nowhere do I attempt modify the height, yet it seems to increase according to some formula: 100, 180, 340, 660, 1300.

I did attempt a workaround (see above) to set the column header height attribute using a d3 selection. I have had some success using this method but it is not reliable so I would like to find a way to correct the column header height properly.

[olifolkerd]

Hey @Sledge- ,

I have seen similar issues with inline elements when styles arn't configured correctly. it is a common issue with inline elements when there are interfering styles in play.

The root cause of this is likely some other styles on the page that have applied styles to the header elements that are not supposed to be there, which is throwing off the render. I would suggest you create your table on a clean boilerplate html page and compare the styles with the elements on your existing page. or use your browser tools to look at the styles applied to the affected elements and see what styles are being applied the table headers or any of the elements above them that do not come from the Tabulator style sheet.

Tabulator programatically builds its elements, so changing the headers after the fact is likely going to mess with the calculations, i would suggest that you avoid directly manipulating the DOM inside the table.

I have tried your constructor on a blank page and it works fine with no issues.

Let me know if i can be of any further help.

Cheers

Oli

[Sledge-]

Hi Oli,

Thanks for the reply. I probably should have added that the app lives in a page in an Angular 1 dashboard, so there could be interference between some set of styles coming from the dashboard and the styles coming from tablulator. I'll try your suggestion and let you know if I learn anything.

Karl

[olifolkerd]

Karl, that would be great, im looking to write an article about integrating Tabulator into angular projects as a lot of devs seem to be doing that at the moment, so any lessons you have learnt would be great!

Cheers

Oli