ant-design / ant-design/pro-components

๐Ÿ›[BUG] DragSortTable layout flicker when using in explanable table

Open
#8,232 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

ๆ้—ฎๅ‰ๅ…ˆ็œ‹็œ‹๏ผš

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### ๐Ÿ› bug ๆ่ฟฐ

when create or take any action to make DragSortTable component re-render it alway filking a bit. so I was try to change DragSortTable to normal ProTable, it work normally but when I change back it start flicking again.

### ๐Ÿ“ท ๅค็Žฐๆญฅ้ชค

https://github.com/ant-design/pro-components/assets/50583924/5033a1fd-c4d1-4b96-bbed-47bf0af271bc

### ๐Ÿž ๆœŸๆœ›็ป“ๆžœ

[code sand box](https://codesandbox.io/p/sandbox/friendly-beaver-yhpghx?file=%2FApp.tsx%3A4%2C36&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltrmc7vq00062v6jieh1gxv3%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltrmc7vq00022v6j52zv8o9r%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltrmc7vq00032v6jspvloq4m%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltrmc7vq00052v6j7ly3i2f3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltrmc7vq00022v6j52zv8o9r%2522%253A%257B%2522id%2522%253A%2522cltrmc7vq00022v6j52zv8o9r%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltrme3fq005v2v6jkdrrudse%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A36%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A36%257D%255D%252C%2522filepath%2522%253A%2522%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltrme3fq005v2v6jkdrrudse%2522%257D%252C%2522cltrmc7vq00052v6j7ly3i2f3%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltrmc7vq00042v6jcwk142pg%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltrmc7vq00052v6j7ly3i2f3%2522%252C%2522activeTabId%2522%253A%2522cltrmc7vq00042v6jcwk142pg%2522%257D%252C%2522cltrmc7vq00032v6jspvloq4m%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltrmc7vq00032v6jspvloq4m%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### ๐Ÿ’ป ๅค็Žฐไปฃ็ 

### ยฉ ็‰ˆๆœฌไฟกๆฏ

- ProComponents ็‰ˆๆœฌ: [e.g. 4.0.0] 2.6.49
- NextJS
- chrome lastest version
- ๅผ€ๅ‘็Žฏๅขƒ [e.g. mac OS] ubuntu

### ๐Ÿš‘ ๅ…ถไป–ไฟกๆฏ

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and its App.tsx example to reproduce the flicker when DragSortTable is rendered inside an expandable table. Compare the behavior after actions that trigger re-rendering with the normal ProTable behavior. Done means the DragSortTable layout remains stable without visible flicker in the provided reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.