# Tabulator **Repository Path**: changyuanyanhuo/tabulator ## Basic Information - **Project Name**: Tabulator - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2025-12-12 - **Last Updated**: 2025-12-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # mammoth ## 简介 tabulator是一款表格生成器，支持表格自定义header、可缩放、可自定义单元格、可指定分割线颜色、支持冻结行列、支持onScroll滚动回调、支持指定行列的宽高、支持单元格的点击、可滚动到指定行列。 ## 下载安裝 ``` ohpm install @ohos/tabulator ``` OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitcode.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)。 ## 使用说明 #### initTabulator 初始化表格数据 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.initTabulator(this.tableHeader, this.tableData, "A") ``` #### updateDefinition 修改表头标题 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.updateDefinition(value1, value2!) ``` #### frozenColumn 冻结至列 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.frozenColumn(value1) ``` #### unfrozenColumn 取消冻结列 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.unfrozenColumn() ``` #### frozenRow 冻结行 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.frozenRow(Number(value1)) ``` #### unfrozenRow 取消冻结行 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.unfrozenRow() ``` ### scrollColumn 滚动到列 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.scrollColumn(value1) ``` #### scrollRow 滚动到行 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.scrollRow(Number(row)) ``` #### setRowHeight 改变行高 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.setRowHeight(Number(value1), Number(value2)) ``` #### setColumnWidth 改变列宽 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.setColumnWidth(value1, Number(value2)) ``` #### setColumnDivide 改变列分割线颜色 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.setColumnDivider(value1 as string) ``` #### setRowDivider 改变行分割线颜色 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.setRowDivider(value1 as string) ``` #### getScrollCallback 获取滚动回调 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.getScrollCallback((top?: number, left?: number) => { console.log('滚动到第' + top + 'px') if (top !== undefined) { this.horScrollNum = top?.toFixed().toString() } if (left !== undefined) { this.scrollnum = left?.toFixed().toString() } }) ``` #### getScrollCallback 获取滚动回调 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.getScrollCallback((top?: number, left?: number) => { console.log('滚动到第' + top + 'px') if (top !== undefined) { this.horScrollNum = top?.toFixed().toString() } if (left !== undefined) { this.scrollnum = left?.toFixed().toString() } }) ``` #### tapHoldCell 长按操作 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller.tapHoldCell(() => { this.clickCellDialog.open() }) ``` #### richText 设置文本大小 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.richText(36) ``` #### changeline 设置斜线 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.changeline() ``` #### setBorder 设置内嵌边框 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.setBorder() ``` #### setBackground 设置背景色 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.setBackground(this.bgColor) ``` #### setBorderColor 设置边框颜色 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.setBorderColor(this.bordColor) ``` #### restore 恢复单元格默认样式 ```typescript import { TabulatorController } from '@ohos/tabulator'; @State controller: TabulatorController = new TabulatorController(); this.controller1.restore() ``` ## 接口说明 接口 | 功能名称 | 入参内容 | 功能描述 | |--------------------|--------------------------------------------------------------------------|------------------------------| | initTabulator | (headers: IHeaderData[], data: Record[], index?: number \| string) | 初始化表格数据 | | updateDefinition | (title1: string, title2: string) | 修改表头标题 | | frozenColumn | (title: string) | 冻结指定标题的列 | | unfrozenColumn | (title: string) | 取消冻结指定标题的列 | | frozenRow | (index: number) | 冻结指定索引的行 | | unfrozenRow | (index: number) | 取消冻结指定索引的行 | | scrollColumn | (title: string) | 滚动到指定标题的列 | | scrollRow | (index: number) | 滚动到指定索引的行，可指定位置和额外参数 | | setRowHeight | (index: number, height: number, force?: boolean) | 改变指定索引行的高度，可选是否强制设置 | | setColumnWidth | (title: string, width: number) | 改变指定标题列的宽度 | | setColumnDivider | (borderColor?: string) | 设置纵向分割线样式（颜色），默认样式为实线，默认颜色为黑色 | | setRowDivider | (borderColor?: string) | 设置横向分割线样式（颜色），默认样式为实线，默认颜色为黑色 | | getScrollCallback | (callback: (top?: number, left?: number) => void) | 设置滚动回调函数，获取滚动时的顶部和左侧位置 | | tapHoldCell | (func?: () => void) | 设置单元格长按操作的回调函数 | | richText | (num: number) | 设置文本大小 | | changeline | 无参数 | 为单元格设置斜线 | | setBorder | 无参数 | 为单元格设置内嵌边框 | | setBackground | (backgroundColor: string) | 设置单元格背景色 | | setBorderColor | (borderColor: string) | 设置单元格边框颜色 | | restore | 无参数 | 恢复单元格默认样式 | IHeaderData | 字段名称 | 类型 | 功能描述 | |---------------------|----------------------------------------------------------------------|--------------------------------------------------------------------------| | title | string \| undefined | 表头显示的标题文本 | | field | string \| undefined | 对应数据中的字段名，用于绑定列数据 | | editor | CellInputType \| boolean \| undefined | 单元格编辑类型，可指定编辑组件类型或是否启用编辑 | | width | number \| undefined | 列的宽度（像素） | | headerSort | boolean \| undefined | 是否启用表头排序功能 | | resizable | "header" \| "cell" \| boolean \| undefined | 列宽是否可调整，可选仅表头调整、单元格调整或布尔值控制整体 | | formatter | FormatType \| string \| undefined | 单元格内容格式化类型，支持内置格式类型或自定义格式字符串 | | formatterParams | MoneyFormatterParams \| ImageFormatterParams \| LinkFormatterParams \| DateTimeFormatterParams \| TickCrossFormatterParams \| StarFormatterParams \| TrafficFormatterParams \| ProgressFormatterParams \| ArrayFormatterParams \| JSONFormatterParams \| ToggleFormatterParams \| undefined | 单元格格式化器的参数，根据 formatter 类型匹配对应参数类型 | | titleFormatter | FormatType \| undefined | 表头标题的格式化类型 | | titleFormatterParams | MoneyFormatterParams \| ImageFormatterParams \| LinkFormatterParams \| DateTimeFormatterParams \| TickCrossFormatterParams \| StarFormatterParams \| TrafficFormatterParams \| ProgressFormatterParams \| ArrayFormatterParams \| JSONFormatterParams \| ToggleFormatterParams \| undefined | 表头标题格式化器的参数，根据 titleFormatter 类型匹配对应参数类型 | | hozAlign | "left" \| "center" \| "right" \| undefined | 单元格内容的水平对齐方式（左对齐/居中/右对齐） | | editorParams | InputEditorParams \| TextAreaEditorParams \| NumberEditorParams \| RangeEditorParams \| ProgressEditorParams \| ListEditorParams \| undefined | 单元格编辑器的参数，根据 editor 类型匹配对应参数类型 | ### 依赖类型说明 | 类型名称 | 说明 | |-------------------------|--------------------------| | CellInputType | 单元格输入类型枚举 | | FormatType | 格式化类型枚举 | | MoneyFormatterParams | 金额格式化器参数类型 | | ImageFormatterParams | 图片格式化器参数类型 | | LinkFormatterParams | 链接格式化器参数类型 | | DateTimeFormatterParams | 日期时间格式化器参数类型 | | TickCrossFormatterParams| 勾选/叉号格式化器参数类型| | StarFormatterParams | 星级格式化器参数类型 | | TrafficFormatterParams | 流量格式化器参数类型 | | ProgressFormatterParams | 进度条格式化器参数类型 | | ArrayFormatterParams | 数组格式化器参数类型 | | JSONFormatterParams | JSON格式化器参数类型 | | ToggleFormatterParams | 开关格式化器参数类型 | | InputEditorParams | 输入框编辑器参数类型 | | TextAreaEditorParams | 文本域编辑器参数类型 | | NumberEditorParams | 数字编辑器参数类型 | | RangeEditorParams | 范围编辑器参数类型 | | ProgressEditorParams | 进度条编辑器参数类型 | | ListEditorParams | 列表编辑器参数类型 | ## 约束与限制 在下述版本验证通过： - DevEco Studio: DevEco Studio 6.0.1 Release(6.0.1.251), SDK: API12(5.0.0.71) ## 贡献代码 使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/pulls) 。 ## 开源协议 本项目遵循 [BSD-2-Clause]()， 请自由的享受和参与开源。