CODEWITHSUNDEEP
nestedtabulatornested-table
Laxmi Lal Menaria
Laxmi Lal Menaria

Reputation: 1445

Tabulator - Add subtable to Header of Multi header table

I have a tabulator table which has multiple headers with groups, i.e. Title and Sub-Title. I would like to add a subtable to header "Sub Title" listed at this demo.

       <https://jsfiddle.net/4gatx38n/1/>

enter image description here

Please let me know how to add?

Upvotes: 0

Views: 198

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8368

If they are unrelated to the columns then you could just stick them in a div above your table.

If you are talking about grouped columns then Tabulator has that functionality built in by using nested objects in the column definition

var table = new Tabulator("#example-table", {
    columnHeaderVertAlign:"bottom", //align header contents to bottom of cell
    columns:[
        {title:"Name", field:"name", width:160},
        {//create column group
            title:"Work Info",
            columns:[
            {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", width:100},
            {title:"Rating", field:"rating", hozAlign:"center", width:80},
            {title:"Driver", field:"car", hozAlign:"center", width:80},
            ],
        },
        {//create column group
            title:"Personal Info",
            columns:[
            {title:"Gender", field:"gender", width:90},
            {title:"Favourite Color", field:"col", width:140},
            {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:130},
            ],
        },
    ],
});

For full details checkout the Column Grouping Docs

Upvotes: 0

Related Questions