Expandable columns

[mauritzvdworm]

Excel has a group feature that you can apply over columns. Below is a simple example:

Clicking the + gives

I want to recreate this with reactable, but the only way I can manage is to transpose the data. I'd like to be able to expand the columns like you can with the rows. There is already the ability to group by columns, would it be possible to add this functionality?

[glin]

Technically it would be possible, but there'd be a bunch of questions to work out first since reactable isn't set up this way like Excel is. For example, where would you put the controls to expand columns - inside or outside the table? Either way, it would be introducing a new type of element to the table layout, with things to figure out like styling, positioning, making the control keyboard accessible, etc.

For now though, I think you could possibly implement a version of column expansion yourself using the JavaScript API, and the methods to toggle column visibility. For example, the Column Visibility Toggle Button example. So you start out with all your columns in the table, with the collapsed columns hidden initially. Then you can place a button somewhere outside or inside the table that toggles those hidden columns visible using Reactable.setHiddenColumns().

I think this would work with multiple sets of expandable columns too.

[mauritzvdworm]

Thanks for the feedback, I'll see if I can jerry-rig something together.