1 |
|
2 | <p align="center">
|
3 | <a href="#">
|
4 | <img width="300" src="https://raw.githubusercontent.com/PengChen96/virtualized-table/master/logo.png"/>
|
5 | </a>
|
6 | <h1 align="center">virtualized-table</h1>
|
7 | </p>
|
8 |
|
9 | [![npm version](https://badge.fury.io/js/virtualized-table.svg)](http://badge.fury.io/js/virtualized-table)
|
10 | [![Build Status](https://travis-ci.com/PengChen96/virtualized-table.svg?branch=master)](https://travis-ci.com/github/PengChen96/virtualized-table)
|
11 | [![codecov](https://codecov.io/gh/PengChen96/virtualized-table/branch/master/graph/badge.svg)](https://codecov.io/gh/PengChen96/virtualized-table)
|
12 | [![NPM downloads](http://img.shields.io/npm/dm/virtualized-table.svg?style=flat-square)](https://www.npmjs.com/package/virtualized-table)
|
13 | 大数据量虚拟化表格组件
|
14 |
|
15 | ## 📦 安装
|
16 | **使用npm或yarn**
|
17 | ```shell
|
18 | npm install --save virtualized-table
|
19 | # or
|
20 | yarn add virtualized-table
|
21 | ```
|
22 | **使用CDN**
|
23 | ```html
|
24 | <!-- 注意: 部署时,将 "development.umd.js" 替换为 "production.umd.min.js"-->
|
25 | <script crossorigin src="https://unpkg.com/virtualized-table/dist/vtable.development.umd.js"></script>
|
26 | ```
|
27 | <details>
|
28 | <summary><b>CDN Availability</b> (click to show)</summary>
|
29 |
|
30 | | CDN | URL |
|
31 | |-----------:|:-------------------------------------------|
|
32 | | `unpkg` | <https://unpkg.com/virtualized-table/> |
|
33 | | `jsDelivr` | <https://jsdelivr.com/package/npm/virtualized-table> |
|
34 | </details>
|
35 |
|
36 | ## 🔨 使用
|
37 | ### 示例
|
38 | ```javascript
|
39 | import {VTablePro} from "virtualized-table";
|
40 | const columns = [
|
41 | { title: '姓名', dataIndex: 'name' },
|
42 | { title: '年龄', dataIndex: 'age' },
|
43 | { title: '住址', dataIndex: 'address' },
|
44 | ];
|
45 | const dataSource = [
|
46 | { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号' },
|
47 | { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号' },
|
48 | ];
|
49 | <VTablePro
|
50 | columns={columns}
|
51 | dataSource={dataSource}
|
52 | />
|
53 | ```
|
54 | [简单示例](https://github.com/PengChen96/virtualized-table/blob/master/src/example/html/eg-basic-umd.html)
|
55 |
|
56 | ## 📖 API
|
57 | ### VTable
|
58 | 参数 | 说明 | 类型 | 默认值
|
59 | ---|---|---|---
|
60 | bordered | 是否显示边框 | boolean | false
|
61 | columns | 表格列的配置 | object[] | []
|
62 | components | 覆盖默认的Grid元素 {header{row, cell}, body{row, cell}} | object | -
|
63 | columnOffsetCount | 表格可视区域可渲染的列数 | number | 8
|
64 | columnVisibleCount | 表格列渲染数左右偏移量 | number | 4
|
65 | dataSource | 数据数组 | object[] | []
|
66 | estimatedRowHeight | 一行的预估高度 | number | 40
|
67 | estimatedColumnWidth | 一列的预估宽度 | number | 40
|
68 | fixedLeftColumnCount | 左边固定列 列数 | number | 0
|
69 | fixedRightColumnCount | 右边固定列 列数 | number | 0
|
70 | fixedRowHeight | 固定行高(需要行合并/分组表头时设置为true) | boolean | false
|
71 | headerBordered | 是否显示表头边框,不设置则按bordered | boolean | false
|
72 | isSticky | 是否使用粘性布局 | boolean | - 看浏览器是否支持sticky
|
73 | headerNotSticky | 表头不使用粘性布局 | boolean | false
|
74 | loading | 页面是否加载中 | boolean / Spin props | false
|
75 | locale | 默认文案设置,目前包括空数据文案 | object | emptyText: 暂无数据
|
76 | rowHeight | 表格行高 | number | 40
|
77 | rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string/function(record) | -
|
78 | rowOffsetCount | 表格行渲染数上下偏移量 | number | 20
|
79 | rowSelection | 表格行是否可选择,rowSelection props | object | -
|
80 | rowVisibleCount | 表格可视区域可渲染的行数 | number | 20
|
81 | summary | 总结栏数据 | object[] | -
|
82 | shouldRowHeightSync | 是否要同步行高(isSticky=false,有固定列并且行高不固定时设置为true) | boolean | false
|
83 | visibleHeight | 表格可视区域高度 | number | 400
|
84 | onRow | 设置行属性 | function(row, realRowIndex) | -
|
85 |
|
86 | *onRow 用法*
|
87 | ```javascript
|
88 | <Table
|
89 | onRow={(record, index) => {
|
90 | return {
|
91 | onClick: event => {}, // 点击行
|
92 | onDoubleClick: event => {},
|
93 | onContextMenu: event => {},
|
94 | onMouseEnter: event => {}, // 鼠标移入行
|
95 | onMouseLeave: event => {},
|
96 | };
|
97 | }}
|
98 | />
|
99 | ```
|
100 |
|
101 | #### columns
|
102 | 参数 | 说明 | 类型 | 默认值
|
103 | ---|---|---|---
|
104 | headerAlign | 设置列表头的对齐方式 | string / 'left','right','center' | 'center'
|
105 | align | 设置列的对齐方式 | string / 'left','right','center' | 'left'
|
106 | dataIndex | 列数据在数据项中对应的路径,暂不支持通过数组查询嵌套路径 | string | -
|
107 | ellipsis | 是否显示省略号 | boolean | false
|
108 | ellipsisTitle | 设置了ellipsis的列是否显示默认title | boolean | true
|
109 | key | 列数据的键值 | string | -
|
110 | render | 生成复杂数据的渲染函数,@return 里面可以设置表格[行/列合并](https://pengchen96.github.io/virtualized-table/?path=/story/vtable2-0-grid--colspan-rowspan) | function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex) | -
|
111 | title | 列头显示文字(函数用法暂不支持多级表头) | ReactNode/(value, row, rowIndex)=>ReactNode | -
|
112 | onCell | 设置表头、表格、合计行属性 | function(column, realRowIndex) | -
|
113 | onHeaderCell | 设置表头属性 | function(column, realRowIndex) | -
|
114 | onBodyCell | 设置表格属性 | function(column, realRowIndex) | -
|
115 | onFooterCell | 设置合计行属性 | function(column, realRowIndex) | -
|
116 |
|
117 | *render @return 合并行/列*
|
118 | ```javascript
|
119 | render(value) {
|
120 | return {
|
121 | children: value,
|
122 | props: {
|
123 | colSpan: 1, // 列合并,设置为0时,不渲染(设置display:none)
|
124 | rowSpan: 1, // 行合并,设置为0时,不渲染(设置visibility:hidden)
|
125 | }
|
126 | }
|
127 | }
|
128 | ```
|
129 | *表头分组:columns[n] 可以内嵌children,以渲染分组表头。*
|
130 |
|
131 |
|
132 | #### rowSelection
|
133 | 参数 | 说明 | 类型 | 默认值
|
134 | ---|---|---|---
|
135 | columnWidth | 自定义列表选择框宽度 | number | 60
|
136 | columnTitle | 自定义列表选择框标题 | string / ReactNode | -
|
137 | columnProps | 自定义列属性 | object | -
|
138 | rowRemoveVisible | hover显示行删除图标 | boolean | false
|
139 | selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[]/number[] | []
|
140 | getCheckboxProps | 选择框的默认属性配置 | function(record){ return {disabled, notVisible} } | -
|
141 | onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | -
|
142 | onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows) | -
|
143 | onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows) | -
|
144 | onRowRemove | 点击行删除回调 | function(e, row, rowIndex, realRowIndex) | -
|
145 |
|
146 |
|
147 | #### Spin
|
148 | 参数 | 说明 | 类型 | 默认值
|
149 | ---|---|---|---
|
150 | spinning | 是否为加载中状态 | boolean | false
|
151 | spinningText | 加载中内容 | string / ReactNode | -
|
152 | wrapperClassName | 包装器的类属性 | string | -
|
153 |
|
154 |
|
155 | ### VTable.utils
|
156 | - VTable.utils.formatToCellsSpan(arr)
|
157 | ```
|
158 | [
|
159 | {
|
160 | s: {c: 0, r: 2},
|
161 | e: {c: 1, r: 2},
|
162 | },
|
163 | ]
|
164 |
|
165 | =>
|
166 |
|
167 | {
|
168 | '0:2': {colSpan: 2, rowSpan: 1},
|
169 | '1:2': {colSpan: 0, rowSpan: 0},
|
170 | }
|
171 | ```
|
172 |
|
173 | ## 📝 License
|
174 | virtualized-table is available under the MIT License.
|