@are-visual/virtual-table 0.0.1 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Y-Hui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -88,34 +88,34 @@ function App() {
 | align        | 单元格对齐方式                                               | `left` \|`right` \|`center` |        |      |
 | minWidth     | 列最小宽度                                                   | number                                    |        |      |
 | width        | 列宽度                                                       | number \| string                          |        |      |
-| fixed        | 固定列                                                       | `left` | `right` |                           |        |
+| fixed        | 固定列                                                       | `left` \| `right` |                           |        |
 | render       | 自定义单元格渲染内容                                         | (*value*, *record*, *index*) => ReactNode |        |      |
 | onHeaderCell | 设置表头单元格属性 | (column,  index) => TdHTMLAttributes                          |        |      |
 | onCell       | 设置单元格属性 | (column,  index) => TdHTMLAttributes |        |      |
 
 #### Table Props
 
-| Prop Name            | 说明                                                    | 类型                                    | 默认值                         | 版本 |
-| -------------------- | ------------------------------------------------------- | --------------------------------------- | ------------------------------ | ---- |
-| ref                  | 设置最外层 div ref                                      | Ref\<HTMLDivElement\>                   |                                |      |
-| tableBodyRef         | 设置 body 部分 table ref                                | Ref\<HTMLTableElement\>                 |                                |      |
-| className            | 样式类名                                                | string                                  |                                |      |
-| style                | 样式                                                    | CSSProperties                           |                                |      |
-| tableBodyClassName   | body 样式类名                                           | string                                  |                                |      |
-| tableBodyStyle       | body 样式                                               | CSSProperties                           |                                |      |
-| columns              | 表格列配置                                              | ColumnType[]                            |                                |      |
-| dataSource           | 表格数据源                                              | object[]                                |                                |      |
-| rowKey               | 表格行 key 的取值                                       | string                                  | `key`                          |      |
-| estimatedRowHeight   | 预计每行高度                                            | number                                  | 46                             |      |
-| estimatedColumnWidth | 预计每列宽度<br />需要横向虚拟化时，设置它              | number                                  |                                |      |
-| overscanRows         | 额外在首尾渲染数据条数                                  | number                                  | 5                              |      |
-| overscanColumns      | 横向虚拟化时，在头和尾额外渲染多少列                    | number                                  | 3                              |      |
-| stickyHeader         | 表头吸顶<br />为 true 时 top 为 0，为 number 则是偏移量 | number \| boolean                       |                                |      |
-| pipeline             | 插件实例                                                | TablePipeline                           |                                |      |
-| rowClassName         | 表格行样式类名                                          | (*record*, *index*) => string           |                                |      |
-| onRow                | 设置行属性                                              | (*record*, *index*) => TdHTMLAttributes |                                |      |
-| getOffsetTop         | 计算顶部偏移量                                          | () => number                            | 使用 最外层 div 计算 offsetTop |      |
-| virtualHeader        | 开启表头虚拟滚动                                        | boolean                                 | `false`                        |      |
+| Prop Name            | 说明                                                    | 类型                                    | 默认值                        | 版本   |
+| -------------------- | ------------------------------------------------------- | --------------------------------------- | ----------------------------- | ------ |
+| ref                  | 设置最外层 div ref                                      | Ref\<HTMLDivElement\>                   |                               |        |
+| tableBodyRef         | 设置 body 部分 table ref                                | Ref\<HTMLTableElement\>                 |                               |        |
+| className            | 样式类名                                                | string                                  |                               |        |
+| style                | 样式                                                    | CSSProperties                           |                               |        |
+| tableBodyClassName   | body 样式类名                                           | string                                  |                               |        |
+| tableBodyStyle       | body 样式                                               | CSSProperties                           |                               |        |
+| columns              | 表格列配置                                              | ColumnType[]                            |                               |        |
+| dataSource           | 表格数据源                                              | object[]                                |                               |        |
+| rowKey               | 表格行 key 的取值                                       | string                                  | `key`                         |        |
+| estimatedRowHeight   | 预计每行高度                                            | number                                  | 46                            |        |
+| estimatedColumnWidth | 预计每列宽度<br />设置后将会开启横向虚拟化              | number                                  |                               |        |
+| overscanRows         | 额外在首尾渲染数据条数                                  | number                                  | 5                             |        |
+| overscanColumns      | 横向虚拟化时，在头和尾额外渲染多少列                    | number                                  | 3                             |        |
+| stickyHeader         | 表头吸顶<br />为 true 时 top 为 0，为 number 则是偏移量 | number \| boolean                       |                               |        |
+| pipeline             | 插件实例                                                | TablePipeline                           |                               |        |
+| rowClassName         | 表格行样式类名                                          | (*record*, *index*) => string           |                               |        |
+| onRow                | 设置行属性                                              | (*record*, *index*) => TdHTMLAttributes |                               |        |
+| getOffsetTop         | 计算顶部偏移量                                          | () => number                            | 使用最外层 div 计算 offsetTop |        |
+| virtualHeader        | 表头虚拟化                                              | boolean                                 | `true`                        | >0.1.0 |
 
 #### getOffsetTop
 
@@ -193,6 +193,7 @@ function App() {
 #### 插件顺序
 
 你可以指定 `priority` 来编排插件的顺序，数字越大越靠后。
+
 例如下面的 `columnResize`，其他插件修改 columns 后，才会轮到 columnResize 执行，这样它才能获取到最新最完整的 columns.
 
 ```ts
@@ -205,6 +206,27 @@ const pipeline = useTablePipeline({
 })
 ```
 
+#### 合并
+
+你可以使用 `pipeline` 属性合并外层传进来的插件，当你基于 VirtualTable 封装顶层组件又希望提供插件能力时，它会很有用。
+
+```ts
+const another = useTablePipeline({
+  use: [
+    tableLoading({ loading: true }),
+    { priority: 100, hook: columnResize()},
+  ],
+})
+
+const mergedPipeline = useTablePipeline({
+  // 与 another 合并
+  pipeline: another,
+  use: [
+    // 一些其他插件
+  ],
+})
+```
+
 #### 自定义插件
 
 插件本身就是一个 react hook，它接受 `@are-visual/virtual-table` 传递的数据，处理再返回。
@@ -486,7 +508,10 @@ useEffect(() => {
 
 
 // element 滚动时，调用 notify 函数，同步其他容器
-notify('union-key', element.scrollLeft, node)
+notify('union-key', {
+  scrollLeft: () => element.scrollLeft,
+  node
+})
 ```
 
 ##### useTableRowManager
@@ -506,7 +531,12 @@ const { getRowHeightList, updateRowHeight } = useTableRowManager()
 ```ts
 interface TableRowManagerContextType {
   getRowHeightList: () => number[]
-  updateRowHeight: (index: number, height: number) => void
+  /**
+   * @param index rowIndex
+   * @param key 唯一的 key，用于去重
+   * @param height 行高
+   */
+  updateRowHeight: (index: number, key: Key, height: number) => void
 }
 ```
 

package/index.d.ts

@@ -1,4 +1,5 @@
-import { DetailedHTMLProps, HTMLAttributes, Key, ReactNode, TdHTMLAttributes, RefObject, ReactElement, FC, CSSProperties, Ref, RefAttributes } from 'react';
+import * as react from 'react';
+import { DetailedHTMLProps, HTMLAttributes, Key, ReactNode, TdHTMLAttributes, RefObject, ReactElement, CSSProperties, Ref, RefAttributes } from 'react';
 
 type ScrollElement = HTMLElement | Window;
 
@@ -170,13 +171,13 @@ interface CellProps<T> extends Omit<NativeProps$1, 'children'> {
     rowData: T;
     renderCell?: MiddlewareRenderCell;
 }
-declare const _default$2: <T>(props: CellProps<T>) => ReactElement;
+declare const _default$3: <T>(props: CellProps<T>) => ReactElement;
 
 interface ColgroupProps {
     columns: ColumnDescriptor[];
-    colRef?: (instance: HTMLTableColElement | null, column: ColumnType<any>, index: number) => void;
+    onColumnSizesMeasure?: (columnSizes: Map<Key, number>, oldColumnSizes: Map<Key, number>) => void;
 }
-declare const Colgroup: FC<ColgroupProps>;
+declare const _default$2: react.NamedExoticComponent<ColgroupProps>;
 
 interface TableColumnsContextType {
     widthList: Map<Key, number>;
@@ -195,13 +196,21 @@ declare function useContainerSize(): ContainerSizeState;
 type Listener = (scrollLeft: number, node: HTMLElement) => void;
 interface HorizontalScrollContextState {
     listen: (key: string, listener: Listener) => () => void;
-    notify: (key: string, scrollLeft: number, node: HTMLElement) => void;
+    notify: (key: string, options: {
+        scrollLeft: () => number;
+        node: HTMLElement;
+    }) => void;
 }
 declare function useHorizontalScrollContext(): HorizontalScrollContextState;
 
 interface TableRowManagerContextType {
     getRowHeightList: () => number[];
-    updateRowHeight: (index: number, height: number) => void;
+    /**
+     * @param index rowIndex
+     * @param key 唯一的 key，用于去重
+     * @param height 行高
+     */
+    updateRowHeight: (index: number, key: Key, height: number) => void;
 }
 declare function useTableRowManager(): TableRowManagerContextType;
 
@@ -260,11 +269,14 @@ declare const _default$1: <T>(props: RowProps<T>) => ReactElement;
 interface TableBodyProps<T> extends Omit<NecessaryProps<T>, 'columns'>, Pick<RowProps<T>, 'onRow' | 'renderRow' | 'renderCell'> {
     className?: string;
     style?: CSSProperties;
-    startIndex: number;
     columns: InnerColumnDescriptor<T>;
     bodyWrapperRef?: Ref<HTMLDivElement>;
     bodyRootRef?: Ref<HTMLTableElement>;
     bodyRef?: Ref<HTMLTableSectionElement>;
+    overscan: number;
+    estimateSize: number;
+    getOffsetTop: () => number;
+    getScroller: () => ScrollElement | undefined;
     rowClassName?: (record: T, index: number) => string;
     renderBodyWrapper?: MiddlewareRenderBodyWrapper;
     renderBodyRoot?: MiddlewareRenderBodyRoot;
@@ -287,7 +299,7 @@ interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProp
     overscanRows?: number;
     /** 横向虚拟化时，在头和尾额外渲染多少列 @default 3 */
     overscanColumns?: number;
-    /** 开启表头虚拟滚动 @default false */
+    /** 开启表头虚拟滚动 @default true */
     virtualHeader?: boolean;
     pipeline?: TablePipeline<T>;
     getOffsetTop?: () => number;
@@ -308,4 +320,4 @@ type PossibleRef<T> = Ref<T> | undefined;
 declare function mergeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 declare function useMergedRef<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 
-export { type AlignType, type AnyObject, Colgroup, type ColumnDescriptor, type ColumnExtra, type ColumnType, type ContainerSizeState, type FixedType, type HorizontalScrollContextState, type MergedMiddlewareRender, type Middleware, type MiddlewareContext, type MiddlewareRender, type MiddlewareRenderBody, 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 StickyContextState, type TableColumnsContextType, TablePipeline, type TableRowManagerContextType, type UseTablePipelineOptions, _default as VirtualTable, _default$2 as VirtualTableCell, type CellProps as VirtualTableCellProps, type VirtualTableCoreProps as VirtualTableProps, _default$1 as VirtualTableRow, type RowProps as VirtualTableRowProps, createMiddleware, findLastIndex, getKey, isValidFixed, isValidFixedLeft, isValidFixedRight, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
+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 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 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, isValidFixed, isValidFixedLeft, isValidFixedRight, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };