Issue with data-fixed-columns="true" in Multiple Tables within Tabs

[ShreeSoftech-Rupesh]

Description

I encountered an issue with the Bootstrap Table library when using the data-fixed-columns="true" attribute.

Steps to Reproduce:

1. Create multiple tables and set data-fixed-columns="true" for each table.
2. Place these tables inside separate tabs.
3. Activate the first tab and observe that the fixed columns work correctly. Switch to any other tab and observe that the fixed columns do not work as expected.

Example(s)

Here Is example

https://live.bootstrap-table.com/code/ShreeSoftech-Rupesh/17764

[ShreeSoftech-Rupesh]

@wenzhixin @UtechtDustin Any Update?

[ShreeSoftech-Rupesh]

I also found one more issue: when clicking the refresh button in the second tab, it works.

https://github.com/wenzhixin/bootstrap-table/assets/92097236/10dcedf0-9423-4058-a147-acb4e338170c

[UtechtDustin]

The issue is that we calculate the width's to check if a fixed column is needed or if the browser width is larger then the table width.
In you're example we get 0 as width, as the element is not visible. That is also the reason why it works with the refresh button, it also works if you init the table after x seconds (using setTimeout) and switch to the second tab within that time.
So the solution would be to initialize the table AFTER the table is visible (so after switching to the second tab).

Working test example: https://live.bootstrap-table.com/code/UtechtDustin/17861

[wenzhixin]

I agree that the correct approach should be to initialize the table after each tab is shown to ensure its correctness.