How to Show Scrollbars and Not Have UnAligned Cols and missing Filter Box When Ajaxly Load Data

karkiekie

When I have this:
function renderTable(response) {
var table = $('#data-table').dataTable({
stateSave: true,
stateDuration: -1, //Session
dom: 'BQfrtip',
fixedHeader: true,
paging: false,
//messes with column alignment and search box
//scrollY: (window.innerHeight * 0.60),
//scrollCollapse: false,
//scrollX: true,
data: response,
columns: [
{ 'data': 'Id' },
{ 'data': 'IsTestData' },
{ 'data': 'Name' },
{ 'data': 'HasDraftVersion' }
],
searchBuilder: {
depthLimit: 1
},
language: {
searchBuilder: {
add: 'Add Search Criteria',
condition: 'Comparator',
clearAll: 'Reset',
delete: 'Delete',
deleteTitle: 'Delete Title',
data: 'Column',
//left: 'Left',
//leftTitle: 'Left Title',
logicAnd: 'And',
logicOr: 'Or',
//right: 'Right',
//rightTitle: 'Right Title',
title: {
0: 'Search Filters',
_: 'Search Filters (%d)'
},
value: 'Option',
valueJoiner: 'et'
}
},
buttons: [
'copy',
'excel',
]
});
}

My columns are aligned, and my SearchBuilder shows correctly. If I remove the commented out scrollbar lines, then I get the scrollbar, but columns are misaligned and SearchFilter does not render correctly.