How to set the text style of the VTable table component?

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 as Arial, 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

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