主题 Theme

在本文中，我们将学习如何用 VTable 中的主题配置项（theme 主题）来定制和美化数据表格的展示效果。

主题控制着表格的外观，使表格更具美感，并对数据分析有一定的帮助。需要注意的是：主题 theme 是从整体设置表格的样式，另外还可以通过style来分别对每一列去设置样式。

主题支持对表头，表身及外边框等模块的静态样式进行设置，设置内容包括：字体，字号，颜色，背景色，单元格分割线粗细及颜色；也支持对单元格各个交互效果模块的动态样式配置，例如: 鼠标悬浮或者选中时各个单元格的样式配置。具体可查看配置项。

theme 样式对应结构

参考下图可学习常用的配置项

表头主题

表头（header）是表格展示的重要组成部分，其样式直接影响着整个表格的视觉效果。配置项为theme.headerStyle。我们可以通过修改其中的配置项，实现对表头单元格背景色、边框、文字样式等方面的调整。例如：

指定表头单元格的背景色：可以通过theme.headerStyle.bgColor来设置表头单元格的背景色，支持字符串（直接指定颜色值）、函数（根据条件返回颜色值）以及 CanvasGradient 和 CanvasPattern 对象。
定义表头单元格的内边距：可以通过theme.headerStyle.padding来设置表头单元格的内边距，支持数值（统一设置四个方向的内边距）和数组（分别设置上右下左四个方向的内边距）。
调整表头单元格内文字的水平对齐方式：可以通过theme.headerStyle.textAlign来设置文字的水平对齐方式，支持left、right和center。

如果是透视表，需要对不同的表头配置不同的主题的时候，可以通过theme.rowHeaderStyle，theme.cornerHeaderStyle来分别配置。

body 主题

body 主题主要负责数据单元格的样式配置，通过theme.bodyStyle来指定。

通过修改 body 主题的配置项，可以实现个性化的数据单元格样式。类似于表头主题，也可以定制背景色、内边距、文字样式等属性。

其他模块主题样式

除了表头和 body 主题之外，VTable 还提供了一系列其他细分模块的主题配置项，如：

框架样式：通过theme.frameStyle来设置表格整体边框颜色、宽度、线条样式、阴影效果等属性。
列宽调整样式：通过theme.columnResize来设置列宽拖拽条的颜色、宽度等。
滚动条样式：通过theme.scrollStyle来设置滚动条轨道的颜色、滑块的颜色以及宽度等。
拖拽位置标记线样式：通过theme.dragHeaderSplitLine来设置拖拽表格换位分割线的样式。

通过对这些模块进行个性化定制，可以实现更加丰富多样的表格样式。

交互效果

通过设置 hover 背景色，设置鼠标 hover 到单元格时的背景效果。

通过设置 selectionStyle 来设置单元格被选中时的高亮边框及背景色。

设置列宽调整标记线样式

拖拽表头换位标记线样式

内置主题

VTable 中内置一套默认主题/DEFAULT，一套 ARCO 风格，一套暗黑主题/DARK，一套鲜明主题/BRIGHT，一套极简主题/SIMPLIFY

默认主题示例代码

具体配置内容可查看：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 主题示例代码

具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/ARCO.ts，注意改该主题有阴影占位，frameStyle中配置了shadowBlur的宽度。

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

const tableInstance = new VTable.ListTable(option);

暗黑主题示例代码

具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DARK.ts

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

const tableInstance = new VTable.ListTable(option);

鲜明主题示例代码

具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/BRIGHT.ts

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

const tableInstance = new VTable.ListTable(option);

极简主题示例代码

具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/SIMPLIFY.ts

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

const tableInstance = new VTable.ListTable(option);

自定义主题

如果满足不了需求，可以在某个主题基础上扩展，或者完全自定义。、

扩展自定义

如针对 DEFAULT 进行扩展


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

const tableInstance = new vTable.ListTable(option);

全量自定义主题

总之，在 VTable 中，通过灵活运用主题配置项，我们可以轻松打造出专属的、符合需求的数据表格样式。请参照本教程，结合实际场景进行合理配置，发挥 VTable 强大的主题定制能力。

设置默认主题

应用或组件库可以在初始化时调用 VTable.themes.setDefaultTheme(theme)，配置表格未显式指定 theme 时使用的默认主题。该设置适用于 ListTable、PivotTable 和 PivotChart。

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

// 无需传入 option.theme，即可使用配置后的默认主题。
const table = new VTable.ListTable({ container, columns, records });

// 通过原有主题 API 继承配置后的默认主题。
const customTheme = VTable.themes.DEFAULT.extends({ headerStyle: { color: '#345678' } });

// 恢复原始默认主题，供后续操作使用。
VTable.themes.setDefaultTheme(originalDefault);

参数为 ITableThemeDefine 对象或 TableTheme，会替换上一次设置的默认主题；如需与当前默认主题合并，请显式使用 themes.DEFAULT.extends(...)。函数返回 void。

themes.DEFAULT、内部默认回退和内置名称 DEFAULT 使用新的主题。用户注册的主题名称仍遵循原有查询优先级，包括用户注册的同名 DEFAULT。
已有实例和此前通过 extends() 创建的主题保留其主题对象，不会自动重绘。之后调用未指定 theme 的 updateOption() 时使用当前默认主题；如需显式应用到已有实例，可调用 table.updateTheme(VTable.themes.DEFAULT)。
显式指定的实例主题、其他内置主题、主题注册和 updateTheme() 保持原有行为。独立的局部主题不会继承配置后的默认值；需要继承时请使用 extends()。
此设置由使用同一份 VTable 运行时的调用方共享，建议在创建表格前完成配置。它不是实例级设置，也不会自动切换所有已有表格的主题。