How to customize highlighted cells in the VTable component

Question title

How to customize highlighted cells in the VTable component?

Problem description

How to customize highlighted cells and specify the highlighting style using the VTable table component?

Solution

VTable supports custom cell styles, which can be used to implement custom highlighting function.

Registration style

First, you need to register a custom style

Need to define idand styletwo attributes:

• Id: the unique id of the custom style

• Style: Custom cell style, the same as the styleconfiguration in the column, the final presentation effect is the fusion of the original cell style and the custom style

Custom style registration is divided into two ways, optionconfiguration and API configuration:

• The customCellStyle property in the option option receives an array composed of multiple custom style objects.

// init option
const option = {
  // ......
  customCellStyle: [
    {
      id: 'custom-1',
      style: {
        bgColor: 'red'
      }
    }
  ]
}

• The API can register custom styles through the registerCustomCellStylemethods provided by the VTable instance:

instance.registerCustomCellStyle(id, style)

Assignment style

To use a registered custom style, you need to assign the custom style to the cell. Assignment requires defining two properties, cellPositionand customStyleId:

• cellPosition: Cell position information, supports configuring individual cells and cell ranges.

  • Single cell: {row: number, col: number}
  • Cell range: {range: {start: {row: number, col: number}, end: {row: number, col: number}}}

• customStyleId: Custom style id, the same as the id defined when registering custom styles

There are two ways to allocate, configure in optionand configure using API:

• The customCellStyleArrangementproperty in option receives an array of custom assignment style objects:

// init option
const option = {
  // ......
  customCellStyleArrangement: [
    {
      cellPosition: {
        col: 3,
        row: 4
      },
      customStyleId: 'custom-1'
    },
    {
      cellPosition: {
        range: {
          start: {
            col: 5,
            row: 5
          },
          end: {
            col: 7,
            row: 7
          }
        }
      },
      customStyleId: 'custom-2'
    }
  ]
}

• The API can assign custom styles through the arrangeCustomCellStylemethods provided by the VTable instance:

instance.arrangeCustomCellStyle(cellPosition, customStyleId)

Update and delete styles

Custom style After registration, you can update the custom style of the same id through registerCustomCellStylemethod. After the update, the cell style of the assigned custom style will be updated; if newStyleis undefined| null, it means to delete the custom style. After deletion, the cell style of the assigned custom style will restore the default style

instance.registerCustomCellStyle(id, newStyle)

The assigned custom style cell area can be updated by arrangeCustomCellStylemethod, and the style of the cell area will be updated after the update; if the customStyleIdis undefined| null, it means that the restored cell style is the default style

Code example

demo：https://visactor.io/vtable/demo/custom-render/custom-style

Related Documents

Related api: https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize

github：https://github.com/VisActor/VTable