Tabulator: The new headerVissible not working?

Created on 21 Aug 2019 · 6Comments · Source: olifolkerd/tabulator

Describe the bug
The new headerVissible not working?

Tabulator Info

4.4.1

Working Example


<body>
    <div id="accounts">  </div>
    <script>
         function onLoad() {
            var table = new Tabulator("#accounts", {
                headerVisible:true,      //hide column headers
                layout:"fitColumns",      //fit columns to width of table
                responsiveLayout:"hide",  //hide columns that dont fit on the table
                tooltips:true,            //show tool tips on cells
                addRowPos:"top",          //when adding a new row, add it to the top of the table
                resizableRows:true,       //allow row order to be changed
                columns:[
                    {title:"Status", field:"status"},
                    {title:"Account", field:"account"}
                ],
                data:[
                    {id: 1, status: "Status", account: "Account 1"},
                    {id: 2, status: "Status", account: "Account 2"},
                    {id: 3, status: "Status", account: "Account 3"},
                    {id: 4, status: "Status", account: "Account 4"},
                    {id: 5, status: "Status", account: "Account 5"},
                ]
            });
         }
         window.onload = onLoad;
    </script>
</body>

To Reproduce
If you set headerVisible:false, the whole grid disappears, not just the headers.

Expected behavior
Hide the headers, but show the data.

Desktop (please complete the following information):

OS: Windows 10
Browser Chrome
Version 76

Bug

Source

hrstoyanov

All 6 comments

Which style are you using?

olifolkerd on 21 Aug 2019

bulma.

hrstoyanov on 21 Aug 2019

I'm seeing this too : with headerVisible: false, the entire table is not visible

Tabulator v4.4.1
Tried all the themes which are included with Tabulator

groupTable = new Tabulator("#group-list", {
    height: 200,
    virtualDomBuffer: 100,
    headerVisible: false,
    // layout: "fitDataFill",
    layout: "fitColumns",
    selectable: true,
    responsiveLayout: "hide",
    placeholder: "No Groups",
    columns: [
      {
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        width: 30,
        align: "center", headerSort: false,
        cellClick: function (e, cell) {
          cell.getRow().toggleSelect();
        }
      },
      {
        title: "Groups",
        width: 258,
        field: "groupName",
        variableHeight: false,
        headerSort: false
      }
    ],

    ajaxLoader: false
  });
});

Screen Shot 2019-09-07 at 8 23 11 PM

roypardi on 8 Sep 2019

Hey @hrstoyanov

Thanks for the headsup, i will get this fixed for the next release.

Cheers

Oli :)

olifolkerd on 27 Sep 2019

👍1

Hey @hrstoyanov

It was due to an interaction between invisible headers and the responsive collapse system, the missing header element was breaking the calculations and causing all the columns to be hidden

I have pushed a fix to the master branch and will include it in todays patch release.

Cheers

Oli :)

olifolkerd on 28 Sep 2019

fix confirmed in 4.4.3, thanks!!

hrstoyanov on 5 Oct 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings