HTMLElement

Container DOM, requires width.

Array

tabular data. Currently supported data formats, taking human information as an example:

` [ {"name": "Zhang San","age": 20,"sex": "male","phone": "123456789","address": "Haidian District, Beijing"}, {"name": "Li Si","age": 30,"sex": "female","phone": "23456789","address": "Haidian District, Beijing"}, {"name": "Wang Wu","age": 40,"sex": "male","phone": "3456789","address": "Haidian District, Beijing"} ]

*

Table column configuration, each column needs to set configuration items separately, and the configuration items differ slightly depending on the cellType. cellType can support: 'text' | 'link' | 'image' | 'video' | 'sparkline' | 'progressbar' | 'chart， The specific configuration items for each cellType are as follows:

string

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

string

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

string

Specify the column type as 'image', the default cellType is 'text'.

string

Specify the column type as 'video', cellType can be omitted with the default as 'text'

string

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

string

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

string

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

string

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

string

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

string

Specify the column or row cell type as a custom function.

Whether to transpose, default is false

Whether to display the table header.

IPagination

Pagination configuration.

The basic table and VTable data analysis pivot table support paging, but the pivot combination chart does not support paging.

The specific types of IPagination are as follows:

boolean

Enables sorting by multiple columns.

*

Sorting state. SortState is defined as follows:

SortState {
/** Sorting criterion field \*/
field: string;
/** Sorting rule \*/
order: 'desc' | 'asc' | 'normal';
}

*

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.

`

number

When displayed as a tree structure, the indentation value of each layer of content.

number

When displayed as a tree structure, the number of levels is expanded by default. The default value is 1, which only displays the root node. If configured to Infinity, all nodes will be expanded.

Whether nodes at the same level are aligned by text, such as nodes without collapsed expansion icons and nodes with icons. Default is false

Drag the table header to move the position. Rules for frozen parts. The default is fixedFrozenCount.

• "disabled" (disables adjusting the position of frozen columns): The headers of other columns are not allowed to be moved into the frozen column, nor are the frozen columns allowed to be moved out. The frozen column remains unchanged.
• "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): allows the headers of other columns to move into the frozen column, and the frozen column to move out, and adjusts the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases.
• "fixedFrozenCount" (can adjust frozen columns and keep the number of frozen columns unchanged): Allows you to freely drag the headers of other columns into or out of the frozen column position while keeping the number of frozen columns unchanged.

Aggregation

CustomAggregation

Array

Function

Data aggregation summary analysis configuration, global configuration, each column will have aggregation logic, it can also be configured in the column (columns) definition, the configuration in the column has a higher priority.

aggregation?:
    | Aggregation
    | CustomAggregation
    | (Aggregation | CustomAggregation)[]
    | ((args: {
        col: number;
        field: string;
      }) => Aggregation | CustomAggregation | (Aggregation | CustomAggregation)[] | null);

Among them:

type Aggregation = {
  aggregationType: AggregationType;
  showOnTop?: boolean;
  formatFun?: (value: number, col: number, row: number, table: BaseTableAPI) => string | number;
};

type CustomAggregation = {
  aggregationType: AggregationType.CUSTOM;
  aggregationFun: (values: any[], records: any[]) => any;
  showOnTop?: boolean;
  formatFun?: (value: number, col: number, row: number, table: BaseTableAPI) => string | number;
};

*

Enable the group display function to display the hierarchical structure of the group fields in the data. The value is the group field name, which can be configured as one field or an array of multiple fields.

Enable the group title sticking function.

CustomLayout

Customize the group title layout.

groupTitleStyle(CustomLayoutStyle)