Column visibility without full width table

Column visibility without full width table

dclar43dclar43 Posts: 47Questions: 13Answers: 2

I'm sure this is more straightforward than I'm making it. I currently store table states in a database for users to pick and choose from. Those using my app come from different parts of the company and have different preferences when it comes to which subset of data they wish to see. As it stands I've got everything saving and loading just fine except for column width.

My issue is that, as columns are removed via Buttons(ColVis), the full width of the table effectively has a min-width which then causes the columns to expand to fill it. I say "effectively" because it doesn't seem that min-width is the actual cause. I'm using a slightly edited version of ColResize to achieve column resizing. When using ColResize's handles to resize the columns I am able to shrink the columns to the point that the table's width goes below the lower limit I'd mentioned earlier.

I had hoped it would be a simple BootStrap CSS tweak, but if it is I wasn't able to figure that out. I could mess around with different col sizes but that seems like a hacky solution.

Here is a simple example. Just click the button to toggle a column's visibility. I would like for each column to retain it's width and for the table to shrink horizontally.

Answers

  • allanallan Posts: 63,695Questions: 1Answers: 10,500 Site admin

    I'm afraid that this is probably one for the ColResize plug-in - to be honest I hadn't even realised there was such a plug-in available there! Column width is not something that DataTables itself stores in the state saving - it will simply compute the column width as required when the table is displayed.

    Allan

  • dclar43dclar43 Posts: 47Questions: 13Answers: 2

    It looks like the addon used one of yours as a base and as a result supports state saving/loading. I used PHPStorms JavaScript debugger(first time using it... I'm in love) to step through the state loading process. I was able to verify that the columns' width were set properly prior to applying the state's visibility settings. When enough columns are hidden the table hits that min-width-ish limit and the columns are forced to expad to fill that space. Once DataTables is fully initialized and the state loaded I can manually resize the columns via ColResize and the table no longer has that width limit.

    The app i'm working on is on the companie's intranet and manages proprietary data or I would just link you to it. I can set up some dummy data if a video would be of any use.

    It seems that addon has slipped under a lotnof peoples' radar. It's a shame because it's a really nice feature, especially for in-line-editing with Editor.

    Thanks for the reply Allan, and a belated congratulations on the newest addition to your family.

  • allanallan Posts: 63,695Questions: 1Answers: 10,500 Site admin

    Thanks :-).

    I'm afraid I really would need a test case showing the issue to be able to offer any help with this one. It sounds like it will need live debugging in the browser.

    Allan

This discussion has been closed.