Remove datatables search field without disabling searchable - datatables

Question

I made an datatable in Angular5 using angular-datatables. I then created the table footer and implemented input fields to search each column individually, and added style="display: table-header-group;" to the footer so it goes above the header.
Now I want to remove the standard datatables search input field.
If i just disable it in datatable configuration, then the custom search fields won't work.
I also tried to change value of class dataTables_filter to display: none, but it won't work, since it get's it's styling from node_modules folder.
I could change my node_modules/datatables/style.css but the problem is, that's the only folder that is on the gitignore list, and doesn't go to our repository.
Here is my code:
HTML:
<tfoot style="display: table-header-group;">
<tr>
<th style="width: 25%">
</th>
<th style="width: 25%">
</th>
<th style="width: 25%">
<input type="text" placeholder="Search actions" name="search-actions" class="form-control" />
</th>
<th style="width: 25%">
<input type="text" placeholder="Search messages" name="search-messages" class="form-control" />
</th>
</tr>
</tfoot>
TypeScript:
ngOnInit(): void {
this.dtOptions = {
ajax: 'http://www.mocky.io/v2/5b0eb2083200006300c19bd8',
columns: [{
title: 'Date',
data: 'date'
}, {
title: 'Time',
data: 'time'
}, {
title: 'Action',
data: 'action'
}, {
title: 'Message',
data: 'message'
}]
};
}
ngAfterViewInit(): void {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
const that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this['value']) {
that
.search(this['value'])
.draw();
}
});
});
});
}

Answer 1

Use dom option and exclude f from default value (lfrtip for default style) to hide filtering control.
For example:
this.dtOptions = {
// ... skipped ...
dom: 'lrtip'
}