Ag Grid：多行标题，每行有不同的样式

Question

我试图让我的 AgGrid 表的标题有 2 行：第一行是名称，第二行是单位。我希望第二行的字体大小小于第一行。

我已尝试搜索此内容，但找不到答案。我发现这个blog 是关于设置标题样式的，并按照这个answer 使我的标题分为两行。但是它们都没有显示如何显示 2 行标题和独立设置每一行的样式。感谢任何帮助。

Answer 1

我在我的 Markdown 编辑器中使用自定义标题并将每一行作为单独的 div 进行了此操作。

我的自定义标头的代码在这里：https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js

标题的基本 HTML 是：

this.eGui.innerHTML = `
    <div class="customHeaderTop">
        <div class="customFilterMenuButton">
            <i class="ag-icon ag-icon-filter"></i>
        </div>
        <div class="customHeaderLabel">${this.agParams.displayName}</div>
    </div>
    <div class="headerbuttons">
        <span title="add left">[<+]</span>
        <span title="rename">[~]</span>
        <span title="delete">[x]</span>
        <span title="duplicate">[+=]</span>
        <span title="add right">[+>]</span>
    </div>
  `;

此处描述了自定义标题组件：

https://www.ag-grid.com/javascript-data-grid/component-header/

如果渲染要求简单，也可以添加标题模板。

AG Grid 博客帖子https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/ 对此进行了介绍

  {
        minWidth: 150,
        field: 'athlete',
        headerComponentParams: {
            template:
                '<div class="ag-cell-label-container" role="presentation">' +
            '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
            '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
            '    <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
            '    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
            '    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
            '    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
            '    <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' +
            '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
            '  </div>' +
            '</div>'
        },
}