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

Specify header type, optional: 'text'|'link'|'image'|'video'|'checkbox', default 'text'.

Required Specify the header field, corresponding to the data source attribute

Configure data formatting

type FieldFormat = (record: any) => any;

Specifies the column width, which can be a specific value, 'auto', or a percentage like '20%'. If 'auto' is specified, the column width will be automatically adjusted according to the length of the entire column text; If a percentage is specified, the current column width will be adjusted according to the total table width;

Limit the maximum column width of this column

Limit the minimum column width of this column

Header name

Header cell style, configuration options are slightly different depending on the headerType. The configuration options for each headerStyle can be referred to:

• When headerType is 'text', it corresponds to headerStyle
• When headerType is 'link', it corresponds to headerStyle
• When headerType is 'image', it corresponds to headerStyle
• When headerType is 'video', it corresponds to headerStyle

Body cell style, type declaration:

style?: IStyleOption | ((styleArg: StylePropertyFunctionArg) => IStyleOption);

The type declaration for the callback function argument StylePropertyFunctionArg is as follows:

interface StylePropertyFunctionArg {
  row: number;
  col: number;
  /** Table instance */
  table: TableAPI;
  /** If format exists, the formatted or calculated value */
  value: string;
  /** Original value */
  dataValue: string;
  /** Specific to ProgressBarType, represents the proportion of the current value in the overall data range */
  percentile?: number;
  /** Path information of cell header */
  cellHeaderPaths: ICellHeaderPaths;
}

The type structure of IStyleOption is as follows:

Header cell icon configuration. Available configuration types are:

string | ColumnIconOption | (string | ColumnIconOption)[];

For the specific configuration of ColumnIconOption, refer to the definition

Body cell icon configuration.

icon?:
    | string
    | ColumnIconOption
    | (string | ColumnIconOption)[]
    | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]);

Whether to support sorting, or define a function to specify sorting rules

Whether to display the sort icon, no real sorting logic. If the sort field is set, this can be omitted

This column does not support hover interaction behavior

This column does not support selection

This header column does not support hover interaction behavior

This header column does not support selection

The description of the header when hover, which will be displayed in the form of a tooltip

The drop-down menu item configuration. The drop-down menu item can be a first-level menu item or a second-level menu item, as long as there is a configuration. The specific type is MenuListItem[].

Custom rendering of header cell, in function or object form. The type is: ICustomRenderFuc | ICustomRenderObj.

demo link tutorial link

The definition of ICustomRenderFuc is:

 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:

Custom layout element definition for header cell, suitable for complex layout cell content.

(args: CustomRenderFunctionArg) => ICustomLayoutObj;

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 ICustomLayoutObj type is defined as follows

export type ICustomLayoutObj = {
  rootContainer: Container | any;
  /**
   * 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;
  /**
   * Whether to also enable padding in style
   */
  enableCellPadding?: boolean;
};

Detailed configuration instructions are as follows:

Custom rendering for body cell header cell, in function or object form. The type is: ICustomRenderFuc | ICustomRenderObj.

demo link tutorial link

The definition of ICustomRenderFuc is:

 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:

Custom layout element definition for body cell, suitable for complex layout content.

(args: CustomRenderFunctionArg) => ICustomLayoutObj;

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 ICustomLayoutObj type is defined as follows

export type ICustomLayoutObj = {
  rootContainer: Container | any;
  /**
   * 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;
  /**
   * Whether to also enable padding in style
   */
  enableCellPadding?: boolean;
};

Detailed configuration instructions are as follows:

Whether the header can be dragged

Column width calculation mode: 'normal' | 'only-header' | 'only-body', only-header considers only the header content only-body considers only the body content normal can display all content

Whether to disable column width adjustment. If it is a transposed table or a pivot table with row-oriented indicators, this configuration does not take effect.

Whether to display this column as a tree structure, which needs to be combined with the records data structure to be implemented, the nodes that need to be expanded are configured with children to accommodate sub-node data. For example:

{
    "department": "Human Resources Department",
    "monthly_expense": "$45000",
    "children": [
      {
        "group": "Recruiting Group",
        "monthly_expense": "$25000",
        "children": [
          {
            "name": "John Smith",
            "position": "Recruiting Manager",
            "salary": "$8000"
          },
      }
    ]
}

Configure the column 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 .

Configure the display title of this column header

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

Configure arrays with upper columns, nesting structures to describe column grouping relationships.

Whether to hide the header title of the subtable header. The default value is not hidden.

Not required.

Data aggregation summary configuration to analyze the column data.

Global options can also be configured to configure aggregation rules for each column.

Please refer to the tutorial document

Not required.

Weather hide column.

Configuration item exclusive to progressbar type

The minimum value of the progress bar display range, support dynamic acquisition through functions

Configuration item exclusive to progressbar type

The maximum value of the progress bar display range, support dynamic acquisition through functions

Configuration item exclusive to progressbar type

Progress bar type. Default is 'default'.

• default: Progress bar from min to max

• negative: With min as a negative value, the progress bar will be divided into positive and negative directions at 0

• negative_no_axis: Display the same as 'negative' but without a 0-value axis

Configuration item exclusive to progressbar type

Data dependency for the progress graph. If the text displayed in the cell and the data field used by the progress graph are different, configure the data field used by the progress graph in dependField.