API
功能描述： React SheetComponent 组件的 props 参数
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| sheetType | 表格类型： 1. pivot: 透视表 2. table: 明细表 3. gridAnalysis: 网格分析表 4. strategy: 趋势分析表 5. editable: 编辑表 | pivot | table | gridAnalysis | strategy | editable | pivot | |
| spreadsheet | 自定义表 | (container: HTMLElement | string, dataCfg: S2DataConfig, options: SheetComponentOptions) => SpreadSheet | ||
| dataCfg | 透视表数据映射相关配置项 | S2DataConfig | ✓ | |
| options | 透视表属性配置项 | SheetComponentOptions | ✓ | |
| partDrillDown | 维度下钻相关属性 | PartDrillDown | ||
| adaptive | 是否根据窗口大小自适应 | boolean | { width?: boolean, height?: boolean, getContainer: () => HTMLElement } | false | |
| themeCfg | 自定义透视表主题样式 | ThemeCfg | ||
| loading | 控制表格的加载状态 | boolean | ||
| header | 表头配置项 | HeaderCfgProps | ||
| onRangeSort | 组内排序时触发回调事件 | (params: SortParam[] ) => void; | ||
| onRowCellHover | 行头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onRowCellClick | 行头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onRowCellDoubleClick | 行头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onRowCellContextMenu | 行头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseDown | 行头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseUp | 行头鼠标放开事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseMove | 行头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onRowCellCollapsed | 节点展开/收起事件回调 | ({ isCollapsed: boolean, collapseFields: Record<string, boolean>, node: Node }) => void; | ||
| onRowCellAllCollapsed | 节点全部展开/收起的事件回调 | (isCollapsed: boolean ) => void; | ||
| onRowCellScroll | 行头单元格滚动事件 | ({position: CellScrollPosition} ) => void; | ||
| onRowCellRender | 行头单元格渲染事件 | ( cell: Cell ) => void | ||
| onRowCellSelected | 行头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onColCellHover | 列头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onColCellClick | 列头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onColCellDoubleClick | 列头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onColCellContextMenu | 列头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseDown | 列头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseUp | 列头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseMove | 列头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onColCellExpanded | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头展开的事件回调 | (expandedNode: Node) => void; | ||
| onColCellHidden | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头隐藏的事件回调 | ( data: { currentHiddenColumnsInfo:HiddenColumnsInfo; hiddenColumnsDetail:HiddenColumnsInfo[]} ) => void; | ||
| onColCellRender | 列头单元格渲染事件 | ( cell: Cell ) => void | ||
| onColCellSelected | 列头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onDataCellHover | 数值单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onDataCellClick | 数值单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| onDataCellDoubleClick | 数值单元格双击事件 | (data: TargetCellInfo) => void | ||
| onDataCellContextMenu | 数值单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseDown | 数值单元格鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseUp | 数值单元格鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseMove | 数值单元格鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onDataCellBrushSelection | 数值单元格刷选事件 | ( dataCells: DataCell[] ) => void | ||
| onDataCellSelectMove | 数值单元格键盘方向键移动事件 | (metas: CellMeta[]) => void | ||
| onDataCellEditStart | 数值单元格编辑开始（暂只支持编辑表） | (meta: ViewMeta, cell: S2CellType) => void | ||
| onDataCellEditEnd | 数值单元格编辑完成（暂只支持编辑表） | (meta: ViewMeta, cell: S2CellType) => void | ||
| onDataCellRender | 数值单元格渲染事件 | ( cell: Cell ) => void | ||
| onDataCellSelected | 数值单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onCornerCellHover | 角头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onCornerCellClick | 角头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onCornerCellDoubleClick | 角头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onCornerCellContextMenu | 角头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseUp | 角头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseUp | 角头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseMove | 角头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onCornerCellRender | 角头单元格渲染事件 | ( cell: Cell ) => void | ||
| onCornerCellSelected | 角头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onMergedCellsHover | 合并单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsClick | 合并单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsDoubleClick | 合并单元格鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsContextMenu | 合并单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseDown | 合并单元格按下事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseUp | 合并单元格松开事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseMove | 合并单元格移动事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsRender | 合并单元格渲染事件 | ( cell: Cell ) => void | ||
| onSeriesNumberCellRender | 序号单元格渲染事件 | ( cell: Cell ) => void | ||
| onRangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: SortParam[] ) => void; | ||
| onRangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: FederatedPointerEvent ) => void; | ||
| onRangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; | ||
| onRangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; | ||
| onLayoutCellRender | 单个单元格布局渲染完成事件 | cell: S2CellType | ||
| onLayoutAfterHeaderLayout | 表头布局结构准备完成事件 | (layoutResult: LayoutResult ) => void; | ||
| onLayoutPagination | 分页事件 | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | ||
| onLayoutCellScroll | 单元格滚动事件 (已废弃，请使用 onScroll 代替) | ({position: CellScrollPosition} ) => void; | ||
| onLayoutAfterCollapseRows | 树状模式下收起行头后的事件回调 | ({ collapseFields: Record<string, boolean>, meta: Node }) => void; | ||
| onBeforeRender | 开始 render 前的事件 | () => void; | ||
| onAfterRender | render 完成的事件 | () => void; | ||
| onMounted | 组件层表格挂载完成事件，可拿到表实例 详情 | (spreadsheet: SpreadSheet) => void; | ||
| onUpdate | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时触发，可手动控制更新时的 渲染模式 | (renderOptions: S2RenderOptions) => S2RenderOptions | void | ||
| onUpdateAfterRender | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时，并且在重渲染 s2.render() 完成后触发 | (renderOptions: S2RenderOptions) => void | ||
| onLoading | 组件层加载状态变更事件 | (loading: boolean) => void | ||
| onDestroy | 表格销毁事件 | () => void; | ||
| onLayoutResize | 表格整体 changeSize 事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeSeriesWidth | 表格序号行宽事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeRowWidth | 行头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeRowHeight | 行头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeColWidth | 列头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeColHeight | 列头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeTreeWidth | 树状行头整体宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeMouseDown | resize 热区鼠标按下事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onLayoutResizeMouseUp | resize 热区鼠标松开事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onLayoutResizeMouseMove | resize 热区鼠标移动事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onKeyBoardDown | 键盘按下事件 | (event: KeyboardEvent) => void | ||
| onKeyBoardUp | 键盘松开事件 | (event: KeyboardEvent) => void | ||
| onCopied | 复制事件 | (data: CopyableList) => void | ||
| onActionIconHover | 行头操作 icon 悬停事件 | (event: FederatedPointerEvent) => void | ||
| onActionIconClick | 行头操作 icon 点击事件 | (event: FederatedPointerEvent) => void | ||
| onContextMenu | 右键单元格单击事件 (禁用右键菜单不生效？) | (event: FederatedPointerEvent) => void | ||
| onMouseHover | 表格鼠标悬停事件 | (event: FederatedPointerEvent) => void | ||
| onMouseUp | 表格鼠标松开事件 | (event: FederatedPointerEvent) => void | ||
| onSelected | 单元格选中事件 | (cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onReset | 交互状态重置事件 | (event: KeyboardEvent) => void | ||
| onLinkFieldJump | 链接字段跳转事件 | (data: { field: string; meta: Node | ViewMeta; record: Data }) => void | ||
| onScroll | 单元格滚动事件 （含行头和数值单元格） | ({position: CellScrollPosition} ) => void | ||
| onColCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息 | (cells: ColCell[]) => void; | ||
| onRowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: RowCell[]) => void; |