CODEWITHSUNDEEP
javascripttabulator
Gaurank
Gaurank

Reputation: 1

How to create/set dynamic headers in tabulator

How can we set dynamic header name. is is being passed from JSON. Also I want to know how can we hide multiple columns for eg you have an example of hiding a single column but i want to hide multiple columns and i want a same multiple columns to be shown on button click.

These feature or questions are related to comparison table we are tying to develop using tabulator where i want to compare multiple specific columns and I want to hide the columns which i don't want to see and show it again if i want

Upvotes: 0

Views: 2953

Answers (2)

Oli Folkerd
Oli Folkerd

Reputation: 8348

Tabulator has an option for auto column name generation based on the property names of the row data.

You can enable this by setting the autoColumns option to true:

var table = new Tabulator("#example-table", {
    data:tabledata,
    autoColumns:true,
});

Have a look at the Autocolumns Example to see it in action.

To hide multiple columns you need to call the hideColumn or showColumn function multiple times If you would prefer that the table is only redrawn once during this time, then you can use the blockRedraw function to prevent redrawing of the table until your updates are complete:

table.blockRedraw(); //block table redrawing

table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column

table.restoreRedraw(); //restore table redrawing

Upvotes: 2

George Gotsidis
George Gotsidis

Reputation: 436

In order to hide a column you have to add visible:false as argument inside table's declaration.

example:

columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]

In order to hide/show multiple columns first must identify which column to be hidden/un hidden

A simple approach is to make an object array of Boolean states, such as:

var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});

then table's initialization will be like: 

columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]

Now you are ready to fetch your Jason Data and change the visibility according your needs.

The above procedure works independently also. Any time you can access multiple array values, change their status and re-update tabulator to hide/show columns.

You can apply the same method with column name also changing the title: Note that once column is initialized inside table, it cannot be changed. The only way to alter Heading (data also) is to remove existing column and replace it with another.

To make this happen use: table.deleteColumn("Column Name Here");

table.addColumn({title:"Name", field:"name"});

Hope that helps!

Upvotes: 0

Related Questions