6

I have this structure of html table

<thead>
  <tr>
    <th rowspan="2">Type</th>
    <th rowspan="2">Name</th>
    <th rowspan="2">Iteration ID</th>
    <th colspan="2">Script</th>
    <th rowspan="2">Action</th>
  </tr>
  <tr>
    <th>Init</th>
    <th>Post</th>
  </tr>
</thead>

and how it's look like

enter image description here

but should be as:

enter image description here my js code 

$(document).ready(function () {
    var table = new Tabulator("#table-test", {});
});

add codepen reference codepen.io/paulch/pen/MzQYjg

Pavlo Chechehov
  • 191
  • 2
  • 15

1 Answers1

0

Tabulator currently cannot interpret grouped columns from HTML, it does not recognise the colspan or rowspan attributes (this is on the roadmap for a future release)

You would need to declare the columns in the constructor object and then parse in the table:

Tabulator("#table-test", {
    columns:[
        {
            title:"",
            columns:[
                {title:"Type", field:"Type"},
                {title:"Name", field:"Name"},
                {title:"Iteration ID", field:"Iteration ID"},
            ],
        },
        {
            title:"Script",
            columns:[
                {title:"Init", field:"Init"},
                {title:"Post", field:"Post"},

            ],
        },
        {title:"Action", field:"Action"},
    ]
});

When taking this approach i would suggest that you then only have one row of headers in your actual HTML table to make it easier for Tabulator to parse in the data

Oli Folkerd
  • 5,658
  • 1
  • 19
  • 35
  • yeah, but it's really inconvenient. And I created my html page on java project and send to user as a string, and browser should parse this. And I haven't some UI framework, only js, jquery. I think, maybe, for me to use this framework is bad idea. But thank you for you answer. – Pavlo Chechehov Nov 23 '18 at 09:42