@are-visual/virtual-table 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +54 -24
- package/index.d.ts +16 -5
- package/index.esm.js +380 -346
- package/index.esm.js.map +1 -1
- package/middleware/expandable/index.js +2 -8
- package/middleware/expandable/index.js.map +1 -1
- package/middleware/horizontal-scroll-bar/index.js +4 -2
- package/middleware/horizontal-scroll-bar/index.js.map +1 -1
- package/middleware/summary/index.js +4 -2
- package/middleware/summary/index.js.map +1 -1
- package/package.json +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-present Y-Hui
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -88,34 +88,34 @@ function App() {
|
|
|
88
88
|
| align | 单元格对齐方式 | `left` \|`right` \|`center` | | |
|
|
89
89
|
| minWidth | 列最小宽度 | number | | |
|
|
90
90
|
| width | 列宽度 | number \| string | | |
|
|
91
|
-
| fixed | 固定列 | `left`
|
|
91
|
+
| fixed | 固定列 | `left` \| `right` | | |
|
|
92
92
|
| render | 自定义单元格渲染内容 | (*value*, *record*, *index*) => ReactNode | | |
|
|
93
93
|
| onHeaderCell | 设置表头单元格属性 | (column, index) => TdHTMLAttributes | | |
|
|
94
94
|
| onCell | 设置单元格属性 | (column, index) => TdHTMLAttributes | | |
|
|
95
95
|
|
|
96
96
|
#### Table Props
|
|
97
97
|
|
|
98
|
-
| Prop Name | 说明 | 类型 | 默认值
|
|
99
|
-
| -------------------- | ------------------------------------------------------- | --------------------------------------- |
|
|
100
|
-
| ref | 设置最外层 div ref | Ref\<HTMLDivElement\> |
|
|
101
|
-
| tableBodyRef | 设置 body 部分 table ref | Ref\<HTMLTableElement\> |
|
|
102
|
-
| className | 样式类名 | string |
|
|
103
|
-
| style | 样式 | CSSProperties |
|
|
104
|
-
| tableBodyClassName | body 样式类名 | string |
|
|
105
|
-
| tableBodyStyle | body 样式 | CSSProperties |
|
|
106
|
-
| columns | 表格列配置 | ColumnType[] |
|
|
107
|
-
| dataSource | 表格数据源 | object[] |
|
|
108
|
-
| rowKey | 表格行 key 的取值 | string | `key`
|
|
109
|
-
| estimatedRowHeight | 预计每行高度 | number | 46
|
|
110
|
-
| estimatedColumnWidth | 预计每列宽度<br
|
|
111
|
-
| overscanRows | 额外在首尾渲染数据条数 | number | 5
|
|
112
|
-
| overscanColumns | 横向虚拟化时，在头和尾额外渲染多少列 | number | 3
|
|
113
|
-
| stickyHeader | 表头吸顶<br />为 true 时 top 为 0，为 number 则是偏移量 | number \| boolean |
|
|
114
|
-
| pipeline | 插件实例 | TablePipeline |
|
|
115
|
-
| rowClassName | 表格行样式类名 | (*record*, *index*) => string |
|
|
116
|
-
| onRow | 设置行属性 | (*record*, *index*) => TdHTMLAttributes |
|
|
117
|
-
| getOffsetTop | 计算顶部偏移量 | () => number |
|
|
118
|
-
| virtualHeader |
|
|
98
|
+
| Prop Name | 说明 | 类型 | 默认值 | 版本 |
|
|
99
|
+
| -------------------- | ------------------------------------------------------- | --------------------------------------- | ----------------------------- | ------ |
|
|
100
|
+
| ref | 设置最外层 div ref | Ref\<HTMLDivElement\> | | |
|
|
101
|
+
| tableBodyRef | 设置 body 部分 table ref | Ref\<HTMLTableElement\> | | |
|
|
102
|
+
| className | 样式类名 | string | | |
|
|
103
|
+
| style | 样式 | CSSProperties | | |
|
|
104
|
+
| tableBodyClassName | body 样式类名 | string | | |
|
|
105
|
+
| tableBodyStyle | body 样式 | CSSProperties | | |
|
|
106
|
+
| columns | 表格列配置 | ColumnType[] | | |
|
|
107
|
+
| dataSource | 表格数据源 | object[] | | |
|
|
108
|
+
| rowKey | 表格行 key 的取值 | string | `key` | |
|
|
109
|
+
| estimatedRowHeight | 预计每行高度 | number | 46 | |
|
|
110
|
+
| estimatedColumnWidth | 预计每列宽度<br />设置后将会开启横向虚拟化 | number | | |
|
|
111
|
+
| overscanRows | 额外在首尾渲染数据条数 | number | 5 | |
|
|
112
|
+
| overscanColumns | 横向虚拟化时，在头和尾额外渲染多少列 | number | 3 | |
|
|
113
|
+
| stickyHeader | 表头吸顶<br />为 true 时 top 为 0，为 number 则是偏移量 | number \| boolean | | |
|
|
114
|
+
| pipeline | 插件实例 | TablePipeline | | |
|
|
115
|
+
| rowClassName | 表格行样式类名 | (*record*, *index*) => string | | |
|
|
116
|
+
| onRow | 设置行属性 | (*record*, *index*) => TdHTMLAttributes | | |
|
|
117
|
+
| getOffsetTop | 计算顶部偏移量 | () => number | 使用最外层 div 计算 offsetTop | |
|
|
118
|
+
| virtualHeader | 表头虚拟化 | boolean | `true` | >0.1.0 |
|
|
119
119
|
|
|
120
120
|
#### getOffsetTop
|
|
121
121
|
|
|
@@ -193,6 +193,7 @@ function App() {
|
|
|
193
193
|
#### 插件顺序
|
|
194
194
|
|
|
195
195
|
你可以指定 `priority` 来编排插件的顺序，数字越大越靠后。
|
|
196
|
+
|
|
196
197
|
例如下面的 `columnResize`，其他插件修改 columns 后，才会轮到 columnResize 执行，这样它才能获取到最新最完整的 columns.
|
|
197
198
|
|
|
198
199
|
```ts
|
|
@@ -205,6 +206,27 @@ const pipeline = useTablePipeline({
|
|
|
205
206
|
})
|
|
206
207
|
```
|
|
207
208
|
|
|
209
|
+
#### 合并
|
|
210
|
+
|
|
211
|
+
你可以使用 `pipeline` 属性合并外层传进来的插件，当你基于 VirtualTable 封装顶层组件又希望提供插件能力时，它会很有用。
|
|
212
|
+
|
|
213
|
+
```ts
|
|
214
|
+
const another = useTablePipeline({
|
|
215
|
+
use: [
|
|
216
|
+
tableLoading({ loading: true }),
|
|
217
|
+
{ priority: 100, hook: columnResize()},
|
|
218
|
+
],
|
|
219
|
+
})
|
|
220
|
+
|
|
221
|
+
const mergedPipeline = useTablePipeline({
|
|
222
|
+
// 与 another 合并
|
|
223
|
+
pipeline: another,
|
|
224
|
+
use: [
|
|
225
|
+
// 一些其他插件
|
|
226
|
+
],
|
|
227
|
+
})
|
|
228
|
+
```
|
|
229
|
+
|
|
208
230
|
#### 自定义插件
|
|
209
231
|
|
|
210
232
|
插件本身就是一个 react hook，它接受 `@are-visual/virtual-table` 传递的数据，处理再返回。
|
|
@@ -486,7 +508,10 @@ useEffect(() => {
|
|
|
486
508
|
|
|
487
509
|
|
|
488
510
|
// element 滚动时，调用 notify 函数，同步其他容器
|
|
489
|
-
notify('union-key',
|
|
511
|
+
notify('union-key', {
|
|
512
|
+
scrollLeft: () => element.scrollLeft,
|
|
513
|
+
node
|
|
514
|
+
})
|
|
490
515
|
```
|
|
491
516
|
|
|
492
517
|
##### useTableRowManager
|
|
@@ -506,7 +531,12 @@ const { getRowHeightList, updateRowHeight } = useTableRowManager()
|
|
|
506
531
|
```ts
|
|
507
532
|
interface TableRowManagerContextType {
|
|
508
533
|
getRowHeightList: () => number[]
|
|
509
|
-
|
|
534
|
+
/**
|
|
535
|
+
* @param index rowIndex
|
|
536
|
+
* @param key 唯一的 key，用于去重
|
|
537
|
+
* @param height 行高
|
|
538
|
+
*/
|
|
539
|
+
updateRowHeight: (index: number, key: Key, height: number) => void
|
|
510
540
|
}
|
|
511
541
|
```
|
|
512
542
|
|
package/index.d.ts
CHANGED
|
@@ -174,7 +174,7 @@ declare const _default$2: <T>(props: CellProps<T>) => ReactElement;
|
|
|
174
174
|
|
|
175
175
|
interface ColgroupProps {
|
|
176
176
|
columns: ColumnDescriptor[];
|
|
177
|
-
|
|
177
|
+
onColumnSizesMeasure?: (columnSizes: Map<Key, number>) => void;
|
|
178
178
|
}
|
|
179
179
|
declare const Colgroup: FC<ColgroupProps>;
|
|
180
180
|
|
|
@@ -195,13 +195,21 @@ declare function useContainerSize(): ContainerSizeState;
|
|
|
195
195
|
type Listener = (scrollLeft: number, node: HTMLElement) => void;
|
|
196
196
|
interface HorizontalScrollContextState {
|
|
197
197
|
listen: (key: string, listener: Listener) => () => void;
|
|
198
|
-
notify: (key: string,
|
|
198
|
+
notify: (key: string, options: {
|
|
199
|
+
scrollLeft: () => number;
|
|
200
|
+
node: HTMLElement;
|
|
201
|
+
}) => void;
|
|
199
202
|
}
|
|
200
203
|
declare function useHorizontalScrollContext(): HorizontalScrollContextState;
|
|
201
204
|
|
|
202
205
|
interface TableRowManagerContextType {
|
|
203
206
|
getRowHeightList: () => number[];
|
|
204
|
-
|
|
207
|
+
/**
|
|
208
|
+
* @param index rowIndex
|
|
209
|
+
* @param key 唯一的 key，用于去重
|
|
210
|
+
* @param height 行高
|
|
211
|
+
*/
|
|
212
|
+
updateRowHeight: (index: number, key: Key, height: number) => void;
|
|
205
213
|
}
|
|
206
214
|
declare function useTableRowManager(): TableRowManagerContextType;
|
|
207
215
|
|
|
@@ -260,11 +268,14 @@ declare const _default$1: <T>(props: RowProps<T>) => ReactElement;
|
|
|
260
268
|
interface TableBodyProps<T> extends Omit<NecessaryProps<T>, 'columns'>, Pick<RowProps<T>, 'onRow' | 'renderRow' | 'renderCell'> {
|
|
261
269
|
className?: string;
|
|
262
270
|
style?: CSSProperties;
|
|
263
|
-
startIndex: number;
|
|
264
271
|
columns: InnerColumnDescriptor<T>;
|
|
265
272
|
bodyWrapperRef?: Ref<HTMLDivElement>;
|
|
266
273
|
bodyRootRef?: Ref<HTMLTableElement>;
|
|
267
274
|
bodyRef?: Ref<HTMLTableSectionElement>;
|
|
275
|
+
overscan: number;
|
|
276
|
+
estimateSize: number;
|
|
277
|
+
getOffsetTop: () => number;
|
|
278
|
+
getScroller: () => ScrollElement | undefined;
|
|
268
279
|
rowClassName?: (record: T, index: number) => string;
|
|
269
280
|
renderBodyWrapper?: MiddlewareRenderBodyWrapper;
|
|
270
281
|
renderBodyRoot?: MiddlewareRenderBodyRoot;
|
|
@@ -287,7 +298,7 @@ interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProp
|
|
|
287
298
|
overscanRows?: number;
|
|
288
299
|
/** 横向虚拟化时，在头和尾额外渲染多少列 @default 3 */
|
|
289
300
|
overscanColumns?: number;
|
|
290
|
-
/** 开启表头虚拟滚动 @default
|
|
301
|
+
/** 开启表头虚拟滚动 @default true */
|
|
291
302
|
virtualHeader?: boolean;
|
|
292
303
|
pipeline?: TablePipeline<T>;
|
|
293
304
|
getOffsetTop?: () => number;
|