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…


This content originally appeared on DEV Community and was authored by Ray

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


This content originally appeared on DEV Community and was authored by Ray


Print Share Comment Cite Upload Translate Updates
APA

Ray | Sciencx (2024-07-04T03:28:13+00:00) How to set the text style of the VTable table component?. Retrieved from https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/

MLA
" » How to set the text style of the VTable table component?." Ray | Sciencx - Thursday July 4, 2024, https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/
HARVARD
Ray | Sciencx Thursday July 4, 2024 » How to set the text style of the VTable table component?., viewed ,<https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/>
VANCOUVER
Ray | Sciencx - » How to set the text style of the VTable table component?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/
CHICAGO
" » How to set the text style of the VTable table component?." Ray | Sciencx - Accessed . https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/
IEEE
" » How to set the text style of the VTable table component?." Ray | Sciencx [Online]. Available: https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/. [Accessed: ]
rf:citation
» How to set the text style of the VTable table component? | Ray | Sciencx | https://www.scien.cx/2024/07/04/how-to-set-the-text-style-of-the-vtable-table-component/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts