[RFC] Table 支持可伸缩列
#48152
Replies: 5 comments 6 replies
-
这个可是收费功能(某些库) |
Beta Was this translation helpful? Give feedback.
0 replies
-
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
onCell: () => { // 单元格属性
style: { }
},
hidden: true // 是否渲染列
}] 试试 |
Beta Was this translation helpful? Give feedback.
1 reply
-
onResize -> onColumnResize |
Beta Was this translation helpful? Give feedback.
5 replies
-
onResizeChange |
Beta Was this translation helpful? Give feedback.
0 replies
-
resizable:{
minWidth:
maxWidth:
onChange: (type: start | end,dataIndex )
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
Table 底层支持可伸缩列,否则结合第三方库(例如 react-resizable) 会有一些问题
Motivation
rc-table 使用 colgroup 标签控制列宽,原生 colgroup 标签会对 width 做一些特殊处理,虽然挂在标签上的 width 是用户设置的 width,但和实际渲染出来的宽度是不同的。
现在的情况
但实际宽度是 [400px, 400px]
Detailed design
开启 resizable 时, tableLayout 为
fixed
(因为列增大时,其它任何列不应该被减小宽度)。colgroup 身上 style 的 width 为真实宽度,并且 column width 限制为 number 类型,不设置的话给个默认宽度。实现方式:column width 受控
Table
onColumnResize 返回的 width 是真实的宽度 px, 用户如果想保存到 localStorage 应该保存全部列的真实宽度。因为应使用真实的宽度 px 进行保存,否则像
columns=[{width: 100}, {width: 100}]
,onResize 后,得到一列是真实的,一列还是假的。Column
case
1、设定的列宽小于 Table 的宽度时
实际宽度为 [400px, 400px],当缩小第一列到 300 时,两列宽度加起来小于了表格的宽度 800 ,第二列应该变为 500,保持不小于 800。这样 onColumnResizeComplete 中的 columnKeyWidths 分别为 300px 和 500px。
......
Beta Was this translation helpful? Give feedback.
All reactions