VTable 1.26.8
Tutorials
Contributing
Options
API
FAQ
Changelogs
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

VGraph Relationship Explorer

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=theme——VisActor/VTable tutorial documents!!!###!!!!!!###!!!description=In this article, we will learn how to customize and beautify the presentation of data tables with the theme Theme in VTable.Theme controls the appearance of the table, makes the table more aesthetic, and has some help for data analytics. It should be noted that: Theme theme is to set the style of the table from the whole, and can also be used through[style](../../guide/theme_and_style/style)To style each column separately.Theme supports setting the static styles of modules such as table header, body and outer border. The settings include: font, font size, color, background color, cell dividing line thickness and color; it also supports dynamic style configuration of each interaction effect module of cells. For example: mouse suspension or style configuration of each cell when selected. For details, please check the configuration items.!!!###!!!

Theme Theme

In this article, we will learn how to customize and beautify the presentation of data tables with the theme Theme in VTable.

Theme controls the appearance of the table, makes the table more aesthetic, and has some help for data analytics. It should be noted that: Theme theme is to set the style of the table from the whole, and can also be used throughstyleTo style each column separately.

Theme supports setting the static styles of modules such as table header, body and outer border. The settings include: font, font size, color, background color, cell dividing line thickness and color; it also supports dynamic style configuration of each interaction effect module of cells. For example: mouse suspension or style configuration of each cell when selected. For details, please check the configuration items.

Theme style corresponding structure

Refer to the figure below to learn commonly used configuration items

Header Theme

The header is an important part of the table display, and its style directly affects the visual effect of the entire table. The configuration item istheme.headerStyleWe can adjust the background color, border, text style, etc. of the header cells by modifying the configuration items. E.g:

  • Specify the background color of the header cell: you can passtheme.headerStyle.bgColorTo set the background color of the header cell, support string (directly specify the color value), function (return the color value according to the condition), and CanvasGradient and CanvasPattern objects.

  • Define the padding of header cells: you can passtheme.headerStyle.paddingTo set the margins of header cells, support values (uniformly set the margins in four directions) and arrays (set the margins in the upper, right, lower and left directions respectively).

  • Adjust the horizontal alignment of text in header cells: you can passtheme.headerStyle.textAlignTo set the horizontal alignment of text, supportleft,rightandcenter.

If it is a pivot table, when you need to configure different Themes for different headers, you can passtheme.rowHeaderStyle,theme.cornerHeaderStyleTo configure separately.

Body Theme

Body Theme is mainly responsible for the style configuration of data cells, throughtheme.bodyStyleTo specify.

By modifying the configuration items of the body Theme, you can realize personalized data cell styles. Similar to the header Theme, you can also customize properties such as background color, padding, and text style.

Other Modules Theme Styles

In addition to the table header and body Theme, VTable also provides a series of Theme configuration items for other subdivision modules, such as:

  • Frame Style: Passtheme.frameStyleTo set the overall border color, width, line style, shadow effect and other properties of the table.

  • Column Width Adjustment Style: Passtheme.columnResizeTo set the color, width, etc. of the column width drag bar.

  • Scroll Bar Style: Passtheme.scrollStyleTo set the color of the scroll bar track, the color and width of the slider, etc.

  • Drag and drop position marker line style: passtheme.dragHeaderSplitLineTo set the style of the transposition dividing line of the drag and drop table.

By personalizing these modules, richer and more diverse table styles can be achieved.

interactive effect

Set the background effect when the mouse is hovered to a cell by setting the hover background color.

Set the highlighted border and background color when the cell is selected by setting selectionStyle.

Set Column Width Adjust Marker Line Style
Drag and drop the header transposition marker line style

Built-in Theme

VTable built-in a set of default Theme /DEFAULT, a set of ARCO style, a set of dark Theme /DARK, a set of distinct Theme /BRIGHT, a set of minimalist Theme /SIMPLIFY

Default Theme Sample Code

The specific configuration content can be viewed at: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts

// 使用默认主题
option.theme = VTable.themes.DEFAULT;

const tableInstance = new VTable.ListTable(option);

ARCO Theme Sample Code

The specific configuration content can be viewed at: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/ARCO.ts

// 使用默认主题
option.theme = VTable.themes.ARCO;

const tableInstance = new VTable.ListTable(option);

Dark Theme Sample Code

The specific configuration content can be viewed at: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DARK.ts

// 使用默认主题
option.theme = VTable.themes.DARK;

const tableInstance = new VTable.ListTable(option);

Vivid Theme Sample Code

The specific configuration content can be viewed at: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/BRIGHT.ts

// 使用默认主题
option.theme = VTable.themes.BRIGHT;

const tableInstance = new VTable.ListTable(option);

Minimalist Theme Sample Code

The specific configuration content can be viewed at: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/SIMPLIFY.ts

// 使用默认主题
option.theme = VTable.themes.SIMPLIFY;

const tableInstance = new VTable.ListTable(option);

Custom Theme

If you can't meet the needs, you can expand it on the basis of a certain Theme, or completely customize it.,

Extend customization

Such as extending for DEFAULT


option.theme = VTable.themes.DEFAULT.extends({ headerStyle:{ color: 'red'}})

const tableInstance = new vTable.ListTable(option);

Full Custom Theme

In short, in VTable, by flexibly using Theme configuration items, we can easily create an exclusive data table style that meets our needs. Please refer to this tutorial to make reasonable configurations based on actual scenarios, and give full play to VTable's powerful Theme customization capabilities.

Set the default theme

Use VTable.themes.setDefaultTheme(theme) during application or component-library initialization to configure the theme used when a table has no explicit theme. This applies to ListTable, PivotTable and PivotChart.

const originalDefault = VTable.themes.DEFAULT;
VTable.themes.setDefaultTheme(
  originalDefault.extends({
    defaultStyle: { fontFamily: 'Arial, sans-serif' },
    bodyStyle: { color: '#243447' },
    headerStyle: { bgColor: '#f2f4f7' }
  })
);

// Uses the configured default without specifying option.theme.
const table = new VTable.ListTable({ container, columns, records });

// Extends the configured default using the existing theme API.
const customTheme = VTable.themes.DEFAULT.extends({ headerStyle: { color: '#345678' } });

// Restore the original default for subsequent operations.
VTable.themes.setDefaultTheme(originalDefault);

The argument is an ITableThemeDefine object or a TableTheme. It replaces the previous default; use themes.DEFAULT.extends(...) explicitly to merge with the current default. The function returns void.

  • themes.DEFAULT, the internal default fallback and the built-in DEFAULT name resolve to the new theme. User-registered names retain their existing lookup priority, including a user registration named DEFAULT.
  • Existing instances and themes created earlier with extends() retain their theme objects and are not automatically redrawn. A later updateOption() without theme uses the current default. Use table.updateTheme(VTable.themes.DEFAULT) to explicitly apply it to an existing instance.
  • Explicit instance themes, other built-in themes, theme registration and updateTheme() keep their existing behavior. Standalone partial themes do not inherit the configured default; use extends() when inheritance is intended.
  • The setting is shared by callers using the same VTable runtime. Configure it before creating tables. It is not an instance-scoped setting or a mechanism for automatically switching all existing tables.