Tabulator: Highlight only one row after click

[aswzen]

How to highlight a row after being clicked, i mean only a row, not multiple row..

thank you in advance

[olifolkerd]

To do this I would recommend using the rowClick event callback to toggle a class on that row and use that to highlight the row:

CSS

.tabulator .tabulator-row.selected{
    background: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/
}

JavaScript

$("#example-table").tabulator({
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Age", field:"age", sorter:"number", align:"left"},
        {title:"Height", field:"height", formatter:"star", align:"center", sorter:"number", width:100},
    ],
    rowClick:function(e, id, data, row){
        //remove selected class from previously highlighed row
        $("#example-table .tabulator-row.selected").removeClass("selected")
        //add selected class to current row
        row.addClass("selected");
    },
});

[olifolkerd]

There is now a new selectable rows feature which may be exactly what you are after!

If you set the selectable option to 1 in your constructor then it will allow only one row to be selected:

$("#example-table").tabulator({
    selectable:1,
});

Full details can be found in the documentation here

Happy Tabulating!

Oli