AgGrid: multiline header, 每行有不同的样式

Question

我正在尝试让我的 AgGrid table 的 headers 有两行：第一行是名称，第二行是单位。我希望第二行的字体大小小于第一行。

我试图搜索此内容，但找不到答案。我发现这个 blog about styling the header and followed this answer 使我的 headers 分两行。但其中 none 显示了如何显示 2 行 headers 并独立设置每行的样式。感谢任何帮助。

Answer 1

我在我的 Markdown 编辑器中使用自定义 Header 并将每一行分开 div。

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

header 的基本 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>
  `;

自定义 Header 组件在此处描述：

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

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

这在 AG Grid 博客中有所介绍 post 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>'
        },
}

AgGrid: multiline header, 每行有不同的样式

AgGrid: multiline header, each line has different style

javascript

ag-grid