React Column Manager

Copy Page

A forty-column table is unusable until each person can carve it down to the eight columns their job needs. Small feature, disproportionate impact on whether a data tool gets adopted.

Installation

Props

Required columns, and the search/drag conflict

required marks columns that cannot be hidden — normally the row identity. Without it, someone hides the Lot ID and is left with a table of anonymous numbers and no obvious way back. The eye toggle is disabled rather than absent, so the reason is visible.

Pinning cycles left → right → unpinned on one control instead of spending three buttons on a rarely-used setting. The preview strip below shows the true resulting order — left-pinned first, then unpinned in list order, then right-pinned — because the relationship between "list order" and "table order" is otherwise not obvious once pins are involved.

One deliberate interaction detail: dragging is disabled while a search is active. Reordering a filtered list is ambiguous — dropping between two visible rows says nothing about where the item lands among the hidden ones — so the component disables drag and says why rather than doing something surprising.

Persist the result per user. The whole point is that the arrangement survives to tomorrow; pair with Saved Views if column layout should travel with a named view.