epam / epam/UUI

Editable table: Improve current Drag n Drop approach

Open
#2,266 2 comments 0 reactions 1 assignee Claimed by @Kuznietsov View on GitHub
Data Table Drag n Drop feature
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

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

1. **Concept based on design ([open in Figma](https://www.figma.com/design/cAd3iaIW4JxJapIVTrE96b/UUI-%E2%80%93-Tables-%26-Filters-(Demo-%26-Examples)?node-id=6432-89263&t=sV4k6vUGFlmqJtB6-4))**

- 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
![image](https://github.com/epam/UUI/assets/44213241/ac94af23-47ab-4ae7-b8ac-ee2265b5f48f)

2. **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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.