在Ag-Grid中，可以通过使用ag-Grid库提供的columnGroupShow属性来实现在透视模式下的可折叠列。

以下是一个示例代码，展示了如何在Ag-Grid中实现可折叠列的功能：

// 导入必要的库
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';

// 定义组件
class MyGrid extends React.Component {
  constructor(props) {
    super(props);
    
    // 初始化状态
    this.state = {
      columnDefs: [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' }
      ],
      autoGroupColumnDef: {
        headerName: 'Make',
        field: 'make',
        cellRenderer: 'agGroupCellRenderer',
        cellRendererParams: {
          checkbox: true
        }
      },
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 }
      ],
      frameworkComponents: {
        agGroupCellRenderer: AgGroupCellRenderer
      }
    };
  }
  
  render() {
    return (
      

        
      
    );
  }
}

// 自定义组件AgGroupCellRenderer，用于处理透视模式下的可折叠列
class AgGroupCellRenderer extends React.Component {
  constructor(props) {
    super(props);
    
    // 初始化状态
    this.state = {
      expanded: true
    };
  }
  
  toggleExpand = () => {
    this.setState(prevState => ({
      expanded: !prevState.expanded
    }));
  }
  
  render() {
    const { value } = this.props;
    const { expanded } = this.state;
    
    return (
      

        
          {expanded ? '-' : '+'}
        
        {value}
      
    );
  }
}

// 渲染组件
ReactDOM.render(, document.getElementById('root'));

在上面的代码中，我们首先导入了必要的库，并定义了一个MyGrid组件，其中包含了Ag-Grid的配置。columnDefs定义了列的配置，autoGroupColumnDef定义了透视模式下的分组列的配置。rowData定义了要显示的数据。

然后，我们定义了一个自定义的组件AgGroupCellRenderer，用于处理透视模式下的可折叠列。在该组件中，我们使用了expanded状态来控制列的展开和折叠，并通过toggleExpand方法来切换展开和折叠状态。最后，在render方法中，我们根据expanded状态来显示展开和折叠的图标，并显示列的值。

最后，我们使用ReactDOM.render方法将MyGrid组件渲染到页面上的指定位置。

以上代码演示了如何在Ag-Grid中实现透视模式下的可折叠列。你可以根据自己的需求进行修改和扩展。