Tabulator from existing datatable

Question

I'm generating a tabulator table with a groupBy method from an already filtered datatable (from DataTable.js) with date range and parameters already defined. The new tabulator table is working perfectly fine but takes the whole data regardless of the filters already applied to the table I need to create the groupby from. My original datatable is:

var table = $('#datatable').DataTable();

and with the filters is 20 lines long. When creating the tabulator from that datatable it takes the whole data. Is there a way to reuse the same filtered table already existent to create a tabulator groupBy approach?

here's the code of my tabulator:

if(table!=null){
        $('#datatable').DataTable().destroy();
    }
    
    var tableTab = new Tabulator('#datatable',{
    groupToggleElement:"header",
    height:"100%",
    virtualDomBuffer: "100%",
    layout:"fitColumns",
    pagination:"local",
    //paginationSize:false,
    movableRows:false,
    groupBy:"Id",
    groupStartOpen:false,
    columns:[
        {title:"a", field:"a", width:200},
        {title:"b", field:"b"},
        {title:"c", field:"c"},
        {title:"d", field:"d"},
        {title:"Id", field:"Id"},
        {title:"e", field:"e"},
        {title:"CreatedDate", field:"CreatedDate"},
    ],
});
tableTab.setFilter($('#select').val(), $('datepickerStart').datepicker, $( "#datepickerEnd").datepicker());

IS there a way to create the new Tabulator from the filtered table.DataTable() and not from the whole '#datatable' with the full data? Example:

select only a's in the last 10 days and groupBy b's.

Thank you

Answer 1

You can use the initialFilter option to set filters on the table when it loads, so you shouldnt need to call the setFilter function:

var tableTab = new Tabulator('#datatable',{
    groupToggleElement:"header",
    height:"100%",
    layout:"fitColumns",
    pagination:"local",
    movableRows:false,
    groupBy:"Id",
    groupStartOpen:false,
    initialFilter:[
        {field:"a", type:"=", value:5000}  //set an initial filter that will only show rows with an a value of 5000
    ],
    columns:[
        {title:"a", field:"a", width:200},
        {title:"b", field:"b"},
        {title:"c", field:"c"},
        {title:"d", field:"d"},
        {title:"Id", field:"Id"},
        {title:"e", field:"e"},
        {title:"CreatedDate", field:"CreatedDate"},
    ],
});

You will need to provide three properties for each initial filter, the field name of the column you want to filter, the Filter Function and the value to filter for