ProTable 进阶表格
使用场景#
ProTable 负责将数据渲染为 HTML 表格，其核心功能是将结构化的数据用表格的方式展现在页面中，并以组件 props 的形式提供了丰富的表格功能，例如排序，过滤，滚动，锁列，行多选等。
在实现层面，ProTable 是对 ali-react-table 的封装，除了保留 基础的表格特性 之外，ProTable 也默认集成了 大量表格功能拓展 。
注意事项#
- 推荐为 ProTable 设置
primaryKey作为每一行数据的唯一标识字段 - 推荐为 ProTable 设置
defaultColumnWidth作为每一列的默认宽度 - columns 只支持普通的数组写法
- 可以通过
ProTable.parseColumns从 JSX 中解析出 columns 数组
- 可以通过
- 推荐使用
column.code来代替column.dataIndex- 两者作用相同
- 本页文档示例中 code 和 dataIndex 两种用法都有出现，但在实际业务中推荐使用 code
设置行属性#
通过 getRowProps 可以设置 tr 元素的属性
<ProTable
getCellProps={(row, rowIndex) => {
return {
className: 'highlight',
style: { color: '#134589' },
onClick: (e) => {},
onDoubleClick: (e) => {},
onContextMenu: (e) => {},
};
}}
/>
表格的拓展功能#
ProTable 集成了所有 ali-react-table 默认提供的表格功能，例如行多选、树状模式、行详情等。 这些功能的相关文档很多，在本页面中就不再重复，具体请移步 ali-react-table 相关文档 。
在复杂场景下，例如需要对表格添加自定义的拓展，可以使用 BaseTable 组件，API 可以 在这里查看 。
BaseTable 引入方式为 import { BaseTable } from '@rexd/core'。 @rexd/core 导出的 BaseTable 组件用法与开源版本表格相同，但 @rexd/core 对表格的默认样式进行了定制。此外，切换到 BaseTable 时，注意 BaseTable 只支持 column.code。
虚拟滚动#
数据量较大时，ProTable 会自动开启虚拟滚动。
- 超过 100 行自动开启纵向的虚拟滚动
- 超过 100 列自动开启横向的虚拟滚动
如果不需要虚拟滚动，可以设置 useVirtual={false} 进行关闭。 useVirtual 用法详见 虚拟滚动说明 。
表格顶部工具栏#
props.toolbar 非空时，ProTable 将在表格 上方 渲染一个工具栏。 props.toolbar 将作为 Toolbar 组件的 props。例如 toolbar.leftActions 可以在顶部工具栏中添加一些按钮，toolbar.tipNode 可以添加提示文案，其他字段详见 Toolbar 的文档。
此外，ProTable 支持通过 toolbar.totalCount 快速设置 共 n 条数据 的文案。
分页#
ProTable 默认使用的是前端分页，即分页状态会影响表格展示的数据。
如果不需要前端分页，可以设置 pagination={{ keepDataSource: true }} 。该选项适用于后端分页的情况，例如每次改变页码后页面重新发起请求获取下一页的数据。
pagination 对象中的其他字段会透传至 ProTable 内部的 <Pagination /> 组件。
后端分页示例：
<ProTable
dataSource={dataSource}
columns={columns}
pagination={{
// 禁用前端分页
keepDataSource: true,
// 总数据量
total: 2000,
// 当前页码
current: 4,
onChange(nextPage) {
// 根据新的页码去请求数据
fetchData(nextPage).then(handleData);
},
}}
/>
表格页脚工具栏#
props.footer 非空时，ProTable 将在表格 下方 渲染一个工具栏。 props.footer 将作为 Toolbar 组件的 props。例如 footer.leftActions 可以添加一些按钮，footer.tipNode 可以添加提示文案。
不设置 footer.rightNode 时，表格页脚右侧会展示内置的翻页器组件（如果 pagination 非空的话）。
ProTable 兼容的 Table 用法#
- ProTable 中的列配置兼容原有的 column.cell 用法
- ProTable 对
column.dataIndex进行了兼容，其作用与column.code和column.dataIndex相同 - ProTable 对排序 sort 中的
code/dataIndex进行了兼容 - ProTable 兼容
footerActions，作用与footer.leftActions相同
用法示例#
基本表格#
通过 dataSource 设置表格的数据源，通过 columns 设置表格的列。 注意 column.dataIndex 要与 dataSource 中的数据字段相对应。
| 公司名称 | 金额 | 金融机构 | 申请人 |
|---|
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole |
noInline
const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];function Basic() {const dataSource1 = [{id: '1',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '招商银行丨杭州分行',applier: 'James Collier',},{id: '2',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '建设银行丨未来科技城',applier: 'Philip Burke',},{id: '3',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '交通银行丨浙大路支行',applier: 'Wesley Cruz',},{id: '4',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '招商银行丨庆春路支行',applier: 'Billy Horton',},{id: '5',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '招商银行丨文一路分行',applier: 'Paul Tran',},{id: '6',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '农业银行丨杭州分行',applier: 'Anna Poole',},];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];return <ProTable dataSource={dataSource1} columns={columns1} />;}render(<Basic />)
表格样式#
ProTable 提供了 compact、zebra、bordered 三种可选样式，可以通过 className 来使用这些样式
<ProTable
dataSource={dataSource}
columns={columns}
className="compact"
hasHeader={true}
isLoading={false}
/>| 公司名称 | 金额 | 金融机构 | 申请人 |
|---|
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole |
noInline
const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];function TableStyles() {const [compact, setCompact] = useState(true);const [zebra, setZebra] = useState(false);const [bordered, setBordered] = useState(false);const [hasHeader, setHasHeader] = useState(true);const [isLoading, setIsLoading] = useState(false);return (<div><div style={{ marginBottom: 16 }}><Checkbox checked={compact} onChange={() => setCompact(!compact)}>紧凑型</Checkbox><Checkbox style={{ marginLeft: 16 }} checked={zebra} onChange={() => setZebra(!zebra)}>斑马线</Checkbox><Checkbox style={{ marginLeft: 16 }} checked={bordered} onChange={() => setBordered(!bordered)}>边框</Checkbox><Checkbox style={{ marginLeft: 40 }} checked={hasHeader} onChange={() => setHasHeader(!hasHeader)}>展示表头</Checkbox><Checkbox style={{ marginLeft: 16 }} checked={isLoading} onChange={() => setIsLoading(!isLoading)}>加载状态</Checkbox></div><pre>{`<ProTable` +`\n dataSource={dataSource}` +`\n columns={columns}` +`\n className="${cx({ compact, zebra, bordered })}" ` +`\n hasHeader={${hasHeader}} ` +`\n isLoading={${isLoading}} ` +`\n/>`}</pre><ProTableclassName={cx({ compact, zebra, bordered })}isLoading={isLoading}hasHeader={hasHeader}dataSource={dataSource1}columns={columns1}/></div>);}render(<TableStyles />)
数据为空#
dataSource 的长度为 0 时，表格将展现空状态。
| 公司名称 | 部门名称 | 团建目的地 | 当地导游 |
|---|
 没有符合查询条件的数据 请修改条件后重新查询 |
