!!!###!!!title=PivotTable-rows-text——VisActor/VTable option documents!!!###!!!!!!###!!!description=VisActor/VTable option documents. This chapter mainly introduces VTable configuration items and their usage to quickly generate the required tables.!!!###!!!

PivotTable-rows-text.headerType = 'text'

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

PivotTable-rows-text.dimensionKey

string

Required Unique identifier of the dimension, corresponding to the field name of the dataset

PivotTable-rows-text.title

string

Required Dimension name, the angle header can be configured to display the dimension name

PivotTable-rows-text.headerFormat

FieldFormat

Format of the dimension value

type FieldFormat = (title: number|string, col:number, row:number, table:PivotTable) => any;

PivotTable-rows-text.width

number
string

This property takes effect when the dimension serves as a row header and represents the width of the dimension cell. The column width can be specified as a specific number, 'auto', or a percentage like '20%'. If 'auto' is specified, the column width will be adjusted automatically according to the length of the whole column text; If a percentage is specified, the current column width will be adjusted according to the total width of the table;

PivotTable-rows-text.maxWidth

number
string

This property takes effect when the dimension serves as a row header and represents the maximum width of the dimension cell

PivotTable-rows-text.minWidth

number
string

This property takes effect when the dimension serves as a row header and represents the minimum width of the dimension cell

PivotTable-rows-text.headerStyle

IStyleOption
Function

Header cell style, type declaration:

headerStyle?: IStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption);

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;
}

IStyleOption type structure is as follows:

Click to expand

PivotTable-rows-text.headerIcon

string
Object
Array
Function

Header cell icon configuration

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

ColumnIconOption specific configuration: https://visactor.io/vtable/option/ListTable-columns-text#icon

PivotTable-rows-text.description

string
Function

Description information for header hover, displayed as a tooltip

 description?: string | ((args: CellInfo) => string);

PivotTable-rows-text.cornerDescription

string

Description information for hover, displayed as a tooltip

PivotTable-rows-text.headerCustomRender

Function
Object

Custom rendering function for header cells, you can specify the rendering method for headers. For details, please refer to Basic table custom rendering configuration

PivotTable-rows-text.headerCustomLayout

Function

Custom layout element definition for header cells, this customization is suitable for cells with complex content layouts.

(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:

Click to expand

PivotTable-rows-text.dropDownMenu

Array

Dropdown menu item configuration. Dropdown menu items can be top-level menu items or second-level menu items, and only one configuration is required. The specific type is MenuListItem[].

PivotTable-rows-text.cornerDropDownMenu

Array

Angle header cell display drop-down button and drop-down menu item configuration. Dropdown menu items can be top-level menu items or second-level menu items, and only one configuration is required. The specific type is MenuListItem[].

PivotTable-rows-text.cornerHeaderIcon

string
Object
Array
Function

Pivot table corner cell icon configuration

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

For the specific configuration of ColumnIconOption, please refer to: https://visactor.io/vtable/option/ListTable-columns-text#icon

PivotTable-rows-text.dragHeader

boolean

Whether the header can be dragged

PivotTable-rows-text.drillDown

boolean

Display drill-down icon, clicking it will trigger a corresponding event

PivotTable-rows-text.drillUp

boolean

Display drill-up icon, clicking it will trigger a corresponding event

PivotTable-rows-text.showSort

boolean

Whether the dimension value cell displays the sort icon. Clicking it does not have data sorting logic.

PivotTable-rows-text.sort

boolean

Whether the corresponding dimension header cell displays the sort icon.

Sorting rules:

If the sorting rules for this dimension are configured in dataConfig.sortRules, the data is sorted according to the rules in dataConfig.sortRules.

If the sorting rules for the dimension are not configured in dataConfig.sortRules, the default is to use the natural sorting of the dimension value string.

PivotTable-rows-text.showSortInCorner

boolean

Whether to display sorting in the dimension name cell in the corner header. Clicking it does not have data sorting logic