Skip to main content

列标题样式

自定义列标题样式是通过列定义在列级别完成的。可以通过以下方式实现自定义列标题的样式:

  • Header Style: 为列标题提供 CSS 样式。
  • Header Class: 为列标题提供 CSS 类。

Header Style#

可以通过以下方式为网格中的列标题添加 CSS 样式:

headerStyle#

headerStyle 用于直接向列标题提供 CSS 样式(不使用类)。 值为键(样式名称)和值(样式值)的对象。

export interface ColumnOptions {    ...    // an object of css values for a particular cell.    headerStyle?: JSXInternal.CSSProperties;    ...}

getHeaderStyle#

headerStyle 的回调版本,可用于分别为不同列标题设置不同样式。 函数应该返回一个 CSS 值的对象。

export interface ColumnOptions {    ...    // callback version of property headerStyle to set style for a particular column title.    // function should return an object of CSS values.    getHeaderStyle?: (params: ColumnClassParams) => JSXInternal.CSSProperties;    ...}

示例#

Header Class#

可以通过以下方式为网格中的列标题添加 CSS 类:

headerClass#

为该列中的列标题提供一个 CSS 类。值是字符串数组(CSS 类数组)。

export interface ColumnOptions {    ...    // class to use for the column title. can be an array of strings.    headerClass?: string[];    ...}

getHeaderClass#

headerClass 的回调版本,可用于分别为不同列标题设置不同类。 函数应返回字符串数组(类名数组)。

export interface ColumnOptions {    ...    // function should return an array of strings (array of class names).    getHeaderClass?: (params: ColumnClassParams) => string[];    ...}

示例#