如何在反应 ag 网格表中自定义列 header？

Question

我需要在 header 列中显示与此类似的数据类型，我有可用的类型，但无法弄清楚如何在 header 列中显示它

我怎样才能做到这一点？

Answer 1

使用自定义 header 模板修复。 你可以像这样定义一个模板：

export const customHeaderTemplate = (dataType?: string): string => `<div
    class="ag-cell-label-container custom-ag-header"
    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="eText"
            class="ag-header-cell-text"
            role="columnheader"
        ></span>
        <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>
        <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
    </div>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span
            ref="eText"
            class="ag-header-cell-text column-data-type"
            role="columnheader"
        >${dataType}</span>
    </div>
</div>`;

在列定义中使用模板：

const columns = [
  {
    field: "id",
    headerName: "id",
    headerComponentParams: {
      template: customHeaderTemplate("Number"),
    },
  },
  {
    field: "date",
    headerName: "date",
    type: "Date",
    headerComponentParams: {
      template: customHeaderTemplate("Date"),
    },
  },
];