Filter collumns on top

Hi,
I am strugling with placing filtering columns on top of tables, I managed to solve this with css :

tfoot {
display: table-header-group;
}

but when i have scrollX: true this does not work due to div wrapper

my code i am using GWT:

   private native void initJs(Element el, JavaScriptObject columns,
           DataTableEditor editor, String apiEndpoint, JsArray<DataTableCustomButton> customButtons, RelatedDataTableView detailsTable) /*-{
        // Setup - create table footer with text inputs for filtering
        $wnd.$(el).append('<tfoot></tfoot>');
        $wnd.$('tfoot', el).append('<tr></tr>');
        columns.forEach(function(col) {
            var th = $wnd.$('<th></th>');
            th.data({
                'searchable' : col.searchable,
                'title' : col.title,
                'type' : col.type,
                'isBoolean' : col.isBoolean
            });
            $wnd.$('tfoot tr', el).append(th);
        });
        $wnd
                .$('tfoot th', el)
                .each(
                        function(i) {
                            var e = $wnd.$(this);
                            var s = e.data()['searchable'];
                            var t = e.data()['title'];
                            var type = e.data()['type'];
                            var b = e.data()['isBoolean'];
                            if (s == null || s) {
                                if ((type == "select" && b == true)) {
                                    e.html('<select class="form-control input-sm">'
                                                + '<option value=""></option>'
                                                + '<option value="true">Yes</option>'
                                                + '<option value="false">No</option>'
                                                + '</select>');
                                } else {
                                    e.html('<input type="text" class="form-control input-sm" style="width: 100%;" placeholder="Filter ' + t + '"/>');
                                }
                            }
                        });

        var dom = "<'row'<'col-sm-2'l><'col-sm-10'B>>"
                + "<'row'<'col-sm-12'tr>>"
                + "<'row'<'col-sm-5'i><'col-sm-7'p>>";

        var buttons = [ 
                    {extend : 'create', editor : editor},
                    {extend : 'remove', editor : editor},
                    'selectAll', 'selectNone', 'colvis', 'colvisRestore'];

        // adding custom buttons to datatable
        customButtons.forEach(function(b) {
            buttons.push(b);
        });

        var dt = $wnd.$(el).DataTable({
            columns : columns,
            ajax : {
                type:"POST",
                url : apiEndpoint
            },
            dom : dom,
            processing : true,
            serverSide : true,
            scrollX : true,
            select : {
                style : 'os'
            },
            buttons : buttons,
        });
        
        // throttling for search requests
        var search = $wnd.$.fn.dataTable.util.throttle(function(col, val) {
            if (col.search() !== val) {
                col.search(val).draw();
            }
        }, 1000);

        // enable filter on individual text boxes in footer
        dt.columns().every(function() {
            var that = this;
            $wnd.$('input', this.footer()).on('keyup change', function() {
                search(that, this.value);
            });
            $wnd.$('select', this.footer()).on('change', function() {
                search(that, this.value);
            });
        });
}

I tried to replace tfoot with thead but then filtering columns disappeared.
Thanks