- has every column with width depended on content
- has flexible height but no more than screen. I didn't want y to overflow instead I've needed the table to be scrollable in Y when there is no space or too many rows per page
- has sticky header
- has columns toggle - I have 200 columns
- has possible to scroll in X direction when there is no space for columns
- has editable rows
Table summary - 3000 rows, 200 columns, dynamic column sizes, responsive width and height, overflow in x and y when needed, and pagination 5-50 records per page increment-able by 5
Anyone has an idea why using pagination, filtering, and sorting on a big data table like described above causes rendering itself and content in a really long time but with lazy loading implemented in Vuex still on the client-side, it works pretty fast? Both methods are client-side.
I did pagination on the client-side with Vuex based on primevue filter, sort, and page events. It is fast, very fast. Then I've found another problem. With a lot of columns toggled every operation took a lot of time again. I've started to use loading state. And nothing happened. There was a lag and then a spinner for a moment.
I've realized that rendering so many columns was a problem. Ui was just blocked because of it.
Then I've used the timeout 0 tricks to set loading to true and fetch data from vuex at the end of the queue.
It helped because I was able to see the spinner when UI was blocked according to a number of columns.
Now everything works perfectly.
Possibly table with fixed columns width would act differently - better. I assume that less time would be needed to render.