Editable table: Improve current Drag n Drop approach - Githubissues

epam / UUI

React-based components and accelerators library built by EPAM Systems.

https://uui.epam.com/

MIT License

178 stars 65 forks source link

Editable table: Improve current Drag n Drop approach #2266

Open DzmitryTrubchyk opened 4 months ago

DzmitryTrubchyk commented 4 months ago

Create 2 concepts, one of them will be applied as approved approach:

Concept based on design (open in Figma)

Add indicators of levels for tree table
Improve all styles for draggable item (make opacity, leave 1st cell visible, etc. as per design)
Highlight parent level rows in light blue

See details on image below

Concept with fixed position by X coordinate of draggable row

Add indicators of levels for tree table
Improve styles for draggable item (make opacity, but keep row cells fully visible)
Fix of draggable row by X coordinate

DzmitryTrubchyk commented 4 months ago

I would suggest to improve following points, during this issue:

Remove bg from hover and active state for rows. See details on image:

CC @Kuznietsov, @AlekseyManetov