Selection eligibility not working with header checkbox on Tabulator

Question

I'm using Selection Eligibility in Tabulator.

Run the snippet below, click the header checkbox and it selects all rows regardless of the eligibility condition. How can I fix this?

• 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>

Answer 1

The workaround was to listen for the rowSelected event, and deselect the row after selection if it was not selectable.

myTable.on("rowSelected",(row)=>{
if (row.getData().age <= 18) {
  row.deselect();
}

});

• 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
      }
});

myTable.on("rowSelected",(row)=>{
if (row.getData().age <= 18) {
  row.deselect();
}

});

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>