Column manager aka Configure grid

[DineshBodewar]

Provide a column manager modal dialog box which provide below features to manage table
A] Search by column name
B] Change column sequence using drag handle
C] Stick/Unstick columns - So user can always see sticked columns in table even in horizontal scroll
D] Show/Hide columns
E] Reset to product default settings

1] User will get configure icon next to search box on top of table like show below

2] user click on it and he gets dropdown with options like below

3] User clicks on "Configure grid" option and below modal dialog box will open.
For start we allow user to stick only 2 columns in table.

Once the 2 column limit reached we will disable the stick(lock) icon for other columns and give a tooltip for the same as shown below.

[mayank99]

hi @DineshBodewar, have you seen the column manager that already exists?
https://itwin.github.io/iTwinUI-react/?path=/story/core-table--column-manager

It handles just the toggling part, but could be useful in the meantime.

Also our table already supports reordering columns by just dragging the headers.

As for the rest, I think you could build it yourself because we provide each of those individual pieces to you and our Table is fully controlled.

[FlyersPh9]

The option for a user to stick / unstick a column from within the column manager was raised by another UX team member today.

[r100-stack]

Technically, users can pass your custom ColumnManger type UIs using the Header property in the column object. For UI ideas, you can refer to a similar UI implementation here.

While this is technically possible, some additional functionality from our side will likely be missing if users directly pass the Header property. E.g.:

iTwinUI/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx

Lines 82 to 90 in 9182303

	// Triggers an update to resize the widths of all visible columns
	dispatch({ type: tableResizeStartAction });
	// If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
	// and table is scrolled to the very left which means our visibility dropdown menu is not visible.
	// So for better UX we need to scroll to that dropdown menu.
	queueMicrotask(() => {
	buttonRef.current?.scrollIntoView({ block: 'nearest' });
	});

So ideally, if there is still such a use case, we could consider easier ways for users to pass custom UIs and perform column manager type modifications easily.

@DineshBodewar Please give an update if this is still a valid use-case.

[mayank99]

@rohan-kadkol This is a valid recurring case, we don't really need an "update".

I already mentioned above that it is possible to achieve in user-land, but the point of this issue is that we should improve our built-in column manager.

It should support the following functionality:

• Show/hide columns (already supported, but not very flexible)
• Stick/unstick specific columns
• Reorder columns
• Reset everything back to default
• Custom actions (like grouping)

Since it is new, complicated functionality, it may be better suited for NewTable (#1144).

[r100-stack]

Sounds good, added a point for this in #1144's issue description as a possible consideration.