0

I want to render a bootstrap-table page, and the dataset has quite a few columns. However on page-load I want to show only a few (2 or 3) columns, but have the other columns "in reserve".

Here is a GUI mockup to show what I mean:

Collapsedselect-columns-collapsed

Button Expanded:

select-columns-expanded

Here I have clicked on "Toogle all" to deselect all, then selected the first 3 manually.

I'd like to have the 3 selected on page load. Is there alaready a setting or an option that I can use to acheive this?
Users should see a simple table, and only power-users will click on the button and add more, then do horizontal scrolling, change column selections etc

knb
  • 9,138
  • 4
  • 58
  • 85

1 Answers1

0

Answering my own question, because I cannot really revoke or delete it.

This question is a duplicate of "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928" from 2017 . There question has a few alternative answers already.

For my use-case it was sufficient to follow the accepted answer. It recommends to put these HTML data-attributes into the tr of the thead element:

 <td data-visible="false" ...>

This is the simplest solution and works well for small tables, and if you have absolute control over the table-generation- and column-selection process.

Columns disabled this way will still be available with the "Select columns" button created with data-show-columns="true" and data-show_columns-toggle-all="true".

It might not work so well in more complicated scenarios, e.g. when you need to access the hidden columns via the DOM. For details see "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928"

knb
  • 9,138
  • 4
  • 58
  • 85