如何在 ag-grid 中的現有列 header 下方添加列 header 以進行反應

Question

例子

Header 1      | header 2     | header 3
extra header  | extra header | extra header
-------------------------------------------
row cell 1    | row cell 2   | row cell 3

這是正確的方法還是有更優雅的方法？

<AgGridReact>
  <AgGridColumn field="Header 1">
    <AgGridColumn field="extra header" />
  </AgGridColumn >
  <AgGridColumn field="Header 2">
    <AgGridColumn field="extra header" />
  </AgGridColumn>
  <AgGridColumn field="Header 3">
    <AgGridColumn field="extra header" />
  </AgGridColumn>
</AgGridReact>

Answer 1

例如。 您可以像這樣創建 customGroupComponent

import React from 'react';

export default ({ displayName, extraHeaderName }) => {
  return (
    <div className="ag-header-group-cell-label">
      <div>
        <div>{displayName}</div>
        <div>{extraHeaderName}</div>
      </div>
    </div>
  );
};

並像那樣使用它

<AgGridColumn 
    headerName="header1" 
    headerGroupComponent="customHeaderGroupComponent" 
    headerGroupComponentParams={ {extraHeaderName: "extra header1" } } 
/>
<AgGridColumn 
    headerName="header2" 
    headerGroupComponent="customHeaderGroupComponent" 
    headerGroupComponentParams={ {extraHeaderName: "extra header2" } } 
/>