HTMLElement

容器 DOM，需要具有宽。

可放到初始化参数中。

Array

表格数据。 目前支持传入平坦化的数据格式，以北美大型超市销售情况为例：

[
  {
    "Category": "Technology",
    "Sales": "650.5600051879883",
    "City": "Amarillo"
  },
  {
    "Category": "Technology",
    "Profit": "94.46999931335449",
    "City": "Amarillo"
  },
  {
    "Category": "Furniture",
    "Quantity": "14",
    "City": "Amarillo"
  },
  {
    "Category": "Furniture",
    "Sales": "3048.5829124450684",
    "City": "Amarillo"
  },
  {
    "Category": "Furniture",
    "Profit": "-507.70899391174316",
    "City": "Amarillo"
  },
  {
    "Category": "Office Supplies",
    "Quantity": "60",
    "City": "Anaheim"
  }
]

boolean

透视表是否开启数据分析。 默认 false

如果传入的数据 records 是明细数据，需要 VTable 做聚合分析则开启该配置将其设置为 true。

如传入数据是经过聚合好的，为了提升性能这里设置为 false，同时呢要求传入自己组织好的行头树结构 columnTree 和 rowTree。

IDataConfig

数据分析相关配置 enableDataAnalysis 开启后该配置才会有效。

/**
 * 数据处理配置
 */
export interface IDataConfig {
  aggregationRules?: AggregationRules; //按照行列维度聚合值计算规则；
  sortRules?: SortRules; //排序规则；
  filterRules?: FilterRules; //过滤规则；
  totals?: Totals; //小计或总计；
  /**
   * 目前mappding还不太好用  不建议使用  建议先用style
   */
  mappingRules?: MappingRules;
  derivedFieldRules?: DerivedFieldRules;
}

Array

列表头树，类型为:IDimensionHeaderNode|IIndicatorHeaderNode[]。其中 IDimensionHeaderNode 指的是维度非指标的维度值节点，IIndicatorHeaderNode 指的是指标名称节点。

IDimensionHeaderNode 具体配置项如下：

export interface IDimensionHeaderNode {
  /**
   * 维度的唯一标识，对应数据集的字段名称
   */
  dimensionKey: string | number;
  /** 维度成员值 */
  value: string;
  /** 维度成员下的子维度树结构 */
  children?: IDimensionHeaderNode|IIndicatorHeaderNode[];
  /** 折叠状态 配合树形结构展示使用。注意：仅在rowTree中有效 */
  hierarchyState?: HierarchyState;
}

IIndicatorHeaderNode 具体配置项如下：

export interface IIndicatorHeaderNode {
  /**
   * 指标的key值 对应数据集的字段名
   */
  indicatorKey: string | number;
  /**
   * 指标名称 如：“销售额”，“例如”， 对应到单元格显示的值。可不填，不填的话 从indicators的对应配置中取值显示
   */
  value?: string;
}

Array

行表头树，结构同 columnTree。

*

列表头对应各级维度的样式及format配置，每中维度需要分别设置配置项，配置项根据headerType不同有略微差别，headerType可支持：'text' | 'link' | 'image' | 'video'， 每种headerType的配置项具体如下：

string

指定列类型为'text', headerType可缺省默认为'text'

string

指定列类型为'link', headerType可缺省默认为'text'

string

指定列类型为'image', headerType可缺省默认为'text

string

指定列类型为'video', headerType可缺省默认为'text'

*

结构同列表头树形结构columns配置

行表头对应各级维度的样式及format配置，每中维度需要分别设置配置项，配置项根据headerType不同有略微差别，headerType可支持：'text' | 'link' | 'image' | 'video'， 每种headerType的配置项具体如下：

string

指定列类型为'text', headerType可缺省默认为'text'

string

指定列类型为'link', headerType可缺省默认为'text'

string

指定列类型为'image', headerType可缺省默认为'text

string

指定列类型为'video', headerType可缺省默认为'text'

Array

透视表中各个指标的具体配置，如样式，format，title 等，每种指标需要分别设置配置项，配置项根据 cellType 不同有略微差别，cellType 可支持：'text' | 'link' | 'image' | 'video' | 'progressbar' | 'sparkline'， 每种 cellType 的配置项具体如下：

