Enable Column visibility toggle out of the box

[rushtokunal]

Toggle column visibility is highly desired so that user can select the columns they are interested in viewing. We are also planning to save the user's preference in the database so that in future when they log back in we can give them their preferred view. If this feature is not supported now or is not going to be implemented in near future could you please help with an example to implements it programatically
using the prop: hidden

[AllenFang]

I will implement it in the future.

[rushtokunal]

Any idea when this feature might be added?

[AllenFang]

@rushtokunal I will consider to implement this in next sprint or next two sprint, thanks!

[rushtokunal]

@AllenFang thank you Allen, just a suggestion while implementing this feature, it will be helpful if we have APIs to render the table based(saved preference) on the column selected by the user. I'm actually saving the preference of my user and retrieving that when the same user logs back in to the application so that the user doesnt have to re select the columns again. BTW this is a great component.

[AllenFang]

I see, it's a good point. For your suggestion, I think that will be good by following two solution:

First one is built-in solution:

// column definition:

const column = [{
  dataField: 'id',
  text: 'Product ID',
  toggle: false // false will hidden the column 
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

In the builtin solution, react-bootstrap-table2 will also manage the toggle state inside. but you can also overwrite it

Second one is developer actually can easy control the column hide by state control:

const column = [{
  dataField: 'id',
  text: 'Product ID',
  hidden: somestate.hidden // true will hide the column 
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

column.hidden already supported.

BTW this is a great component.

thanks, give this repo a star is best encouragement for me 👍

[rushtokunal]

@AllenFang Yes i agree with you, once the column visibility is first checked by the user, based on his preference we can use the api to toggle visibility

[AllenFang]

We have new release for fixing this issue: please check RELEASE NOTE and upgrade related packages

this is docs for column toggle and this is online demo

Please open another issue if you find any bugs, thanks

[rushtokunal]

@AllenFang thanks a ton for implementing this, will take a look and confirm