README
virtualized-table
📦 安装
使用npm或yarn
npm install --save virtualized-table
# or
yarn add virtualized-table
使用CDN
<!-- 注意: 部署时,将 "development.umd.js" 替换为 "production.umd.min.js"-->
<script crossorigin src="https://unpkg.com/virtualized-table/dist/vtable.development.umd.js"></script>
CDN Availability (click to show)
CDN | URL |
---|---|
unpkg |
https://unpkg.com/virtualized-table/ |
jsDelivr |
https://jsdelivr.com/package/npm/virtualized-table |
🔨 使用
示例
import {VTablePro} from "virtualized-table";
const columns = [
{ title: '姓名', dataIndex: 'name' },
{ title: '年龄', dataIndex: 'age' },
{ title: '住址', dataIndex: 'address' },
];
const dataSource = [
{ key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号' },
{ key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号' },
];
<VTablePro
columns={columns}
dataSource={dataSource}
/>
📖 API
VTable
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
bordered | 是否显示边框 | boolean | false |
columns | 表格列的配置 | object[] | [] |
components | 覆盖默认的Grid元素 {header{row, cell}, body{row, cell}} | object | - |
columnOffsetCount | 表格可视区域可渲染的列数 | number | 8 |
columnVisibleCount | 表格列渲染数左右偏移量 | number | 4 |
dataSource | 数据数组 | object[] | [] |
estimatedRowHeight | 一行的预估高度 | number | 40 |
estimatedColumnWidth | 一列的预估宽度 | number | 40 |
fixedLeftColumnCount | 左边固定列 列数 | number | 0 |
fixedRightColumnCount | 右边固定列 列数 | number | 0 |
fixedRowHeight | 固定行高(需要行合并/分组表头时设置为true) | boolean | false |
headerBordered | 是否显示表头边框,不设置则按bordered | boolean | false |
isSticky | 是否使用粘性布局 | boolean | - 看浏览器是否支持sticky |
loading | 页面是否加载中 | boolean / Spin props | false |
locale | 默认文案设置,目前包括空数据文案 | object | emptyText: 暂无数据 |
rowHeight | 表格行高 | number | 40 |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string/function(record) | - |
rowOffsetCount | 表格行渲染数上下偏移量 | number | 20 |
rowSelection | 表格行是否可选择,rowSelection props | object | - |
rowVisibleCount | 表格可视区域可渲染的行数 | number | 20 |
summary | 总结栏数据 | object[] | - |
shouldRowHeightSync | 是否要同步行高(isSticky=false,有固定列并且行高不固定时设置为true) | boolean | false |
visibleHeight | 表格可视区域高度 | number | 400 |
onRow | 设置行属性 | function(row, realRowIndex) | - |
onRow 用法
<Table
onRow={(record, index) => {
return {
onClick: event => {}, // 点击行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {}, // 鼠标移入行
onMouseLeave: event => {},
};
}}
/>
columns
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
align | 设置列的对齐方式 | string | 'left','right','center' |
dataIndex | 列数据在数据项中对应的路径,暂不支持通过数组查询嵌套路径 | string | - |
ellipsis | 是否显示省略号 | boolean | false |
key | 列数据的键值 | string | - |
render | 生成复杂数据的渲染函数,@return 里面可以设置表格行/列合并 | function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex) | - |
title | 列头显示文字(函数用法暂不支持多级表头) | ReactNode/(value, row, rowIndex)=>ReactNode | - |
onCell | 设置表头、表格、合计行属性 | function(column, realRowIndex) | - |
onHeaderCell | 设置表头属性 | function(column, realRowIndex) | - |
onBodyCell | 设置表格属性 | function(column, realRowIndex) | - |
onFooterCell | 设置合计行属性 | function(column, realRowIndex) | - |
render @return 合并行/列
render(value) {
return {
children: value,
props: {
colSpan: 1, // 列合并,设置为0时,不渲染(设置display:none)
rowSpan: 1, // 行合并,设置为0时,不渲染(设置visibility:hidden)
}
}
}
表头分组:columns[n] 可以内嵌children,以渲染分组表头。
rowSelection
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
columnWidth | 自定义列表选择框宽度 | number | 60 |
rowRemoveVisible | hover显示行删除图标 | boolean | false |
selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[]/number[] | [] |
getCheckboxProps | 选择框的默认属性配置 | function(record) | - |
onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - |
onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows) | - |
onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows) | - |
onRowRemove | 点击行删除回调 | function(e, row, rowIndex, realRowIndex) | - |
Spin
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
spinning | 是否为加载中状态 | boolean | false |
spinningText | 加载中内容 | string / ReactNode | - |
wrapperClassName | 包装器的类属性 | string | - |
VTable.utils
- VTable.utils.formatToCellsSpan(arr)
[
{
s: {c: 0, r: 2},
e: {c: 1, r: 2},
},
]
=>
{
'0:2': {colSpan: 2, rowSpan: 1},
'1:2': {colSpan: 0, rowSpan: 0},
}
📝 License
virtualized-table is available under the MIT License.