如何在 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" } } 
/>

如何在 ag-grid 中的现有列 header 下方添加列 header 以进行反应

How to add a column header below an existing column header in ag-grid for react

reactjs

ag-grid