如何在反應 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"),
    },
  },
];