Search code examples
javascripttabulator

Tabulator Selection Eligibility

I'm trying to use selection eligibility on tabulator using a checkbox column, but I can't get it to work

Run the snippet below, some rows should be selectable and some not, but they all are.

var tableDiv = document.querySelector("#tableDiv");

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"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRowsCheck:function(row){
    //row - row component
    return row.getData().age > 18; //allow selection of rows where the age is greater than 18
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

Almost there... Clicking the header checkbox selects all rows regardless of the condition

enter image description here

Follow up question here: Selection eligibility not working with header checkbox on Tabulator

Solution

  • You are using version 5.5.2, in this version, the prop to disable certain row's selection is called selectableCheck.

    Bumping to 5.6.1 change the selectableCheck to the expected selectableRowsCheck.

    To enable the selection of rows, you should enable that by passing selectable: true for 5.5 and selectableRows: true for 5.6.

    Based on OP's comment, these options allows you to toggle if the row is selectable by clicking it. Don't forget to enable the selection of rows in the first place, that seems to be missing in your code snippet.

    Regarding removing the checkbox if the row isn't selectable, you can use a custom formatter, an example is found in this SO answer.

    An other way is to use some CSS, there is a tabulator-unselectable class on the rows you're targeting, with some extra you can display: none the input.

    div.tabulator-unselectable > div:first-child > input {
    display: none;
}
    • 5.5.2 Demo using selectable and selectableCheck

    var tableDiv = document.querySelector("#tableDiv");

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"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectable:true,
    selectableCheck:function(row){
    //row - row component
    return row.getData().age > 18; //allow selection of rows where the age is greater than 18
}
});
    div.tabulator-unselectable > div:first-child > input {
    display: none;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

    • 5.6.1 Demo using selectableRows and selectableRowsCheck

    var tableDiv = document.querySelector("#tableDiv");

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"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRows: true,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //allow selection of rows where the age is greater than 18
      }
});
    div.tabulator-unselectable > div:first-child > input {
    display: none;
}
    <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="tableDiv"></div>