HTMLElement

Container DOM, requires width.

Array

tabular data. The currently supported data formats are, taking the sales of large supermarkets in North America as an example:

[
  {
    "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"
  }
]

Array

List header tree, type:(IDimensionHeaderNode|IIndicatorHeaderNode)[]. Among them, IDimensionHeaderNode refers to the dimension value node of the dimension non-indicator, and IIndicatorHeaderNode refers to the indicator name node.

The specific configuration items of IDimensionHeaderNode are as follows:

export interface IDimensionHeaderNode {
  /**
   * The unique identifier of the dimension, corresponding to the field name of the dataset
   */
  dimensionKey: string | number;
  /** dimension member value */
  value: string;
  /** Subdimension tree structure under dimension members. */
  children?: (IDimensionHeaderNode|IIndicatorHeaderNode)[] ;
  /** The collapsed state is used with the tree structure display. Note: only valid in rowTree */
  hierarchyState?: HierarchyState;
  /** Merge display of this dimension value across cells, default is 1. If the maximum number of header levels is 5, then the last level will merge as many cells as there are levels left. */
  levelSpan?: number;
}

IIndicatorHeaderNode specific configuration items are as follows:

export interface IIndicatorHeaderNode {
  /**
   * The key value of the indicator corresponds to the field name of the data set
   */
  indicatorKey: string | number;
  /**
   * Indicator names such as: "sales", "for example", correspond to the value displayed in the cell. You can leave it blank, if you don’t fill it in, take the value from the corresponding configuration of the indicators and display it
   */
  value?: string;
  /** Merge display of this dimension value across cells, default is 1. If the maximum number of header levels is 5, then the last level will merge as many cells as there are levels left. */
  levelSpan?: number;
}

Array

Row header tree, same structure as columnTree.

*

The style and format configuration corresponding to the header of each level of dimensions should be set separately for each dimension. The configuration items will vary slightly depending on the headerType. Supported headerType values are: 'text' | 'link' | 'image' | 'video'. The specific configuration items for each headerType are as follows:

string

Specify the column type as 'text', headerType can be omitted and the default is 'text'

string

Specify the column type as 'link', headerType can be omitted and defaults to 'text'

string

Specify the column type as 'image', headerType can be omitted and defaults to 'text

string

Specifies the column type as 'video', headerType can be omitted and defaults to 'text'

*

The structure is the same as the list header tree structure columns configuration

The row header corresponds to the style and format configuration of each level of dimension. Each type of dimension needs to be set separately. The configuration items have slight differences according to the headerType. The supported headerTypes are: 'text' | 'link' | 'image' | 'video'. The specific configuration items for each headerType are as follows:

string

Specify the column type as 'text', headerType can be omitted and the default is 'text'

string

Specify the column type as 'link', headerType can be omitted and defaults to 'text'

string

Specify the column type as 'image', headerType can be omitted and defaults to 'text

string

Specifies the column type as 'video', headerType can be omitted and defaults to 'text'

Array

The specific configuration of each indicator in the perspective combination chart, such as style, format, title, etc., is different from the pivot table. The indicator type here only supports the configuration of the chart type.

string

Specify the column type as 'chart', cellType can be omitted and defaults to 'text'

The indicator is displayed on the column, default is true. If configured to false, it will be displayed in rows and the indicator will be displayed in rows.

string

indicator header for displaying the value to the corner header

Object

The configuration and style customization of the corner table header.

Whether to hide the indicator name

Whether to display row headers.

Whether to show column headers.

Object

Add a line to the top of the row header to display the dimension name, which can be customized or display the combination name of title

Object

Add a line to the top of the column header to display the dimension name, which can be customized or display the combination name of title

string

Adjust the effective range of column width, configurable items:

• column: adjust the column width only adjust the current column
• indicator: Columns corresponding to the same indicator will be adjusted when the column width is adjusted
• indicatorGroup: Adjust the width of all indicator columns under the same parent dimension
• all: All column widths are adjusted

string

Adjust the effective range of row height, configurable items:

• row: adjust the row height only adjust the current row
• indicator: rows corresponding to the same indicator will be adjusted when the row height is adjusted
• indicatorGroup: Adjust the height of all indicator rows under the same parent dimension
• all: All row heights are adjusted

boolean

Whether to enable asynchronous rendering of charts

number

Turn on asynchronous rendering of charts. The number of progressively rendered charts in each batch is recommended to be 5-10. The details can be adjusted depending on the overall effect. Default value is 5.