string

指定列类型为'text'，cellType 缺省的话会被默认为'text'

string

指定列类型为'link'，cellType 缺省的话会被默认为'text'

string

指定列类型为'image'，cellType可缺省默认为'text

string

指定列类型为'video'，cellType 缺省的话会被默认为'text'

string

指定列类型为'progressbar'，cellType 缺省的话会被默认为'text'

string

指定列类型为'sparkline'，cellType 缺省的话会被默认为'text'

string

指定列类型为'chart'，cellType 缺省的话会被默认为'text'

指标显示在列上，默认是 true。如果配置为 false，则显示在行，指标以行展示

*

层级维度结构显示形式，平铺还是树形结构。

平铺示例 树形示例

*

IExtensionRowDefine定义如下：

export interface IExtensionRowDefine {
  rows: (IDimension | string)[];
  rowTree: IHeaderTreeDefine[] | ((args: { dimensionKey: string | number; value: string }[]) => IHeaderTreeDefine[]);
}

其中rows结构同外层的配置项rows定义相同，注意这里的rows不能省略 必须要填写正确

其中rowTree结构同外层的配置项rowTree定义相同，但这里同时支持配置函数形式

number

初始化展开层数。除了这里可以配置统一节点的展开层数，还可以结合配置项hierarchyState设置每个结点的展开状态。

number

如果设置了树形展示，子节点单元格中显示内容相比其父节点内容的缩进距离。

同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认 false

string

指标标题 用于显示到角头的值

Object

角表头各项配置及样式自定义。

是否隐藏指标名称

是否显示行表头。

是否显示列表头。

Object

行表头最上层增加一行来显示维度名称 可以自定义或者显示 title 组合名

Object

列表头最上层增加一行来显示维度名称 可以自定义或者显示 title 组合名

string

调整列宽的生效范围，可配置项：

• column: 调整列宽只调整当前列
• indicator: 调整列宽时对应相同指标的列都会被调整
• indicatorGroup: 调整同父级维度下所有指标列的宽度
• all： 所有列宽都被调整

string

调整行高的生效范围，可配置项：

• row: 调整行高只调整当前行
• indicator: 调整行高时对应相同指标的行都会被调整
• indicatorGroup: 调整同父级维度下所有指标行的宽度
• all： 所有行高都被调整

Array

设置排序状态，只对应按钮展示效果 无数据排序逻辑

 {
    dimensions: IDimensionInfo[];
    order: 'desc' | 'asc' | 'normal';
  }[];

• dimensions 设置要排序的维度信息，是一个 IDimensionInfo 类型的数组。

IDimensionInfo的定义为：

interface IDimensionInfo {
  dimensionKey?: string;
  value?: string;
  indicatorKey?: string;
  isPivotCorner?: boolean;
}

• order 指定排序方式，可以是 'desc'（降序）、'asc'（升序）或 'normal'（不排序）。

*

表格列宽度的计算模式，可以是 'standard'（标准模式）、'adaptive'（自适应容器宽度模式）或 'autoWidth'（自动宽度模式），默认为 'standard'。

• 'standard'：使用 width 属性指定的宽度作为列宽度。
• 'adaptive'：使用表格容器的宽度分配列宽度。
• 'autoWidth'：根据列头和 body 单元格中内容的宽度自动计算列宽度，忽略 width 属性的设置。

*

表格行高的计算模式，可以是 'standard'（标准模式）、'adaptive'（自适应容器高度模式）或 'autoHeight'（自动行高模式），默认为 'standard'。

• 'standard'：采用 defaultRowHeight 及 defaultHeaderRowHeight 作为行高。
• 'adaptive'：使用容器的高度分配每行高度，基于每行内容计算后的高度比例来分配。
• 'autoHeight'：根据内容自动计算行高，计算依据 fontSize 和 lineHeight(文字行高)，以及 padding。相关搭配设置项autoWrapText自动换行，可以根据换行后的多行文本内容来计算行高。

*

adaptive 模式下宽度的适应策略，默认为 'only-body'。

