Hide columns at breakpoints

I'm trying to make the table a bit more responsive. I can do this with the className & columnClassName attributes to hide the column, but this causes it to no longer be aligned with the container and it loses the rounded edges.

What would be the recommended way to solve this?

Target Functionality

Also, this may be a react-bootstrap-table-2 feature, but it would be nice if there was a way to assign a priority to a column and have the column auto-hide as the title/content/something(?) was no longer fully visible.

Or as a simpler solution just hide the rightmost column as the table shrinks.

[AllenFang]

react-bootstrap-table2 will try to support react-bootstrap-table/react-bootstrap-table2#79

I know there're some limit to implement the responsive table in react-bootstrap-table, some problem is react-bootstrap-table have two table actually. In future for react-bootstrap-table2 will only have one table and I will consider to make it more easy on responsive design. thanks

[sadsa]

@AllenFang - I would love to see this table as a single table. In our case, we are hiding columns with CSS on a certain media breakpoint. We are experiencing an issue when applying the bootstrap class d-md-none on columnClassName to hide the column on medium breakpoints. This works when no widths have been defined on the <TableHeaderColumn>, however if widths are defined the <colgroup> is forcing a width on the hidden column. So you are simply left with a blank space where the column should go. (see image below).

Could we add support to add the columnClassName for <col> elements as well as <th>?

[AllenFang]

HI @sadsa sorry for lately reply,
have you try className or thStyle?

[sadsa]

Hi @AllenFang. Yes, I've tried both these attributes to hide the column, however the issue still remains that the element itself does not receive a class and therefore continues to render an empty column

[tizzle]

Is there any news on this? I'm experiencing the same issue on react-bootstrap-table.

While trying to work around this issue with CSS, i also discovered that the content of expandable rows is rendered in a td with a colspan set to the initially defined number of cols. This makes the columns shrink again when opening expand content.

[LuisPinaSoares]

Hi. One idea (shity one) to solve this would be to draw the different tables you need, and use the grid system to make div elements (in this case translates to tables) appear and disappear...
Not the best of ideas, but solves with minimal modifications.

Another alternative, use a react component that shares the breakpoints, and take decisions on how to draw the table, according to that info.