Tencent / Tencent/tdesign-react
[EnhancedTable] table 能增加line 连接线吗
Open
Nobody has claimed this yet.
💪🏻 enhancement
- Dominant language
- TypeScript
- Stars
- 965
- Forks
- 373
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 17
Description
这个功能解决了什么问题
期望能增加类似Tree组件的line方式展示, 优化表格的层级较深时的展示. 比如这种效果:
尝试纯css画出这种带连线的tree效果, 发现很难实现(通过row/className等信息 不知道节点之间的关系).
参考Tree, 再加计算isLastChild/parents信息, 写了个demo, 大体实现了效果. 缺点就是要额外遍历下数据.
你建议的方案是什么
建议:
- cell/render/rowClassName 等方法里面除了row data, 还增加
rowState(包含 level/expanded/parent 等状态). - 类似Tree组件, 增加个 props
line
React社区的组件库好像还没有table支持这个效果的, 感觉是一个可以加分的东西.
Thanks
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox demo to understand the requested table-line appearance, then compare the proposed state and line behavior with TreeItem.tsx around line 176. Done means the EnhancedTable can represent nested rows with tree-style connecting lines and expose the requested row state or equivalent props, with behavior verified against the demonstrated case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100