javascripthtmltabulator

Allow multiple row selection or select only with checkbox

In Tabulator

If table.selectable = true, then when ANY cell is clicked the row gets selected, I don't want this, I want the row to be selected ONLY via the checkbox, so I set selectable = false.

Now the problem is that the checkboxes act as a radiobutton group, as soon as I select a row, the previous gets unselected

  1. How can I achieve multiple row selection while using selectable = false to ensure selection only via checkbox?

or

  1. How can I ensure row selection by ticking the checkbox and not by clicking other cellls with selectable = true?

Run snippet below

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", formatter:"progress"},
    {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: false,  // <---  
});
<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>

Solution

  • Tbh I'm not too sure why you set selectable=false. If you just don't set it at all, the rows can be selected properly with checkbox and you can't select a row by clicking on other regions of the row. Unless I'm missing something this works fine:

    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", formatter:"progress"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig
});
    <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>