ant-design / ant-design/pro-components
๐[BUG] DragSortTable layout flicker when using in explanable table
- 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
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