*

Table column width calculation mode, can be 'standard' (standard mode), 'adaptive' (container width adaptive mode) or 'autoWidth' (automatic width mode), default is 'standard'.

• 'standard': Use the width specified by the width property as the column width.
• 'adaptive': Use the width of the table container to allocate column width.
• 'autoWidth': Calculate column width automatically based on the width of the column header and body cells content, ignoring the width property settings.

*

The calculation mode of table row height, which can be 'standard' (standard mode), 'adaptive' (adaptive container height mode) or 'autoHeight' (automatic row height mode), the default is 'standard'.

• 'standard': use defaultRowHeight and defaultHeaderRowHeight as row height.
• 'adaptive': Use the height of the container to assign the height of each row.
• 'autoHeight': Automatically calculate line height based on content, based on fontSize and lineHeight(font height)，include padding. The related collocation setting item autoWrapText automatically wraps the line, and the line height can be calculated according to the content of the multi-line text after the line wrap.

*

The width adaptation strategy in adaptive mode, the default is 'only-body'.

• 'only-body': Only the columns in the body part participate in the width adaptation calculation, and the width of the header part remains unchanged.
• 'all': All columns participate in width adaptation calculation.

*

The height adaptable strategy in adaptive mode, default is 'only-body'.

• 'only-body': Only the rows in the body part participate in the height adaptation calculation, and the height of the header part remains unchanged.
• 'all': All columns participate in the height adaptation calculation.

*

When calculating the content width, the limited area participates in the calculation:

• 'only-header': Only the header content is calculated.
• 'only-body': Only the body cell content is calculated.
• 'normal': Normal calculation, that is, calculating the header and body cell contents.

Whether to automatically wrap text

The configuration item autoFillWidth is used to control whether to automatically fill the container width. Different from the effect of adaptive adaptive container of width mode widthMode, autoFillWidth controls that only when the number of columns is small, the table can automatically fill the width of the container, but when the number of columns exceeds the container, according to the actual situation A scroll bar can appear to set the column width.

The configuration item autoFillHeight is used to control whether to automatically fill the container height. Different from the effect of adaptive adaptive container of height mode heightMode, autoFillHeight controls that only when the number of rows is small, the table can automatically fill the height of the container, but when the number of rows exceeds the container, according to the actual situation A scroll bar can appear to set the row height.

The maximum number of characters that can be displayed in a cell, default is 200

number

Maximum number of operable records, such as the maximum number of data entries that can be copied in a copy operation

boolean

number

Specify the maximum column width when calculating column width, which can be boolean or a specific value. Default is 450.

boolean

number

Minimum column width limit. If set to true, the column width will be limited to a minimum of 10px when dragging to change the column width. If set to false, there will be no limit. Or set it directly to some numeric value. Default is 10px.

The number of frozen columns

The number of frozen columns(including the header)

Freeze Columns Right

number of frozen rows at the bottom

Allow the number of frozen columns, indicating how many columns will show the frozen operation button (effective for basic tables)

Whether to show the fixed column pin icon, effective for basic tables

Default row height

Array

number

Default row height for list header, can be set row by row. If not set, defaultRowHeight is used.

Default column width value

Array

number

Default column width for row headers, can be set column by column. If not set, defaultColWidth is used.

Object

Shortcut key function settings, specific configuration items:

Object

Issue settings related to event triggering, specific configuration items:

Object

Align excel advanced capabilities

Mouse hover over the cell bottom border can drag and adjust row height. This operation can trigger the following range:

• 'all' The entire row, including header and body cells, can adjust row height
• 'none' Disable adjustment
• 'header' Only adjustable in header cells
• 'body' Only adjustable in body cells

The switch of dragging the header to move the position. After selecting a cell, drag the cell to trigger the move. The range of replaceable cells is limited:

• 'all' All headers can be swapped
• 'none' Cannot be swapped
• 'column' Only the column header can be swapped
• 'row' Only the row header can be swapped

Object

Hover interaction configuration, specific configuration items as follows:

Object

Cell selection interaction configuration, specific configuration items as follows:

Object

Table theme, which has built-in theme names DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY. The configuration can be made using built-in types or directly with string names:

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

or

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

You can also extend built-in themes, for example, change the font based on the ARCO theme:

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

Or you can directly define a custom theme:

