Checkbox not showing on the Tabulator table to select row / multiple rows

Question

I am very new to Tabulator and I am not being able to see the checkbox on the table to select the row. I added a column of checkboxes to select a row or multiple rows, but the checkbox is only visible when a click on the empty cell. And instead of showing a tick it shows true and only on the third time it shows the ticked box. Also, when I select another row after that it no longer shows the ticked row! Can someone, please help me! All i need is column of checkboxes that allows the users to select and deselect a row or multiple rows.

Thank you!

$("#example-table").tabulator({
    layout:"fitColumns",
    selectable:true,
    pagination: "local",
    paginationSize: 1000, 
    progressiveRender:true,
    index:"bbcn",
    columns:[    
        {
            title:"Example", 
            field:"example", 
            width: 70,
            editor:"tick", 
            formatter:"rowSelection",
            titleFormatter:"rowSelection",
            align:"center",
            headerSort:false,
            editorParams:{
               tristate:true,
               indeterminateValue:"n/a",
               elementAttributes:{
                  maxlength:"10", //set the maximum character length of the input element to 10 characters
               },
            },
            cellClick:function(e, cell){
                cell.getRow().toggleSelect();
           }, 
        }
    ]
});

Answer 1

The Select Row With Check Box Example contains all the code you need to do this.

There is a special rowSelection formatter you have to use in the checkbox column

var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
      {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
        cell.getRow().toggleSelect();
      }},
      {title:"Name", field:"name", width:200},
      {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"},
      {title:"Gender", field:"gender", width:100},
      {title:"Rating", field:"rating", hozAlign:"center", width:80},
      {title:"Favourite Color", field:"col"},
      {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
      {title:"Driver", field:"car", hozAlign:"center", width:100},
    ],
});