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; |