要将两个列显示为单个列在标题显示中，您可以使用headerGroupComponent属性和自定义组件来实现。

首先，您需要创建一个自定义组件来呈现标题。该组件将接收两个列作为属性，并将它们组合在一起以显示为单个标题。

以下是一个示例的自定义组件：

import React from 'react';

const CustomHeader = ({ col1, col2 }) => {
  return (
    

      {col1.getColDef().headerName} - {col2.getColDef().headerName}
    
  );
};

export default CustomHeader;

然后，在您的表格配置中，为要组合的两个列指定一个共同的headerName，并为它们设置headerGroupComponent属性以使用自定义组件。

以下是一个示例的表格配置：

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import CustomHeader from './CustomHeader';

const App = () => {
  const columnDefs = [
    { headerName: 'Column 1', field: 'col1' },
    { headerName: 'Column 2', field: 'col2' },
    { headerName: 'Combined Column', headerGroupComponent: CustomHeader, marryChildren: true }
  ];

  const rowData = [
    { col1: 'Value 1', col2: 'Value 2' },
    // more rows...
  ];

  return (
    

      
    
  );
};

export default App;

在上面的示例中，Combined Column将显示为Column 1 - Column 2，并且包含col1和col2两个列的数据。

您可以根据需要自定义CustomHeader组件的样式和内容。