Tabulator: Remove selected rows

[gyxman]

Hi,
Thanks a lot for your great job !

I,m added checkbox for rows. How select row, when ckick on checkbox?
And how delete selected rows? How get index selected rows?

Thanks

[olifolkerd]

Hey,

below is an example for row selection with a checkbox:

//row selection formatter
var rowSelectFormatter = function(cell, formatterParams){
    var input = $("<input type='checkbox'>");
    var row = cell.getRow();

    input.change(function(){
        if(input.is(":checked")){
            $("#example-table").tabulator("selectRow", row);
        }else{
            $("#example-table").tabulator("deselectRow", row)
        }
    });

    return input;
}

//build table
$("#example-table").tabulator({
    data:tabledata,
    columns:[
        {title:"", formatter:rowSelectFormatter},
    ],
});

You can then use the getSelectedRows or getSelectedData functions to retrieve the selected row components or data.

let me know if that helps.

Cheers

Oli

[gyxman]

No, it,s work no correct.

See example:
https://jsfiddle.net/rge4fedn/1/

1. check row №1
2. check row №2
3. uncheck row №2

getSelectedRows return index 2. But correct index 1

Thanks

[olifolkerd]

Hey,

There was an issue with the deselectRow function(see issue #414)

I just pushed a fix for it to the master branch this morning, if you pull the latest code from github it will work.

Cheers

Oli

[gyxman]

Thanks, all good=)

[sach3000]

Hi, Oli
Please check this exception:

formatter:rowSelectFormatter

Exception: TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at Cell._generateContents (http://192.168.31.5/static/tabulator/js/tabulator.js:5519:18) at Cell.setValueActual (http://192.168.31.5/static/tabulator/js/tabulator.js:5668:8) at Cell.build (http://192.168.31.5/static/tabulator/js/tabulator.js:5276:8) at new Cell (http://192.168.31.5/static/tabulator/js/tabulator.js:5260:8) at Column.generateCell (http://192.168.31.5/static/tabulator/js/tabulator.js:2201:14) at http://192.168.31.5/static/tabulator/js/tabulator.js:724:22 at Array.forEach () at ColumnManager.generateCells (http://192.168.31.5/static/tabulator/js/tabulator.js:722:23) at Row.generateCells (http://192.168.31.5/static/tabulator/js/tabulator.js:4664:41) at Row.initialize (http://192.168.31.5/static/tabulator/js/tabulator.js:4686:9)
message: "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
stack: "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.↵ at Cell._generateContents (http://192.168.31.5/static/tabulator/js/tabulator.js:5519:18)↵ at Cell.setValueActual (http://192.168.31.5/static/tabulator/js/tabulator.js:5668:8)↵ at Cell.build (http://192.168.31.5/static/tabulator/js/tabulator.js:5276:8)↵ at new Cell (http://192.168.31.5/static/tabulator/js/tabulator.js:5260:8)↵ at Column.generateCell (http://192.168.31.5/static/tabulator/js/tabulator.js:2201:14)↵ at http://192.168.31.5/static/tabulator/js/tabulator.js:724:22↵ at Array.forEach ()↵ at ColumnManager.generateCells (http://192.168.31.5/static/tabulator/js/tabulator.js:722:23)↵ at Row.generateCells (http://192.168.31.5/static/tabulator/js/tabulator.js:4664:41)↵ at Row.initialize (http://192.168.31.5/static/tabulator/js/tabulator.js:4686:9)"
__proto__: Error
constructor: ƒ TypeError()
message: ""
name: "TypeError"
toString: ƒ toString()
__proto__:
constructor: ƒ Error()
message: ""
name: "Error"
toString: ƒ toString()
__proto__: Object
this: Cell {table: Tabulator, column: Column, row: Row, element: div.tabulator-cell, value: undefined, …}
this: Cell
val: n.fn.init [input]

On my page with tabulator:

` var tb = new Tabulator("#tb-result", {
resizableColumns:false,
resizableRows: false,
layout:"fitColumns",
addRowPos: "bottom",
movableColumns: false,
movableRows: false,
selectable:1,
selectableRollingSelection: false ,
placeholder:"Нет данных",
rowDblClick:function(e, row){
var rowIndex = row.getIndex();
row.toggleSelect();
var cells = row.getCells();
var rowData = row.getData();
},
tooltips:true,
index:"application_id",
initialSort:[
{column:"application_id", dir:"asc"},
],
columns:[
{title:"id", field:"id", width:2, visible:false, align:"center"},
{title:"", formatter:rowSelectFormatter, width:30, align:"center"},
{title:"Услуга", field:"application_id", align:"center"},
{title:"Номер", field:"msisdn", align:"center", editable:true, editor:"input", validator:["required","numeric"]},
{title:"Описание", field:"description", editable:true, editor:"input", align:"center"},
{title:"Статус", field:"enabled", align:"center", formatter:"tickCross", sorter:"boolean", editor:true, validator:["required"]},
{title:"Создано", field:"created_at", formatter:"datetime", align:"center"},
{title:"Обновлено", field:"updated_at",formatter:"datetime", align:"center"},
],
});

`

[sathizselvaraj]

i'm using tabulator 4.1 with this

var selectedRows = table.getSelectedRows();
for(var i=0;i {
selectedRows[i].delete();
}
```