Highcharts Grid 表格组件：header 表头配置详解-优快云博客

Highcharts Grid 表格组件：header 表头配置详解

highcharts Highcharts JS, the JavaScript charting framework 项目地址: https://gitcode.com/gh_mirrors/hi/highcharts

什么是 Highcharts Grid 表头配置

Highcharts Grid 是一个功能强大的数据表格组件，其中的 header 配置项允许开发者对表格的列标题进行灵活控制。通过 header 配置，我们可以实现以下功能：

自定义列标题显示名称
调整列显示顺序
创建多层级表头分组
选择性显示/隐藏特定列

基础配置示例

让我们从一个基础示例开始，了解 header 配置的基本结构：

{
    dataTable: {
        columns: {
            product: ["Apple", "Pear"],
            weight: [182, 178],
            price: [3.5, 2.5],
            vitamin_a: [54,27],
            in_stock: [true, false]
        }
    },
    header: [
        {
            columnId: "product",
            format: "Fruit"
        },
        {
            format: "Fruit data",
            accessibility: {
                description: "Header spanning three sub-headers"
            },
            columns: [
                "weight",
                "price",
                {
                    columnId: "vitamin_a",
                    format: "Vitamin A (IU)"
                }
            ]
        }
    ],
    columns: [
        {
            id: "weight",
            header: {
                format: "Weight"
            }
        }
    ]
}

配置项详解

1. 列标题重命名

通过 columnId 指定原始数据列，使用 format 属性可以自定义显示名称：

{
    columnId: "product",
    format: "Fruit"  // 将"product"列显示为"Fruit"
}

2. 创建分组表头

不指定 columnId 而是使用 format 和 columns 可以创建分组表头：

{
    format: "Fruit data",  // 分组标题名称
    columns: [             // 包含的子列
        "weight",
        "price",
        // 其他列配置
    ]
}

3. 列引用方式

在 columns 数组中，可以使用两种方式引用列：

字符串形式：直接使用数据表中的列名
```
"weight"
```

对象形式：可以添加更多配置

{
    columnId: "vitamin_a",
    format: "Vitamin A (IU)"
}

4. 列显示控制

未在 header 中引用的列将不会显示。例如示例中的 in_stock 列就被隐藏了。

5. 多层级嵌套

columns 数组可以无限嵌套，创建多层级表头结构：

{
    format: "Nutrition Info",
    columns: [
        {
            format: "Vitamins",
            columns: [
                "vitamin_a",
                "vitamin_c"
            ]
        },
        "minerals"
    ]
}