noInline
const columns2 = [{ code: 'name', name: '公司名称', width: 200 },{ code: 'dept', name: '部门名称', width: 180 },{ code: 'dest', name: '团建目的地', width: 160 },{ code: 'guide', name: '当地导游', width: 160 },];function Empty() {return <ProTable dataSource={[]} columns={columns2} />;}render(<Empty />)
表格数据加载#
设置 isLoading=true 即可展示加载动画。
| 公司名称 | 部门名称 | 团建目的地 | 当地导游 |
|---|
| 蚂蚁金服 | 消费者事业部-淘宝-UED | South Maddison | Don Moreno |
| 阿里巴巴(中国)有限公司 | 航旅事业部-酒店业务 | Emilhaven | Douglas Richards |
| 菜鸟网络 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee |
| 蚂蚁金服 | 信息平台部-用户体验部 | 杭州千岛湖 | Eric Castillo |
| 阿里巴巴(中国)有限公司 | 消费者事业部-淘宝-UED | East Karl | Herbert Patton |
noInline
const dataSource2 = [{ name: '蚂蚁金服', dept: '消费者事业部-淘宝-UED', dest: 'South Maddison', guide: 'Don Moreno' },{ name: '阿里巴巴(中国)有限公司', dept: '航旅事业部-酒店业务', dest: 'Emilhaven', guide: 'Douglas Richards' },{ name: '菜鸟网络', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' },{ name: '蚂蚁金服', dept: '信息平台部-用户体验部', dest: '杭州千岛湖', guide: 'Eric Castillo' },{ name: '阿里巴巴(中国)有限公司', dept: '消费者事业部-淘宝-UED', dest: 'East Karl', guide: 'Herbert Patton' },];const columns2 = [{ code: 'name', name: '公司名称', width: 200 },{ code: 'dept', name: '部门名称', width: 180 },{ code: 'dest', name: '团建目的地', width: 160 },{ code: 'guide', name: '当地导游', width: 160 },];function Loading() {return <ProTable isLoading dataSource={dataSource2} columns={columns2} />;}render(<Loading />)
表格页脚#
设置 footerDataSource 后可以展示表格页脚， footerDataSource 中的字段一般与 dataSource 相同
| 序号 | 公司名称 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 操作 |
|---|
| 1 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 2 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 3 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 4 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 5 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 6 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 7 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 8 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 9 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 10 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 11 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 12 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 13 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 14 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 15 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 16 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 17 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 18 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 19 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 20 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 21 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 22 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 23 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 24 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 25 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 26 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 27 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 28 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 29 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 30 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 31 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 32 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 33 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 34 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 35 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 36 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 37 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 38 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 39 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 40 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 41 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 42 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 43 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 44 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 45 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 46 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 47 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 48 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 49 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 50 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 51 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 52 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 53 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 54 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 55 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 56 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 57 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 58 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 59 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 60 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 合计 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 批量操作 |
noInline
function repeat(arr, n) {let result = [];for (let i = 0; i < n; i++) {result = result.concat(arr);}return result;}const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const OperationsDiv = styled.div`display: flex;height: 20px;align-items: center;.item {height: 20px;cursor: pointer;color: #3858cf;display: flex;align-items: center;&.danger {color: #eb4141;}}.sep {height: 10px;width: 1px;margin-left: 12px;margin-right: 12px;background: #eeeeee;}`;function CaretDown(props) {return (<svgfocusable="false"preserveAspectRatio="xMidYMid meet"fill="currentColor"width="16"height="16"viewBox="0 0 32 32"{...props}><path d="M24 12L16 22 8 12z" /></svg>);}function renderOptions() {return (<OperationsDiv><div className="item">编辑</div><div className="sep" /><div className="item danger">删除</div><div className="sep" /><Popuptarget={<div className="item">更多<CaretDown style={{ color: '#A6A6A6' }} /></div>}><MenuautoDismissPopupstyle={{ minWidth: 100 }}dataSource={'1,2,3,4'.split(',').map((n) => ({key: `Option ${n}`,label: `Option ${n}`,}))}/></Popup></OperationsDiv>);}const operationCol = {lock: true,name: '操作',render: renderOptions,width: 200,};function TableFooter() {return (<ProTablestyle={{ height: 385, overflow: 'auto' }}dataSource={repeat(dataSource1, 10)}footerDataSource={[{footerRow: true,id: 'all',name: '阿里巴巴网络技术有限公司',amount: '600,000.00(CNY)',dept: '招商银行丨杭州分行',applier: 'James Collier',},]}getRowProps={(row) => {if (row.footerRow) {return { style: { '--bgcolor': 'var(--hover-bgcolor)' } };}}}columns={[{name: '序号',width: 70,align: 'right',lock: true,getValue(row, rowIndex) {if (row.footerRow) {return '合计';}return String(rowIndex + 1);},},{ lock: true, code: 'name', width: 200, name: '公司名称' },...repeat([{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },],5,),{...operationCol,render(v, row, rowIndex) {if (row.footerRow) {return '批量操作';}return operationCol.render(v, row, rowIndex);},},]}/>);}render(<TableFooter />)
表格排序#
提供排序功能，便于查看数据。
公司名称 | 支付实体 | 金融机构 | 申请人 | 操作 |
|---|
| 阿里巴巴网络技术有限公司5 | 蚂蚁金服（中国） | 招商银行丨文一路分行 | Herbert Patton | 编辑 删除 更多 |
| 阿里巴巴网络技术有限公司4 | 蚂蚁金服（中国） | 招商银行丨庆春路支行 | Eric Castillo | 编辑 删除 更多 |
| 阿里巴巴网络技术有限公司3 | 蚂蚁金服（中国） | 交通银行丨浙大路支行 | Douglas Lee | 编辑 删除 更多 |
| 阿里巴巴网络技术有限公司2 | 蚂蚁金服（中国） | 建设银行丨未来科技城 | Douglas Richards | 编辑 删除 更多 |
| 阿里巴巴网络技术有限公司1 | 蚂蚁金服（中国） | 招商银行丨杭州分行 | Don Moreno | 编辑 删除 更多 |
noInline
const dataSource3 = [{ name: '阿里巴巴网络技术有限公司1', entity: '蚂蚁金服（中国）', dept: '招商银行丨杭州分行', applier: 'Don Moreno' },{ name: '阿里巴巴网络技术有限公司2', entity: '蚂蚁金服（中国）', dept: '建设银行丨未来科技城', applier: 'Douglas Richards' },{ name: '阿里巴巴网络技术有限公司3', entity: '蚂蚁金服（中国）', dept: '交通银行丨浙大路支行', applier: 'Douglas Lee' },{ name: '阿里巴巴网络技术有限公司4', entity: '蚂蚁金服（中国）', dept: '招商银行丨庆春路支行', applier: 'Eric Castillo' },{ name: '阿里巴巴网络技术有限公司5', entity: '蚂蚁金服（中国）', dept: '招商银行丨文一路分行', applier: 'Herbert Patton' },];const OperationsDiv = styled.div`display: flex;height: 20px;align-items: center;.item {height: 20px;cursor: pointer;color: #3858cf;display: flex;align-items: center;&.danger {color: #eb4141;}}.sep {height: 10px;width: 1px;margin-left: 12px;margin-right: 12px;background: #eeeeee;}`;function CaretDown(props) {return (<svgfocusable="false"preserveAspectRatio="xMidYMid meet"fill="currentColor"width="16"height="16"viewBox="0 0 32 32"{...props}><path d="M24 12L16 22 8 12z" /></svg>);}function renderOptions() {return (<OperationsDiv><div className="item">编辑</div><div className="sep" /><div className="item danger">删除</div><div className="sep" /><Popuptarget={<div className="item">更多<CaretDown style={{ color: '#A6A6A6' }} /></div>}><MenuautoDismissPopupstyle={{ minWidth: 100 }}dataSource={'1,2,3,4'.split(',').map((n) => ({key: `Option ${n}`,label: `Option ${n}`,}))}/></Popup></OperationsDiv>);}const operationCol = {lock: true,name: '操作',render: renderOptions,width: 200,};const columns3 = [{code: 'name',name: '公司名称',width: 200,features: { sortable: true },},{ code: 'entity', name: '支付实体', width: 160 },{code: 'dept',name: '金融机构',width: 160,features: { sortable: true },},{code: 'applier',name: '申请人',width: 160,features: { sortable: true },},operationCol,];function Sort() {return (<ProTabledataSource={dataSource3}columns={columns3}sort={{highlightColumnWhenActive: true,mode: 'single',defaultSorts: [{ code: 'name', order: 'desc' }],}}/>);}render(<Sort />)
表格行单选#
| 公司名称 | 金额 | 金融机构 | 申请人 |
|---|
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole |
noInline
const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];function SingleSelect() {const [value, onChange] = useState('1');return (<ProTableprimaryKey="id"dataSource={dataSource1}columns={columns1}singleSelect={{// 非受控用法 defaultValuevalue,onChange,isDisabled(row) {return Number(row.id) % 3 === 0;},clickArea: 'cell',}}/>);}render(<SingleSelect />)
表格行多选#
点击复选框时，按住 shift 键可以进行批量选择/反选。
| 公司名称 | 金额 | 金融机构 | 申请人 |
|---|
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | |
| 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole |
noInline
const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];function MultipleSelect() {const [value, onChange] = useState(['1', '3']);return (<ProTableprimaryKey="id"dataSource={dataSource1}columns={columns1}multiSelect={{// 非受控用法 defaultValuevalue,onChange,isDisabled(row) {return row.id === '4';},highlightRowWhenSelected: true,clickArea: 'row',}}/>);}render(<MultipleSelect />)
树形表格#
让表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格。
| 标题 | 部门名称 | 团建目的地 | 当地导游 | 操作 |
|---|
一级标题 | 消费者事业部-淘宝-UED | South Maddison | Don Moreno | 编辑 删除 更多 |
一级标题 | 航旅事业部-酒店业务 | Emilhaven | Douglas Richards | 编辑 删除 更多 |
一级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 |
一级标题 | 信息平台部-用户体验部 | 杭州千岛湖 | Eric Castillo | 编辑 删除 更多 |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 |
三级标题 | 盒马产品技术部-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 |
三级标题 | 盒马产品技术部-前端 | 云南大理 | Douglas Lee | 编辑 删除 更多 |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 |
一级标题 | 消费者事业部-淘宝-UED | East Karl | Herbert Patton | 编辑 删除 更多 |
noInline
function makeChildren(prefix) {return [{id: `${prefix}-1`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',children: [{id: `${prefix}-1-1`,title: '三级标题',dept: '盒马产品技术部-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `${prefix}-1-2`,title: '三级标题',dept: '盒马产品技术部-前端',dest: '云南大理',guide: 'Douglas Lee',},],},{id: `${prefix}-2`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',children: [{id: `${prefix}-2-1`,title: '三级标题',dept: '盒马产品技术部-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `${prefix}-2-2`,title: '三级标题',dept: '盒马产品技术部-前端',dest: '云南大理',guide: 'Douglas Lee',},],},{id: `${prefix}-3`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},];}const dataSource4 = [{ id: '1', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'South Maddison', guide: 'Don Moreno', children: makeChildren('1') },{ id: '2', title: '一级标题', dept: '航旅事业部-酒店业务', dest: 'Emilhaven', guide: 'Douglas Richards', children: makeChildren('2') },{ id: '3', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee', children: makeChildren('3') },{ id: '4', title: '一级标题', dept: '信息平台部-用户体验部', dest: '杭州千岛湖', guide: 'Eric Castillo', children: makeChildren('4') },{ id: '5', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'East Karl', guide: 'Herbert Patton' },];const OperationsDiv = styled.div`display: flex;height: 20px;align-items: center;.item {height: 20px;cursor: pointer;color: #3858cf;display: flex;align-items: center;&.danger {color: #eb4141;}}.sep {height: 10px;width: 1px;margin-left: 12px;margin-right: 12px;background: #eeeeee;}`;function CaretDown(props) {return (<svgfocusable="false"preserveAspectRatio="xMidYMid meet"fill="currentColor"width="16"height="16"viewBox="0 0 32 32"{...props}><path d="M24 12L16 22 8 12z" /></svg>);}function renderOptions() {return (<OperationsDiv><div className="item">编辑</div><div className="sep" /><div className="item danger">删除</div><div className="sep" /><Popuptarget={<div className="item">更多<CaretDown style={{ color: '#A6A6A6' }} /></div>}><MenuautoDismissPopupstyle={{ minWidth: 100 }}dataSource={'1,2,3,4'.split(',').map((n) => ({key: `Option ${n}`,label: `Option ${n}`,}))}/></Popup></OperationsDiv>);}const operationCol = {lock: true,name: '操作',render: renderOptions,width: 200,};const columns4 = [{ code: 'title', name: '标题', width: 200 },{ code: 'dept', name: '部门名称', width: 180 },{ code: 'dest', name: '团建目的地', width: 160 },{ code: 'guide', name: '当地导游', width: 160 },operationCol,];function TreeTable() {return (<ProTableprimaryKey="id"dataSource={dataSource4}columns={columns4}treeMode={{// 受控用法 openKeys, onChangeOpenKeysdefaultOpenKeys: ['4', '4-2'],}}/>);}render(<TreeTable />)
树形可选择表格#
| 标题 | 部门名称 | 团建目的地 | 当地导游 | 操作 |
|---|
一级标题 | 消费者事业部-淘宝-UED | South Maddison | Don Moreno | 编辑 删除 更多 | |
一级标题 | 航旅事业部-酒店业务 | Emilhaven | Douglas Richards | 编辑 删除 更多 | |
一级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
一级标题 | 信息平台部-用户体验部 | 杭州千岛湖 | Eric Castillo | 编辑 删除 更多 | |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
三级标题 | 盒马产品技术部-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
三级标题 | 盒马产品技术部-前端 | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee | 编辑 删除 更多 | |
一级标题 | 消费者事业部-淘宝-UED | East Karl | Herbert Patton | 编辑 删除 更多 |
noInline
function makeChildren(prefix) {return [{id: `${prefix}-1`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',children: [{id: `${prefix}-1-1`,title: '三级标题',dept: '盒马产品技术部-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `${prefix}-1-2`,title: '三级标题',dept: '盒马产品技术部-前端',dest: '云南大理',guide: 'Douglas Lee',},],},{id: `${prefix}-2`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',children: [{id: `${prefix}-2-1`,title: '三级标题',dept: '盒马产品技术部-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `${prefix}-2-2`,title: '三级标题',dept: '盒马产品技术部-前端',dest: '云南大理',guide: 'Douglas Lee',},],},{id: `${prefix}-3`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},];}const dataSource4 = [{ id: '1', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'South Maddison', guide: 'Don Moreno', children: makeChildren('1') },{ id: '2', title: '一级标题', dept: '航旅事业部-酒店业务', dest: 'Emilhaven', guide: 'Douglas Richards', children: makeChildren('2') },{ id: '3', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee', children: makeChildren('3') },{ id: '4', title: '一级标题', dept: '信息平台部-用户体验部', dest: '杭州千岛湖', guide: 'Eric Castillo', children: makeChildren('4') },{ id: '5', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'East Karl', guide: 'Herbert Patton' },];const OperationsDiv = styled.div`display: flex;height: 20px;align-items: center;.item {height: 20px;cursor: pointer;color: #3858cf;display: flex;align-items: center;&.danger {color: #eb4141;}}.sep {height: 10px;width: 1px;margin-left: 12px;margin-right: 12px;background: #eeeeee;}`;function CaretDown(props) {return (<svgfocusable="false"preserveAspectRatio="xMidYMid meet"fill="currentColor"width="16"height="16"viewBox="0 0 32 32"{...props}><path d="M24 12L16 22 8 12z" /></svg>);}function renderOptions() {return (<OperationsDiv><div className="item">编辑</div><div className="sep" /><div className="item danger">删除</div><div className="sep" /><Popuptarget={<div className="item">更多<CaretDown style={{ color: '#A6A6A6' }} /></div>}><MenuautoDismissPopupstyle={{ minWidth: 100 }}dataSource={'1,2,3,4'.split(',').map((n) => ({key: `Option ${n}`,label: `Option ${n}`,}))}/></Popup></OperationsDiv>);}const operationCol = {lock: true,name: '操作',render: renderOptions,width: 200,};const columns4 = [{ code: 'title', name: '标题', width: 200 },{ code: 'dept', name: '部门名称', width: 180 },{ code: 'dest', name: '团建目的地', width: 160 },{ code: 'guide', name: '当地导游', width: 160 },operationCol,];function TreeSelectTable() {return (<ProTabledataSource={dataSource4}columns={columns4}primaryKey="id"treeMode={{ defaultOpenKeys: ['4', '4-2'] }}treeSelect={{tree: dataSource4,defaultValue: ['1', '3'],// 受控用法 value, onChangerootKey: 'root',checkboxColumn: { lock: true },}}/>);}render(<TreeSelectTable />)
限定表格容器大小#
通过 style.width/style.maxWidth 来限定表格的宽度；通过 style.height/style.maxHeight 来限定高度。 限定宽度或高度时，要同时设置 style.overflow=auto。
| 序号 | 公司名称 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 金额 | 金融机构 | 申请人 | 操作 |
|---|
| 1 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 2 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 3 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 4 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 5 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 6 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 7 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 8 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 9 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 10 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 11 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 12 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 13 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 14 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 15 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 16 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 17 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 18 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 19 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 20 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 21 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 22 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 23 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 24 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 25 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 26 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 27 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 28 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 29 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 30 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 31 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 32 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 33 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 34 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 35 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 36 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 37 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 38 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 39 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 40 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 41 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 42 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 43 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 44 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 45 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 46 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 47 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 48 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 49 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 50 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 51 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 52 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 53 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 54 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
| 55 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | 编辑 删除 更多 |
| 56 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | 编辑 删除 更多 |
| 57 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz | 编辑 删除 更多 |
| 58 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton | 编辑 删除 更多 |
| 59 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran | 编辑 删除 更多 |
| 60 | 阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole | 编辑 删除 更多 |
noInline
function repeat(arr, n) {let result = [];for (let i = 0; i < n; i++) {result = result.concat(arr);}return result;}const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const OperationsDiv = styled.div`display: flex;height: 20px;align-items: center;.item {height: 20px;cursor: pointer;color: #3858cf;display: flex;align-items: center;&.danger {color: #eb4141;}}.sep {height: 10px;width: 1px;margin-left: 12px;margin-right: 12px;background: #eeeeee;}`;function CaretDown(props) {return (<svgfocusable="false"preserveAspectRatio="xMidYMid meet"fill="currentColor"width="16"height="16"viewBox="0 0 32 32"{...props}><path d="M24 12L16 22 8 12z" /></svg>);}function renderOptions() {return (<OperationsDiv><div className="item">编辑</div><div className="sep" /><div className="item danger">删除</div><div className="sep" /><Popuptarget={<div className="item">更多<CaretDown style={{ color: '#A6A6A6' }} /></div>}><MenuautoDismissPopupstyle={{ minWidth: 100 }}dataSource={'1,2,3,4'.split(',').map((n) => ({key: `Option ${n}`,label: `Option ${n}`,}))}/></Popup></OperationsDiv>);}const operationCol = {lock: true,name: '操作',render: renderOptions,width: 200,};function LimitedSize() {const nameCol = { lock: true, code: 'name', width: 200, name: '公司名称' };const repeats = [{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];return (<ProTablestyle={{ width: 800, height: 385, overflow: 'auto' }}dataSource={repeat(dataSource1, 10)}columns={[{name: '序号',width: 70,align: 'right',lock: true,getValue(_, rowIndex) {return String(rowIndex + 1);},},nameCol,...repeat(repeats, 5),operationCol,]}/>);}render(<LimitedSize />)
行分组#
标题 | 部门名称 | 团建目的地 | 当地导游 |
|---|
阿里巴巴网络技术有限公司 | |||
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee |
蚂蚁金服有限公司 | |||
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee |
二级标题 | 消费者事业部-淘宝-UED | 云南大理 | Douglas Lee |
其他 | |||
inline
function RowGrouping() {const dataSource5 = [{id: '1',title: '阿里巴巴网络技术有限公司',children: [{id: `1-1`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `1-2`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},],},{id: '2',title: '蚂蚁金服有限公司',children: [{id: `2-1`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},{id: `2-2`,title: '二级标题',dept: '消费者事业部-淘宝-UED',dest: '云南大理',guide: 'Douglas Lee',},],},{ id: '3', title: '其他' },];const columns5 = [{ code: 'title', name: '标题', width: 200 },{ code: 'dept', name: '部门名称', width: 180 },{ code: 'dest', name: '团建目的地', width: 160 },{ code: 'guide', name: '当地导游', width: 160 },];return (<ProTableprimaryKey="id"dataSource={dataSource5}columns={columns5}rowGrouping={{ defaultOpenKeys: ['1', '2'] }}/>);}
表头分组与列高亮#
| 职务 | 人数 | 年龄 | 占比 | 占比2 | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 2014年 | 2015年 | 同比增长 | 2014年 | 2015年 | 同比增长 | 2014年 | 2015年 | 2014年 | 2015年 | |
| UED | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
| 客服 | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
| 产品 | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
| 运营 | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
| 前端 | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
| 数据 | 104 | 168 | 50 | 30 | 32 | 15 | 0.3 | 0.45 | 0.3 | 0.45 |
noInline
// 以下变量从其他模块中引入：// protoconst occupations = ['UED', '客服', '产品', '运营', '前端', '数据'];const dataSource6 = occupations.map((occupation) => ({occupation,hc_2014: 104,hc_2015: 168,hc_lfl: 50,age_2014: 30,age_2015: 32,age_lfl: 15,rate_2014: 0.3,rate_2015: 0.45,rate2_2014: 0.33,rate2_2015: 0.48,}));const col = proto.array({align: 'center',width: 80,headerCellProps: { style: { textAlign: 'center', padding: 0 } },});const columns6 = col([{ lock: true, code: 'occupation', name: '职务', width: 120 },{name: '人数',children: col([{ code: 'hc_2014', name: '2014年' },{ code: 'hc_2015', name: '2015年' },{ code: 'hc_lfl', name: '同比增长' },]),},{name: '年龄',children: col([{ code: 'age_2014', name: '2014年' },{ code: 'age_2015', name: '2015年' },{ code: 'age_lfl', name: '同比增长' },]),},{name: '占比',children: col([{ code: 'rate_2014', name: '2014年' },{ code: 'rate_2015', name: '2015年' },]),},{name: '占比2',children: col([{ code: 'rate_2014', name: '2014年' },{ code: 'rate_2015', name: '2015年' },]),},]);function ColumnGroupingAndHighlight() {return (<ProTablestyle={{ '--header-row-height': '40px' }}className="bordered"dataSource={dataSource6}columns={columns6}columnRangeHover/>);}render(<ColumnGroupingAndHighlight />)
行详情#
公司名称 | 金额 | 金融机构 | 申请人 |
|---|
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier |
最近工作：高级经理｜招商银行丨杭州分行｜2009-07-01 至今 工作职责：巴拉巴拉小魔仙 联系方式：67676767｜1212121@163.con 教育经理：北京大学｜工商管理｜2007-09-01 至 2006-06-01 中央财经大学｜2004-09-01 至 2007-06-01 | |||
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke |
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 交通银行丨浙大路支行 | Wesley Cruz |
最近工作：高级经理｜交通银行丨浙大路支行｜2009-07-01 至今 工作职责：巴拉巴拉小魔仙 联系方式：67676767｜1212121@163.con 教育经理：北京大学｜工商管理｜2007-09-01 至 2006-06-01 中央财经大学｜2004-09-01 至 2007-06-01 | |||
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨庆春路支行 | Billy Horton |
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨文一路分行 | Paul Tran |
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 农业银行丨杭州分行 | Anna Poole |
noInline
const dataSource1 = [{ id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },{ id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },{ id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },{ id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },{ id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },{ id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },];const columns1 = [{ code: 'name', width: 220, name: '公司名称' },{ code: 'amount', width: 160, align: 'right', name: '金额' },{ code: 'dept', width: 160, name: '金融机构' },{ code: 'applier', width: 120, name: '申请人' },];function RowDetail() {return (<ProTableprimaryKey="id"dataSource={dataSource1}columns={columns1.slice(0, 4)}rowDetail={{defaultOpenKeys: ['1', '3'],renderDetail: (row) => {return (<divstyle={{padding: 16,display: 'flex',minWidth: 800,}}><div style={{ lineHeight: '20px' }}><div>最近工作：高级经理｜{row.dept}｜2009-07-01 至今</div><div>工作职责：巴拉巴拉小魔仙</div><div>联系方式：67676767｜1212121@163.con</div></div><div style={{ marginLeft: 48, lineHeight: '20px' }}><div>教育经理：北京大学｜工商管理｜2007-09-01 至 2006-06-01</div><div>中央财经大学｜2004-09-01 至 2007-06-01</div></div></div>);},}}/>);}render(<RowDetail />)
表格嵌套#
公司名称 | 金额 | 金融机构 | 申请人 |
|---|
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 招商银行丨杭州分行 | James Collier | ||||||||||||||||
阿里巴巴网络技术有限公司 | 600,000.00(CNY) | 建设银行丨未来科技城 | Philip Burke | ||||||||||||||||
| |||||||||||||||||||
阿里巴巴网络技术有限公司
阿里巴巴网络技术有限公司
阿里巴巴网络技术有限公司
阿里巴巴网络技术有限公司
