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.
const option = {
// ……
customCellStyle: [
{
id: ‘custom-1‘,
style: {
bgColor: ‘red‘
}
}
]
}
The API can register custom styles through the registerCustomCellStylemethods provided by the VTable instance:
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:
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:
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
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