Improve Column Manager for large amounts of Columns

[marvinrabe]

We need to change the Column Manager to handle large amount of columns more effectively. The current implementation relies on checkboxes, mixes visible/hidden states in a single long list, and is restricted to a dropdown view. This proposal introduces icon-based toggles, split views for better spatial organization, and a Slideover layout mode.

My problems with the Column Manager:

• When there are many columns, scrolling through a single mixed list is tedious.
• Hidden columns currently support drag-and-drop reordering, which has no functional value since hidden items are not rendered.
• The component is limited to a dropdown/popover, which gets cramped on smaller screens or with many columns.

My proposed Changes:

• Replace checkboxes with Eye icons.
• When reordering is enabled, split the UI into two distinct sections.
• Make use of icons more aligned with other Filament components. For example the "dense repeater" has different drag handles.
• When reordering is disabled, still show it in a single list and allow the multie-column grid.
• Suppord slideover and modals like the filter menu.

How the dense reapeater uses icons:

How i would like the column manager to look:

(This is only a mockup, It should adhere to the default filament design and have the same reording icons like the repeater.)

We require this updated component for our own software, so I will be implementing this rework in the coming weeks regardless.

If you are interested in this improvement for Filament, I would be happy to submit a Pull Request for your review once it is complete.

[danharrin]

What do you think @archilex? For one, I don't think I like the eye icons instead of checkboxes.

[archilex]

@danharrin This proposal is similar to what I already had in Advanced Tables (eye icon and all) and while it has benefits like the ones mentioned, there are also downsides we discussed when implementing the current design. For example, if you’re not using reorderable columns, the position of the columns is static, even if it’s hidden. So having it “move” to a Hidden section means you have to hunt for it in a different place when wanting to unhide it. It also makes toggling columns on/off quickly harder because columns names are moving around, especially if you have defer columns turned off. This can cause misclicks and then since the column has moved you have to go hunt for it. Columns groups would be another issue with the nested columns being moved to a different visually hierarchy (not indented) when moved to the hidden section. It would also mean that the indeterminate state of a column group would make less sense if it only showed visible columns.

So in the situation where you have a large amount of columns, and reorderable columns is enabled, and you don't have column groups, then this proposal might makes sense, but that's not the vast majority of tables out there and for all other tables the above issues make it a worse experience.

However, I do think adding a slideover/modal could be beneficial as you get more vertial real estate that way and it would better align the feature with filters which can be used in a slideover/modal.

@marvinrabe Regarding the handle icon this is actually what is used in the table when reordering rows. The double arrows enables the mode but the bars-2 icon is the handle. @danharrin If anything we might want to consider swapping the repeater icons for the bars-2 icon.

Also, @marvinrabe you may not be aware but you can use multiple columns in the column manager with ->columnManagerColumns() as well as set a max height with ->columnManagerMaxHeight(). Doesn't completely solve your issues but might help mitigate them some.

[Mathissou01]

@archilex 👋🏻

I've made a PR to improve the columnManager customisation. Maybe It'll help you in your problem.

#19158