Question title
How to set text style for VTable component?
Problem description
What text styles are supported and how to configure them when using the VTable table component?
Solution
VTable supports the following text styles:
fontSize
: The font size of the text.FontFamily
: Font used for text. Multiple fonts can be specified, such asArial, sans-serif
, and the browser will search and use them in the specified order.FontWeight
: Set font thickness.FontVariant
: Sets the font variant.fontStyle
: Set font style.
The places where VTable supports setting text styles are:
-
Column (row/indicator)
, configure the style corresponding to the column (row/indicator)-
Style
: The style corresponding to the content cell -
headerStyle
: the style corresponding to the header cell
-
-
In theme
, configure the theme style-
defaultStyle
: default style -
bodyStyle
: table content area style -
headerStyle
: header (list)/list header (pivot table) style -
rowHeaderStyle
: Row header style -
cornerHeaderStyle
: corner head style -
bottomFrozenStyle
: Bottom frozen cell style -
rightFrozenStyle
: Freeze cell style on the right
-
Code example
You can paste it into the official website editor for testing: https://visactor.io/vtable/demo/table-type/list-table
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
.then((res) => res.json())
.then((data) => {
const columns =[
{
"field": "Order ID",
"title": "Order ID",
"width": "auto",
style: {
fontSize: 14
},
headerStyle: {
fontSize: 16,
fontFamily: 'Verdana'
}
},
{
"field": "Customer ID",
"title": "Customer ID",
"width": "auto"
},
{
"field": "Product Name",
"title": "Product Name",
"width": "auto"
},
{
"field": "Category",
"title": "Category",
"width": "auto"
},
{
"field": "Sub-Category",
"title": "Sub-Category",
"width": "auto"
},
{
"field": "Region",
"title": "Region",
"width": "auto"
}
];
const option = {
records:data,
columns,
widthMode:'standard',
theme: VTable.themes.DEFAULT.extends({
bodyStyle: {
fontSize: 12
},
headerStyle: {
fontSize: 18
}
})
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
})
Related Documents
Related api: https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize
Top comments (0)