Header filtering and selecting rows with checkbox column giving back all rows

Question

I'm a little bit stumped on why I keep getting a full list of rows back when I do table.getSelectedData() when using header filtering. I have a table containing 16 rows. I header filter on the email address and get 3 rows. I then check the select all checkbox in the header and use a button click event to log what is selected. Whether I use "active", "visible" or nothing I always get 16 rows.

I've tried

cell.getRow().toggleSelect("active");
cell.getRow().toggleSelect("visible");
cell.getRow().toggleSelect();

along with

table.getSelectedData("active");
table.getSelectedData("visible");
table.getSelectedData();

Table initialization is as follows:

var table = new Tabulator("#rules-table", {
    height: 600, 
    data:tabledata,  
    layout:"fitColumns",
    persistentSort:true,
    selectable:true,
    selectablePersistence:false,
    pagination:"local", 
    movableColumns: true,  
    columns:[  
        {title:"UUID",        field:"uuid",        headerFilter:"input", frozen:true, width:300},
        {title:"Type",        field:"type",        headerFilter:"input", width:100},
        {title:"SubType",     field:"subtype",     headerFilter:"input", width:100},
        {title:"AssetUUID",   field:"asset_uuid",  headerFilter:"input", width:300},
        {title:"Info",        field:"info",        headerFilter:"input"},
        {title:"Owner",       field:"owner",       headerFilter:"input", width:200},
        {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", width:20, headerSort:false, cellClick:function(e, cell){
                cell.getRow().toggleSelect("active");
        }},
        {formatter:printIcon, width:0, align:"center", width:26, headerSort:false, cellClick:function(e, cell){generate_assets_options_menu(e, cell)}}
            
    ],
});

So to describe a little more, I then do some header filtering to whittle down the rows, select the rows i want, and using a button to get selected rows for a DB delete operation. Everything works fine if I manually select specific rows.

However when I whittle down using the header filters and click the header checkbox to select all visible rows (let's say there's 3 after filtering), when I print out what has been selected I always get everything i.e. 16 rows.

The delete button click event as follows :

var selectedData = table.getSelectedData("active");
var selectedRows = table.getSelectedRows("active");
    
console.log(selectedData);
console.log(selectedRows);

Answer 1

The getSelectedData function returns all selected rows, regardless of whether they are currently filtered or not.

By default a selected row that is filtered out remains selected and when the filter is removed and the row reappears it will still be selected.

If you want to see only the rows that have been filtered and are selected, i would suggest that you use the getRows function to get an array of active row components. and then use a filter function on the array to get the filtered selected rows:

var rows = table.getRows("active");

var selectedRows = rows.filter(function(row){
    return row.isSelected();
});