Issue
I would like to "select" a column in a table created with Tabulator grid. What I want to achieve is adding a css class to selected column:
I have tried to do so by adding cellClick function (please see the snipplet). I am able to change the cell elements html style and change the color. But I would like to add a css class: "column-selected" to every cell from selected colum. I also wonder if there is any more elegant solution than adding onCellClick function?
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
];
var table = new Tabulator("#example-table", {
data:tabledata, //assign data to table
columns:[ //Define Table Columns
{title:"Name", field:"name"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
],
columnDefaults:{
cellClick:function(e, cell){
cell.getColumn().getCells().forEach(function(cell){
cell.getElement().style.color = "#A6A6DF";
})
},
},
});.column-selected {
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>Solution
You can use getColumn().updateDefinition({cssClass: "column-selected"}):
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
];
var table = new Tabulator("#example-table", {
data:tabledata, //assign data to table
columns:[ //Define Table Columns
{title:"Name", field:"name"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
],
columnDefaults:{
cellClick:function(e, cell){
if(cell.getElement().classList.contains("column-selected")) {
cell.getColumn().updateDefinition({cssClass: ""});
} else {
cell.getColumn().updateDefinition({cssClass: "column-selected"});
}
},
},
});.column-selected {
color:red;
background: #ff03;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>Click column one more time to un-select it.
Answered By - the Hutt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.