I am having a problem with my bootstrap 4 datatable. The body columns are not aligning with the header until a sort is initiated. I also looked up some answers regarding this issue and most of them required that "display: block" be removed - which I did - and it did not solve my issue.

All I want to do is trigger the exact same kind of sort that occurs when I click on one of the headers, but I want to do this entirely in JavaScript.

I do not want to create a function that adjusts the rows as this did not affect the header when I implemented it.

EDIT: A similar problem with a minimal reproducible example can be found here: However, the solutions presented in this question do not solve my issue.