feat(table): table新增自定义行 #2390
feat(table): table新增自定义行 #2390
Conversation
Walkthrough该更改主要新增了一个名为 Changes
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Additional comments not posted (3)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (3)
src/packages/table/table.tsx (1)
Line range hint
79-79: 建议使用可选链来提高代码安全性。- defaultProps.noData = locale.noData + defaultProps.noData = locale?.noDatasrc/packages/table/table.taro.tsx (2)
Line range hint
82-82: 优化建议：使用可选链静态分析工具建议在此处使用可选链以增强代码的安全性和可读性。例如，
item.sorter && !sortedMapping.current[item.key]可以改为item.sorter?.(!sortedMapping.current[item.key])。- if (item.sorter && !sortedMapping.current[item.key]) { + if (item.sorter?.(!sortedMapping.current[item.key])) {
Line range hint
103-112: 增强键盘访问性为了支持仅使用键盘的用户导航，建议在使用鼠标事件的同时增加对应的键盘事件。这不仅是一个好的实践，也是无障碍设计的要求。
<div className={classNames( `${headerClassPrefix}-th`, cellClasses(item), getStickyClass(item.key) )} key={item.key} onClick={() => handleSorterClick(item)} + onKeyUp={() => handleSorterClick(item)} style={getStickyStyle(item.key)} > {item.title} {item.sorter && (sorterIcon || <ArrowDown width="12px" height="12px" />)} </div>
src/packages/table/demo.taro.tsx
Outdated
| import Demo11 from './demos/taro/demo11' | ||
| import Demo12 from './demos/taro/demo12' | ||
| import Demo13 from './demos/taro/demo13' | ||
| import Demo14 from './demos/h5/demo14' |
There was a problem hiding this comment.
导入路径错误，应从 Taro 特定的目录导入。
- import Demo14 from './demos/h5/demo14'
+ import Demo14 from './demos/taro/demo14'Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import Demo14 from './demos/h5/demo14' | |
| import Demo14 from './demos/taro/demo14' |
| const { rowRender } = item | ||
| if (rowRender && typeof rowRender === 'function') { | ||
| return rowRender(item, rowIndex) | ||
| } |
There was a problem hiding this comment.
Tip
Codebase Verification
需要增加键盘访问性支持。
在文件 src/packages/table/table.tsx 中，发现存在 onClick 事件，但缺少相应的键盘事件处理程序（如 onKeyUp、onKeyDown 或 onKeyPress）。为了确保组件的可访问性，请添加这些键盘事件处理程序。
onClick事件位置:onClick={() => handleSorterClick(item)}
Analysis chain
自定义行渲染逻辑正确。
但需要增加键盘访问性支持。
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the onClick event in the table has corresponding keyboard event handlers.
# Test: Search for onClick events in the file. Expect: Corresponding onKeyUp, onKeyDown, or onKeyPress events.
rg --type typescript $'onClick' src/packages/table/table.tsx
Length of output: 94
Script:
#!/bin/bash
# Description: Verify the onClick event in the table has corresponding keyboard event handlers.
# Test: Search for onClick events in the file. Expect: Corresponding onKeyUp, onKeyDown, or onKeyPress events.
rg 'onClick' src/packages/table/table.tsx
Length of output: 91
Script:
#!/bin/bash
# Description: Verify the presence of keyboard event handlers corresponding to the onClick event in the table component.
# Test: Search for onKeyUp, onKeyDown, or onKeyPress events in the file.
rg 'on(KeyUp|KeyDown|KeyPress)' src/packages/table/table.tsx
Length of output: 62
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## next #2390 +/- ##
==========================================
- Coverage 85.99% 85.98% -0.01%
==========================================
Files 217 217
Lines 22823 22827 +4
Branches 2539 2540 +1
==========================================
+ Hits 19626 19628 +2
- Misses 3192 3194 +2
Partials 5 5 ☔ View full report in Codecov by Sentry. |
| const [columns] = useState<Array<TableColumnProps>>([ | ||
| { | ||
| title: '姓名', | ||
| key: 'name', | ||
| align: 'center', | ||
| }, | ||
| { | ||
| title: '性别', | ||
| key: 'gender', | ||
| }, | ||
| { | ||
| title: '学历', | ||
| key: 'record', | ||
| }, | ||
| ]) |
There was a problem hiding this comment.
优化列定义
columns 数组是常量，不需要使用 useState 来定义。可以直接定义为常量数组以减少不必要的状态管理复杂性。
- const [columns] = useState<Array<TableColumnProps>>([
+ const columns: Array<TableColumnProps> = [
...
- ])
+ ]Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [columns] = useState<Array<TableColumnProps>>([ | |
| { | |
| title: '姓名', | |
| key: 'name', | |
| align: 'center', | |
| }, | |
| { | |
| title: '性别', | |
| key: 'gender', | |
| }, | |
| { | |
| title: '学历', | |
| key: 'record', | |
| }, | |
| ]) | |
| const columns: Array<TableColumnProps> = [ | |
| { | |
| title: '姓名', | |
| key: 'name', | |
| align: 'center', | |
| }, | |
| { | |
| title: '性别', | |
| key: 'gender', | |
| }, | |
| { | |
| title: '学历', | |
| key: 'record', | |
| }, | |
| ] |
| height: '100px', | ||
| text: '这里是自定义行', | ||
| Component: (props: any) => { | ||
| return ( | ||
| <div style={{ height: props.height }}> | ||
| <div | ||
| style={{ | ||
| position: 'absolute', | ||
| height: props.height, | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| borderBottom: | ||
| '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | ||
| }} | ||
| > | ||
| {props.text} | ||
| </div> | ||
| </div> | ||
| ) | ||
| }, | ||
| rowRender: (item: any) => { | ||
| const { Component, ...rest } = item | ||
| return <Component {...rest} /> | ||
| }, |
There was a problem hiding this comment.
优化自定义组件的实现
将 data 数组中定义的自定义组件提取到外部，以增强代码的可读性和可维护性。
+ const CustomRow = (props: any) => (
+ <div style={{ height: props.height }}>
+ <div
+ style={{
+ position: 'absolute',
+ height: props.height,
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderBottom: '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
+ }}
+ >
+ {props.text}
+ </div>
+ </div>
+ )
...
- Component: (props: any) => {
- return (
- <div style={{ height: props.height }}>
- <div
- style={{
- position: 'absolute',
- height: props.height,
- width: '100%',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- borderBottom:
- '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
- }}
- >
- {props.text}
- </div>
- </div>
- )
- },Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| height: '100px', | |
| text: '这里是自定义行', | |
| Component: (props: any) => { | |
| return ( | |
| <div style={{ height: props.height }}> | |
| <div | |
| style={{ | |
| position: 'absolute', | |
| height: props.height, | |
| width: '100%', | |
| display: 'flex', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| borderBottom: | |
| '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | |
| }} | |
| > | |
| {props.text} | |
| </div> | |
| </div> | |
| ) | |
| }, | |
| rowRender: (item: any) => { | |
| const { Component, ...rest } = item | |
| return <Component {...rest} /> | |
| }, | |
| height: '100px', | |
| text: '这里是自定义行', | |
| Component: CustomRow, | |
| rowRender: (item: any) => { | |
| const { Component, ...rest } = item | |
| return <Component {...rest} /> | |
| }, | |
| ``` | |
| ```tsx | |
| const CustomRow = (props: any) => ( | |
| <div style={{ height: props.height }}> | |
| <div | |
| style={{ | |
| position: 'absolute', | |
| height: props.height, | |
| width: '100%', | |
| display: 'flex', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| borderBottom: '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | |
| }} | |
| > | |
| {props.text} | |
| </div> | |
| </div> | |
| ) |
| const [data] = useState([ | ||
| { | ||
| name: 'Tom', | ||
| gender: '男', | ||
| record: '小学', | ||
| }, | ||
| { | ||
| height: '100px', | ||
| text: '这里是自定义行', | ||
| Component: (props: any) => { | ||
| return ( | ||
| <div style={{ height: props.height }}> | ||
| <div | ||
| style={{ | ||
| position: 'absolute', | ||
| height: props.height, | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| borderBottom: | ||
| '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | ||
| }} | ||
| > | ||
| {props.text} | ||
| </div> | ||
| </div> | ||
| ) | ||
| }, | ||
| rowRender: (item: any) => { | ||
| const { Component, ...rest } = item | ||
| return <Component {...rest} /> | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Lucy', | ||
| gender: '女', | ||
| record: '本科', | ||
| }, | ||
| { | ||
| name: 'Jack', | ||
| gender: '男', | ||
| record: '高中', | ||
| }, | ||
| ]) |
There was a problem hiding this comment.
优化数据定义
data 数组是常量，不需要使用 useState 来定义。可以直接定义为常量数组以减少不必要的状态管理复杂性。
- const [data] = useState([
+ const data = [
...
- ])
+ ]Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [data] = useState([ | |
| { | |
| name: 'Tom', | |
| gender: '男', | |
| record: '小学', | |
| }, | |
| { | |
| height: '100px', | |
| text: '这里是自定义行', | |
| Component: (props: any) => { | |
| return ( | |
| <div style={{ height: props.height }}> | |
| <div | |
| style={{ | |
| position: 'absolute', | |
| height: props.height, | |
| width: '100%', | |
| display: 'flex', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| borderBottom: | |
| '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | |
| }} | |
| > | |
| {props.text} | |
| </div> | |
| </div> | |
| ) | |
| }, | |
| rowRender: (item: any) => { | |
| const { Component, ...rest } = item | |
| return <Component {...rest} /> | |
| }, | |
| }, | |
| { | |
| name: 'Lucy', | |
| gender: '女', | |
| record: '本科', | |
| }, | |
| { | |
| name: 'Jack', | |
| gender: '男', | |
| record: '高中', | |
| }, | |
| ]) | |
| const data = [ | |
| { | |
| name: 'Tom', | |
| gender: '男', | |
| record: '小学', | |
| }, | |
| { | |
| height: '100px', | |
| text: '这里是自定义行', | |
| Component: (props: any) => { | |
| return ( | |
| <div style={{ height: props.height }}> | |
| <div | |
| style={{ | |
| position: 'absolute', | |
| height: props.height, | |
| width: '100%', | |
| display: 'flex', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| borderBottom: | |
| '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))', | |
| }} | |
| > | |
| {props.text} | |
| </div> | |
| </div> | |
| ) | |
| }, | |
| rowRender: (item: any) => { | |
| const { Component, ...rest } = item | |
| return <Component {...rest} /> | |
| }, | |
| }, | |
| { | |
| name: 'Lucy', | |
| gender: '女', | |
| record: '本科', | |
| }, | |
| { | |
| name: 'Jack', | |
| gender: '男', | |
| record: '高中', | |
| }, | |
| ] |
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Demo14组件以展示表格组件的自定义行渲染逻辑。TableDemo组件中的翻译字符串，支持自定义行功能。改进
rowRender函数的条件检查，以支持自定义行渲染逻辑。导出声明
TableColumnProps类型以便于表格列配置。