How do I make some columns always collapse regardless of responsive events or table width

Question

So let's say the table has 10 columns but I want to show only 5 columns and the remaining 5 need to be in the collapse element, regardless of the table width or the responsive property.

col1	col2	.....
data	data	data
collapse	...	...

I managed to make it sorta work by setting widths of the first five columns so that they take up the entire table width. But run into problems when the window is expanded. the columns in the collapse group end up occupying the extra space and the collapse effect is gone.

I want some columns to be in the collapsible div whatever happens.

Answer 1

This is not the point of the responsive collapse system im afraid, its purpose is to hide columns where there is no space for them.

If you always want to show that data in the row under the columns then you should look at using the rowFormatter to add a dive that contains the elements after the columns and only define the first 5 columns in the columns array.

Checkout the Row Formatter Docs for more details.

There is also a Row Formatting Example that shows just how much the row formatter can change things