• 'only-body'：只有 body 部分的列参与宽度适应计算，表头部分宽度不变。
• 'all'：所有列参与宽度适应计算。

*

adaptive 模式下高度的适应策略，默认为 'only-body'。

• 'only-body'：只有 body 部分的行参与高度适应计算，表头部分高度不变。
• 'all'：所有列参与高度适应计算。

是否自动换行

配置项 autoFillWidth，用于控制是否自动撑满容器宽度。区别于宽度模式widthMode的adaptive的自适应容器的效果，autoFillWidth 控制的是只有当列数较少的时候，表格可以自动撑满容器宽度，但是当列数超过容器的时候根据真实情况来定列宽可出现滚动条。

配置项 autoFillHeight，用于控制是否自动撑满容器高度。区别于高度模式heightMode的adaptive的自适应容器的效果，autoFillHeight 控制的是只有当行数较少的时候，表格可以自动撑满容器高度，但是当行数超过容器的时候根据真实情况来定行高可出现滚动条。

单元格中可显示最大字符数 默认 200

number

最大可操作的记录数 如 copy 操作可复制出最大数据条目数

boolean

number

计算列宽时 指定最大列宽 可设置 boolean 或者具体的值 默认为 450

boolean

number

最小列宽限制。如设置为 true 则拖拽改变列宽时限制列宽最小为 10px，设置为 false 则不进行限制。或者直接将其设置为某个数字值。默认为 10px。

冻结列数

右侧冻结列数

底部冻结行数

允许冻结列数，表示前多少列会出现冻结操作按钮（基本表格生效）

是否显示固定列图钉（基本表格生效）

默认行高

Array

number

列表头默认行高 可以按逐行设置 如果没有就取 defaultRowHeight

列宽默认值

Array

number

行表头默认列宽 可以按逐列设置 如果没有就取 defaultColWidth

Object

快捷键功能设置，具体配置项：

Object

事件触发相关问题设置，具体配置项：

Object

对齐 excel 高级能力

鼠标 hover 到单元格右边界可拖拽调整列宽。该操作可触发的范围：

• 'all' 整列包括表头和 body 处的单元格均可调整列宽
• 'none' 禁止调整
• 'header' 只能在表头处单元格调整
• 'body' 只能在 body 单元格调整

鼠标 hover 到单元格下边界可拖拽调整行高。该操作可触发的范围：

• 'all' 整列包括表头和 body 处的单元格均可调整列宽
• 'none' 禁止调整
• 'header' 只能在表头处单元格调整
• 'body' 只能在 body 单元格调整

控制拖拽表头移动位置的开关。选中某个单元格后，鼠标拖拽该单元格可触发移动。 可换位单元格范围限定：

• 'all' 所有表头均可换位
• 'none' 不可换位
• 'column' 只有换列表头可换位
• 'row' 只有换行表头可换位

Object

hover 交互配置，具体配置项如下：

Object

选择单元格交互配置，具体配置项如下：

Object

表格主题，其中内置主题名称有DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY，具体配置方式可用内置类型或者直接使用字符串名称配置：

• VTable.themes.DEFAULT
• VTable.themes.ARCO;
• VTable.themes.BRIGHT
• VTable.themes.DARK
• VTable.themes.SIMPLIFY

or

• 'default'
• 'arco'
• 'bright'
• 'dark'
• 'simplify'

同时可以基于内置主题进行扩展，例如想基于ARCO主题改变字体:

VTable.themes.ARCO.extend({
  fontSize: '14px',
  fontFamily: 'PingFangSC'
})

或者直接自定义一套专属主题：

{
  defaultStyle:{
    borderLineWidth:0,
  },
  headerStyle:{
    frameStyle:{
      borderColor:'blue',
      borderLineWidth:[0,0,1,0]
    }
  },
  rowHeaderStyle:{
    frameStyle:{
      borderColor:'blue',
      borderLineWidth:[0,1,0,0]
    }
  },
  cornerHeaderStyle:{
    frameStyle:{
      borderColor:'blue',
      borderLineWidth:[0,1,1,0]
    }
  }
}

Object

下拉菜单的相关配置。消失时机：显示后点击菜单区域外自动消失。具体配置项如下：

