[Data Views] drag and drop ordering for Filter properties and table column

[jayclydeTags]

What problem does this address?

Reordering table columns is cumbersome, especially when desired columns are located at the end.

Current:

What is your proposed solution?

Refer to Notion table. Notion's drag-and-drop feature for reordering table columns and properties offers a seamless and intuitive user experience.

Notion properties:

Table columns corresponding to properties order

[jayclydeTags]

Draggable appearance properties mockup.

credits to WordPress Design System.

[Mayank-Tripathi32]

I am working on implementing the draggable functionality using the above design mock up.

[Mayank-Tripathi32]

@jayclydeTags

I have few doubts regarding the mock-up, could you share link for it? Also, I have basic solution implemented but shouldn't it also persist through refreshes as well?

Also, Any reason to have draggability in hidden list?

[jayclydeTags]

@Mayank-Tripathi32 here's the mock-up https://www.figma.com/design/QLc1Di5xCp063RkXgS6FRZ/WordPress-Design-System---Explorations?node-id=18312-17629&t=wIBTOCVnPUoNn5V7-1

I have basic solution implemented but shouldn't it also persist through refreshes as well?

It would be great if it were possible to make it persistent to save user preferences.

Any reason to have draggability in hidden list?

Draggability in a hidden list can provide a more intuitive user experience. This allows users to drag items directly from the hidden list to visible groups.

[Mayank-Tripathi32]

@jayclydeTags

It would be great if it were possible to make it persistent to save user preferences.

I think we can probably come up with a local storage solution or indexDb to store them, probably need to open separate PR on this.

Draggability in a hidden list can provide a more intuitive user experience. This allows users to drag items directly from the hidden list to visible groups.

Got it. Will make it possible to do that as well.

Also, I don't see any use case of Preview Size, So we can skip that I guess?

[jayclydeTags]

@Mayank-Tripathi32 Great!

Disregard the preview size for now.

[jasmussen]

Tentatively, the ItemGroup pattern suggested here, seems like a valid path forward.

It seems important the draggable functionality gets implemented well into the ItemGroup itself, so that other consumers of this component can opt-in to the handles contextually. A quick CC to @WordPress/gutenberg-design and @WordPress/gutenberg-components as well, for any input.

[Mayank-Tripathi32]

I’ll work on itemGroup and implement the required drag-and-drop functionality there. Since it’s used in multiple places, I’ll make sure to update all relevant instances afterwards.

[mirka]

A quick CC to @WordPress/gutenberg-design and @WordPress/gutenberg-components as well, for any input.

Adding drag & drop features to ItemGroup is probably done best as part of the overhaul in #64445, as there will presumably be a lot of API changes and considerations there.

I'm also thinking it may be better to have a more generic utility component for drag & drop, rather than baking it into ItemGroup. Maybe a simplified version of something like dnd-kit.

@Mayank-Tripathi32 If you're going to work on implementing an ad hoc drag & drop feature to Data Views, we need to make sure that it is well-isolated from the existing component logic. Currently, the drag & drop code in #66981 will be hard to refactor away from, because it is interwoven with the component code and the responsibilities are muddled. Also note that any persistence concerns should be the responsibility of each consumer, not the drag & drop logic. It may help to see how some drag & drop libraries design their APIs, to get an idea of how the logic should be contained and interfaced with.

[Mayank-Tripathi32]

I think this can be tracked under GitHub Issue #63128.

I'm also thinking it may be better to have a more generic utility component for drag & drop, rather than baking it into ItemGroup. Maybe a simplified version of something like dnd-kit.

I’ll research dnd-kit and explore creating a utility component for this. We’ll likely need a Higher-Order Component (HOC) that can be easily reused.

Additionally, I’m looking into GitHub Issue #57669 to address making properties persistent.