Search code examples
javascripttabulator

Tabulator and tickcross header filter

I have tickcross as header filter in some columns. How to change all items in certain column to checked or unchecked at one click? I cant find any example here: tabulator

Also I would like to know if it is possible fit pagination info into screen when is used mobile phone with small screen width(360px). here is screenshot:

enter image description here

Thank You so much

Solution

  • Change All Items In Column At Once

    To do this you would need to retrieve all rows using the getRows function and then use the update function on the row components to change the value.

    It would also be worth using the blockRedraw and restoreRedraw functions to prevent redrawing of the table until all the rows were updated, as it will improve the efficiency of the operation

    In the example below i will assume you are looking to update the alarm property of each row

    var rows = table.getRows();

table.blockRedraw(); //block table redrawing

//iterate over each row in the table
rows.forEach(function(row){
    row.update({alarm:true}); //set alarm to true
});

table.restoreRedraw(); //restore table redrawing

    Wrap Pagination Element

    To cause the pagination element to wrap you would need to use a bit of CSS, if you add it anywhere after you have imported the tabulator.min.css file

    .tabulator .tabulator-footer {
    white-space:normal;
}