@are-visual/virtual-table 0.4.0 → 0.5.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.
Files changed (14) hide show
  1. package/README.md +36 -28
  2. package/index.d.ts +3 -2
  3. package/index.esm.js +9 -3
  4. package/index.esm.js.map +1 -1
  5. package/middleware/expandable/index.js +2 -5
  6. package/middleware/expandable/index.js.map +1 -1
  7. package/middleware/horizontal-scroll-bar/index.d.ts +2 -2
  8. package/middleware/horizontal-scroll-bar/index.js +5 -4
  9. package/middleware/horizontal-scroll-bar/index.js.map +1 -1
  10. package/middleware/horizontal-scroll-bar/styles.css +1 -1
  11. package/middleware/horizontal-scroll-bar/styles.scss +3 -1
  12. package/middleware/selection/index.js +7 -7
  13. package/middleware/selection/index.js.map +1 -1
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -95,28 +95,28 @@ function App() {
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 />设置后将会开启横向虚拟化 | number | | |
111
- | overscanRows | 额外在首尾渲染数据条数 | number | 5 | |
112
- | overscanColumns | 横向虚拟化时，在头和尾额外渲染多少列 | number | 3 | |
113
- | stickyHeader | 表头吸顶<br />为 true 时 top 为 0，为 number 则是偏移量 | number \| boolean | | |
114
- | defaultColumnWidth | 缺失宽度设置时的默认值（与虚拟化无关） | number | 100 | >=0.2 |
115
- | pipeline | 插件实例 | TablePipeline | | |
116
- | rowClassName | 表格行样式类名 | (*record*, *index*) => string | | |
117
- | onRow | 设置行属性 | (*record*, *index*) => TdHTMLAttributes | | |
118
- | getOffsetTop | 计算顶部偏移量 | () => number | 使用最外层 div 计算 offsetTop | |
119
- | virtualHeader | 表头虚拟化 | boolean | `true` | >0.1.0 |
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 \| `(data) => React.Key` | `key` | >=0.5.0 |
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
+ | defaultColumnWidth | 缺失宽度设置时的默认值（与虚拟化无关） | number | 100 | >=0.2 |
115
+ | pipeline | 插件实例 | TablePipeline | | |
116
+ | rowClassName | 表格行样式类名 | (*record*, *index*) => string | | |
117
+ | onRow | 设置行属性 | (*record*, *index*) => TdHTMLAttributes | | |
118
+ | getOffsetTop | 计算顶部偏移量 | () => number | 使用最外层 div 计算 offsetTop | |
119
+ | virtualHeader | 表头虚拟化 | boolean | `true` | >0.1.0 |
120
120
 
121
121
  #### getOffsetTop
122
122
 
@@ -272,7 +272,8 @@ const mergedPipeline = useTablePipeline({
272
272
  | renderHeaderCell | 表头单元格自定义渲染 | MiddlewareRenderHeaderCell| |
273
273
  | renderBodyWrapper | | MiddlewareRenderBodyWrapper| |
274
274
  | renderBodyRoot | | MiddlewareRenderBodyRoot| |
275
- | renderBody | 表格 body 自定义渲染 | MiddlewareRenderBody| |
275
+ | renderBody | 自定义 tbody 渲染 | MiddlewareRenderBody| |
276
+ | renderBodyContent | 表格 body 内容自定义 | MiddlewareRenderBodyContent | >=0.4.0 |
276
277
  | renderRow | 表格行自定义渲染 | MiddlewareRenderRow| |
277
278
  | renderCell | 单元格自定义渲染 | MiddlewareRenderCell| |
278
279
 
@@ -303,8 +304,9 @@ Context
303
304
  ├── colgroup
304
305
  │
305
306
  └── renderBody(<tbody />)
306
- └── renderRow(<tr />)
307
- └── renderCell(<td />)
307
+ └── renderBodyContent(Row[])
308
+ └── renderRow(<tr />)
309
+ └── renderCell(<td />)
308
310
  ```
309
311
 
310
312
  ##### Render 类型签名
@@ -316,6 +318,7 @@ interface RenderOptions<T = any> {
316
318
  rowIndex: number
317
319
  columns: ColumnType<T>[]
318
320
  rowData: T
321
+ startRowIndex: number
319
322
  columnDescriptor: ColumnDescriptor<T>[]
320
323
  }
321
324
 
@@ -361,17 +364,22 @@ type MiddlewareRenderHeaderCell<T = any> = (
361
364
 
362
365
  type MiddlewareRenderBodyWrapper<T = any> = (
363
366
  children: ReactNode,
364
- options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
367
+ options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
365
368
  ) => ReactNode
366
369
 
367
370
  type MiddlewareRenderBodyRoot<T = any> = (
368
371
  children: ReactNode,
369
- options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
372
+ options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
370
373
  ) => ReactNode
371
374
 
372
375
  type MiddlewareRenderBody<T = any> = (
373
376
  children: ReactNode,
374
- options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
377
+ options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
378
+ ) => ReactNode
379
+
380
+ type MiddlewareRenderBodyContent<T = any> = (
381
+ children: ReactNode,
382
+ options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
375
383
  ) => ReactNode
376
384
 
377
385
  type MiddlewareRenderRow<T = any> = (
package/index.d.ts CHANGED
@@ -59,7 +59,7 @@ interface InnerColumnDescriptor<T> {
59
59
  interface NecessaryProps<T> {
60
60
  dataSource: T[];
61
61
  columns: ColumnType<T>[];
62
- rowKey: keyof T | (string & {});
62
+ rowKey: (keyof T | (string & {})) | ((rowData: T) => Key);
63
63
  }
64
64
 
65
65
  type Prettify<T> = {
@@ -325,6 +325,7 @@ interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProp
325
325
  declare const _default: <T>(props: VirtualTableCoreProps<T> & RefAttributes<HTMLDivElement>) => ReactElement;
326
326
 
327
327
  declare function getKey<T>(column: ColumnType<T>): Key;
328
+ declare function getRowKey<T>(rowData: T, rowKey: NecessaryProps<T>['rowKey']): Key;
328
329
 
329
330
  interface ResizeRect {
330
331
  width: number;
@@ -338,4 +339,4 @@ type PossibleRef<T> = Ref<T> | undefined;
338
339
  declare function mergeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
339
340
  declare function useMergedRef<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
340
341
 
341
- export { type AlignType, type AnyObject, _default$2 as Colgroup, type ColumnDescriptor, type ColumnExtra, type ColumnType, type ContainerSizeState, type FixedType, type HorizontalScrollContextState, type MergedMiddlewareRender, type Middleware, type MiddlewareContext, type MiddlewareRender, type MiddlewareRenderBody, type MiddlewareRenderBodyContent, type MiddlewareRenderBodyRoot, type MiddlewareRenderBodyWrapper, type MiddlewareRenderCell, type MiddlewareRenderContent, type MiddlewareRenderHeader, type MiddlewareRenderHeaderCell, type MiddlewareRenderHeaderRoot, type MiddlewareRenderHeaderRow, type MiddlewareRenderHeaderWrapper, type MiddlewareRenderRoot, type MiddlewareRenderRow, type MiddlewareRenders, type MiddlewareResult, type OnRowType, type PipelineRender, type PipelineRenderOptions, type ScrollElement, type StickyContextState, type TableColumnsContextType, TablePipeline, type TableRowManagerContextType, type UseTablePipelineOptions, _default as VirtualTable, _default$3 as VirtualTableCell, type CellProps as VirtualTableCellProps, type VirtualTableCoreProps as VirtualTableProps, _default$1 as VirtualTableRow, type RowProps as VirtualTableRowProps, createMiddleware, findLastIndex, getKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
342
+ export { type AlignType, type AnyObject, _default$2 as Colgroup, type ColumnDescriptor, type ColumnExtra, type ColumnType, type ContainerSizeState, type FixedType, type HorizontalScrollContextState, type MergedMiddlewareRender, type Middleware, type MiddlewareContext, type MiddlewareRender, type MiddlewareRenderBody, type MiddlewareRenderBodyContent, type MiddlewareRenderBodyRoot, type MiddlewareRenderBodyWrapper, type MiddlewareRenderCell, type MiddlewareRenderContent, type MiddlewareRenderHeader, type MiddlewareRenderHeaderCell, type MiddlewareRenderHeaderRoot, type MiddlewareRenderHeaderRow, type MiddlewareRenderHeaderWrapper, type MiddlewareRenderRoot, type MiddlewareRenderRow, type MiddlewareRenders, type MiddlewareResult, type OnRowType, type PipelineRender, type PipelineRenderOptions, type ScrollElement, type StickyContextState, type TableColumnsContextType, TablePipeline, type TableRowManagerContextType, type UseTablePipelineOptions, _default as VirtualTable, _default$3 as VirtualTableCell, type CellProps as VirtualTableCellProps, type VirtualTableCoreProps as VirtualTableProps, _default$1 as VirtualTableRow, type RowProps as VirtualTableRowProps, createMiddleware, findLastIndex, getKey, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
package/index.esm.js CHANGED
@@ -120,6 +120,12 @@ function useShallowMemo(pickData) {
120
120
  function getKey(column) {
121
121
  return 'key' in column ? column.key : column.dataIndex;
122
122
  }
123
+ function getRowKey(rowData, rowKey) {
124
+ if (typeof rowKey === 'function') {
125
+ return rowKey(rowData);
126
+ }
127
+ return rowData[rowKey];
128
+ }
123
129
 
124
130
  function isValidFixedLeft(fixed) {
125
131
  return fixed === 'left';
@@ -1123,7 +1129,7 @@ function TableBody(props) {
1123
1129
  rowHeights.current.clear();
1124
1130
  });
1125
1131
  var bodyContent = pipelineRender(dataSource.map(function (e, rowIndex) {
1126
- var _rowKey = e[rowKey];
1132
+ var key = getRowKey(e, rowKey);
1127
1133
  return jsx(Row$1, {
1128
1134
  className: clsx(rowClassName == null ? undefined : rowClassName(e, rowIndex)),
1129
1135
  rowIndex: rowIndex + startIndex,
@@ -1132,7 +1138,7 @@ function TableBody(props) {
1132
1138
  onRow: onRow,
1133
1139
  renderRow: renderRow,
1134
1140
  renderCell: renderCell
1135
- }, _rowKey);
1141
+ }, key);
1136
1142
  }), renderBodyContent, {
1137
1143
  columns: columns,
1138
1144
  columnDescriptor: descriptor,
@@ -1828,5 +1834,5 @@ if (process.env.NODE_ENV === 'development') {
1828
1834
  }
1829
1835
  var table = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(VirtualTableCore));
1830
1836
 
1831
- export { Colgroup$1 as Colgroup, table as VirtualTable, Cell$1 as VirtualTableCell, Row$1 as VirtualTableRow, createMiddleware, findLastIndex, getKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
1837
+ export { Colgroup$1 as Colgroup, table as VirtualTable, Cell$1 as VirtualTableCell, Row$1 as VirtualTableRow, createMiddleware, findLastIndex, getKey, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
1832
1838
  //# sourceMappingURL=index.esm.js.map