Object

表格标题配置。

Object

tooltip 相关配置。具体配置如下：

*

图例配置，目前提供了三种图例类型，分别是离散图例（'discrete'），连续型颜色图例（'color'），连续型尺寸图例（'size'）。

string

离散图例配置。可参考 VChart 中的配置和图例 demo

string

连续型颜色图例配置。

TODO: 补充离散图例图示

string

连续型尺寸图例配置。

TODO: 补充离散图例图示

*

具体同 VChart 的轴配置，可支持线性轴，离散轴和时间轴。

支持四个方向的轴配置，默认上轴在列表头的最后一行，下轴在表格底部的冻结一行，左轴在行表头的最后一列，上轴在表头最右侧固定的一列。如果在 indicator 的 spec 中同时也配置了某一方位的 axes，spec 中的优先级较高。

示例：

{
  axes: [
      {
        orient: 'bottom'
      },
      {
        orient: 'left',
        title: {
          visible: true
        }
      },
      {
        orient: 'right',
        visible: true,
        grid: {
          visible: false
        }
      }
    ]
}

Function

Object

自定义渲染 函数形式或者对象形式。类型为：ICustomRenderFuc | ICustomRenderObj。

示例链接 教程链接

其中 ICustomRenderFuc 定义为：

 type ICustomRenderFuc = (args: CustomRenderFunctionArg) => ICustomRenderObj;

回调函数参数CustomRenderFunctionArg的类型声明为：

interface CustomRenderFunctionArg {
  row: number;
  col: number;
  table: TableAPI;
  /**format之后的值 */
  value: string|number;
  /**原始值 */
  dataValue: string|number;
  rect?: RectProps;
}

ICustomRenderObj 的定义如下：

export type ICustomRenderObj = {
  /** 配置出来的类型集合 */
  elements: ICustomRenderElements;
  /** 期望单元格的高度 */
  expectedHeight: number;
  /** 期望单元格的宽度 */
  expectedWidth: number;
  /**
   * 是否还需要默认渲染内容 只有配置true才绘制 默认 不绘制
   */
  renderDefault?: boolean;
};

详细配置说明如下：

表格滚动行为，可设置：'auto'|'none'，默认值为'auto'。

'auto': 表格滚动到顶部或者底部时，触发浏览器默认行为;
'none': 表格滚动到顶部或者底部时, 触发浏览器默认行为;

Function

自定义单元格合并规则，传入的行列号在目标区域内时，返回合并规则：

• text: 合并单元格内的文字
• range: 合并的范围
• style: 合并单元格的样式 示例：

  customMergeCell: (col, row, table) => {
    if (col > 0 && col < 8 && row > 7 && row < 11) {
      return {
        text: 'merge text',
        range: {
          start: {
            col: 1,
            row: 8
          },
          end: {
            col: 7,
            row: 10
          }
        },
        style: {
          bgColor: '#ccc'
        }
      };
    }
  }

Array

{
  customCellStyle: {id: string;style: ColumnStyleOption}[]
}

自定义单元格样式

• id: 自定义样式的唯一 id
• style: 自定义单元格样式，与column中的style配置相同，最终呈现效果是单元格原有样式与自定义样式融合

Array

{
  customCellStyleArrangement: {cellPosition: {row?: number; col?: number; range?: {start: {row: number; col: number}; end: {row: number; col: number}}}; customStyleId: string}[]
}

自定义单元格样式分配

• cellPosition: 单元格位置信息，支持配置单个单元格与单元格区域
  • 单个单元格：{ row: number, column: number }
  • 单元格区域：{ range: { start: { row: number, column: number }, end: { row: number, column: number} } }
• customStyleId: 自定义样式 id，与注册自定义样式时定义的 id 相同

string

Object

Function

全局配置单元格编辑器

editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);

其中 IEditor 是@visactor/vtable-editors 中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts。

*

进入编辑状态的触发时机。

/** 编辑触发时机:双击事件 | 单击事件 | api手动开启编辑。默认为双击'doubleclick' */
editCellTrigger?: 'doubleclick' | 'click' | 'api';

IRowSeriesNumber

配置行序号。