Posts

Showing posts from October, 2016

react-bootstrap-table | header column alignment fix

Image
I am working with react-bootstrap-table. Its a great module with few teething problem. for example whenever I have a lots of columns (in the table) my header column is misaligned with the columns in the dataarea. example: (before the fix) after applying the fix ( note that now you have a scroll bar too) Reason for the problem: In react-bootstrap-table "header" is a table and the data is another table. Since they are 2 different tables sometimes the header column width gets misaligned from the column of data table. Fix-Logic applied: The idea is simple, First I allow the table to be rendered as it is  Then first adjust the width of the data table columns using the width of the respective header column width. But remember only for the columns whose width is lesser than the header respective column width.  Now get the width of all data-columns and set the same to the width of the respective header columns. and tadaaaa the table in perfect alignment now. S