I had the same Problem, but only if one of the columns has auto-width (in this example the first one) and there is a scrollbar:
The reason is, that the header and body are two different table elements, and the former does not know if the later has a scrollbar, as a result the auto widths differ.
In another thread someone proposed setting the table body's div width to 101% (probably something like calc(100% + 16px) would by better), but this only works if you always have a scrollbar - so no filtering for you!
Better adjust the last column in the table body to fit the scrollbar in js code:
function adjustHeaderForScrollbar(gridName) {
let tableHeader = $("#" + gridName + " .ui-datatable-scrollable-header-box>table");
let tableData = $("#" + gridName + " .ui-datatable-scrollable-table-wrapper>table");
let scrollbarWidth = tableHeader.width() - tableData.width();
let lastColumnHeader = tableHeader.children().last().children().first().children().last();
let lastColumnData = $("td:not(.ui-datatable-emptymessage):last-child", tableData);
if (lastColumnData.length > 0)
$("col:last-child", tableData).width(lastColumnHeader.prop("offsetWidth") - scrollbarWidth);
}
and call it the OnRender event of the grid:
private async void OnRender(GridRenderEventArgs<Checklist> args)
{
await js.InvokeVoidAsync("adjustHeaderForScrollbar", args.Grid.UniqueID);
}
Regards
Peter