{
  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

Configuration related to the drop-down menu. Disappearance timing: automatically disappears after clicking the area outside the menu. Specific configuration items as follows:

Object

表格标题配置。

Object

Table empty data prompt.

You can directly configure boolean or IEmptyTip type objects. The default value is false, which means no prompt information is displayed.

The IEmptyTip type is defined as follows:

Object

Tooltip related configuration. Specific configuration items are as follows:

*

Legend configuration, currently providing three types of legends, namely discrete legend ('discrete'), continuous color legend ('color'), and continuous size legend ('size').

string

Discrete legend configuration. Please refer to Configuration and Legend demo in VChart

Object

Continuous color legend configuration.

TODO: Add discrete legend illustration

Object

Continuous size legend configuration.

TODO: Add discrete legend illustration

*

Specifically the same as the axis configuration of VChart, it can support linear axis, discrete axis and time axis.

Supports axis configuration in four directions. By default, the upper axis is at the last row of the column header, the lower axis is at the frozen row at the bottom of the table, the left axis is at the last column of the row header, and the upper axis is at the rightmost fixed column of the header. If axes of a certain orientation are also configured in the spec of the indicator, the priority in the spec is higher.

Example:

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

Function

Object

Custom rendering in function or object form. Type: ICustomRenderFuc | ICustomRenderObj.

Where ICustomRenderFuc is defined as:

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

The type declaration for callback function argument CustomRenderFunctionArg is:

interface CustomRenderFunctionArg {
  row: number;
  col: number;
  table: TableAPI;
  /**Formatted value */
  value: string|number;
  /**Original value */
  dataValue: string|number;
  rect?: RectProps;
}

The definition of ICustomRenderObj is as follows:

export type ICustomRenderObj = {
  /** Configured type collection */
  elements: ICustomRenderElements;
  /** Desired cell height */
  expectedHeight: number;
  /** Expected cell width */
  expectedWidth: number;
  /**
   * Do you still need to render content by default? Only if the configuration is true, it will be drawn. By default, it will not be drawn.
   */
  renderDefault?: boolean;
};

Detailed configuration instructions are as follows:

Table scrolling behavior, can be set: 'auto'|'none', the default value is 'auto'.

'auto': Trigger the browser's default behavior when the table scrolls to the top or bottom;
'none': don't triggers the browser's default behavior when the table scrolls to the top or bottom;

Function

Customize cell merging rules. When the incoming row and column numbers are within the target area, the merging rules are returned:

• text: Merge text in cells
• range: merged range
• style: style of merged cells Example:

  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}[]
}

Custom cell style

• id: the unique id of the custom style
• style: Custom cell style, which is the same as the style configuration in column. The final rendering effect is the fusion of the original style of the cell and the custom style.

Array

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

Custom cell style assignment

• cellPosition: cell position information, supports configuration of single cells and cell areas
  • Single cell: { row: number, column: number }
  • Cell range: { range: { start: { row: number, column: number }, end: { row: number, column: number} } }
• customStyleId: Custom style id, the same as the id defined when registering the custom style

string

Object

Function

Global configuration cell editor

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

Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts .

string

Object

Function

Global configuration table header display title title editor

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

*

The trigger timing for entering the editing state.

/** Edit triggering time: double click event | single click event | api to manually start editing | keydown event. Default is double click 'doubleclick' */
editCellTrigger?:'doubleclick' | 'click' | 'api' | 'keydown' | ('doubleclick' | 'click' | 'api' | 'keydown')[];

IRowSeriesNumber

set row serial number.

Whether to enable line break, the default is false.

Whether to clear the container DOM.

number

Directly set the width of the canvas. Do not determine the size of the table based on the container width and height.

number

Directly set the height of the canvas. Do not determine the size of the table based on the width and height of the container.

boolean

Object

Table entry animation configuration.

animationAppear?: boolean | {
  type?: 'all' | 'one-by-one';
  direction?: 'row' | 'column';
  duration?: number;
  delay?: number;
};

You can configure true to enable the default animation, or you can configure the animation parameters:

• type The type of the entry animation, currently supports all and one-by-one, and the default is one-by-one
• direction The direction of the entry animation, currently supports row and column, and the default is row
• duration The duration of a single animation, in milliseconds, for one-by-one, it is the duration of one animation, and the default is 500
• delay The delay of the animation, in milliseconds; for one-by-one, it is the time difference between the two animations, for all, it is the delay of all animations, and the default is 0

*

Format the value when copying.