How to customize a column header in react ag grid table?

Question

I need to show the data type in the column header similar to this, I have the types available but could not figure out how to display it in the column header

How can I achieve this?

Answer 1

Fixed using custom header template. You can define a template like this:

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>`;

Use the template in column definitions:

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