ag-Grid是一个功能强大的JavaScript表格库，提供了丰富的功能和选项，包括主细节展开/折叠功能。下面是一个使用ag-Grid的示例代码，展示如何实现主细节展开/折叠功能。

首先，你需要引入ag-Grid的CSS和JavaScript文件。你可以从ag-Grid的官方网站上下载这些文件，或使用CDN链接。以下是一个示例：

接下来，你需要创建一个ag-Grid实例，并配置表格的列和数据。在这个示例中，我们创建了一个包含姓名、年龄和详情的表格。

// main.js

// 定义表格的列
const columnDefs = [
    { headerName: "姓名", field: "name" },
    { headerName: "年龄", field: "age" }
];

// 定义表格的数据
const rowData = [
    { name: "张三", age: 25, details: "这是张三的详情" },
    { name: "李四", age: 30, details: "这是李四的详情" },
    { name: "王五", age: 35, details: "这是王五的详情" }
];

// 创建ag-Grid实例
const gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    masterDetail: true, // 启用主细节展开/折叠功能
    detailCellRendererParams: {
        detailGridOptions: {
            columnDefs: [
                { headerName: "详情", field: "details" }
            ]
        },
        getDetailRowData: function(params) {
            params.successCallback(params.data.details);
        }
    }
};

// 将表格绑定到HTML元素
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

在上述代码中，我们使用了masterDetail选项来启用主细节展开/折叠功能。在detailCellRendererParams中，我们定义了细节表格的列和数据。getDetailRowData函数用于获取细节数据，并将其展示在细节表格中。

你可以根据自己的需求修改列和数据的定义，以及细节表格的列定义。这个示例只是一个基本的演示，你可以根据自己的需求进行扩展和定制。

希望这个示例对你有帮助！