在 ag-grid 中隐藏列标题答案

【问题标题】：Hide column headers in ag-grid在 ag-grid 中隐藏列标题
【发布时间】：2022-01-23 18:02:59
【问题描述】：

这是一个非常基本的 ag-grid 示例：https://stackblitz.com/edit/ag-grid-react-hello-world-qqjk5k

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData}>
        <AgGridColumn field="make" headerHeight="0"></AgGridColumn>
        <AgGridColumn field="model" headerHeight="0"></AgGridColumn>
        <AgGridColumn field="price" headerHeight="0"></AgGridColumn>
      </AgGridReact>
    </div>
  );
};

render(<App />, document.getElementById('root'));

我不想显示列标题，因此我输入了headerHeight="0"。但它没有用。

那么有人知道如何隐藏列标题吗？

另外，我想将二维数组[['Toyota', 'Celica', 35000],['Ford', 'Mondeo', 32000], ['Porsche', 'Boxter', 72000]]（而不是对象）传递给数据。有谁知道如何让 ag-grid 接受这一点？我们必须自己转换数据吗？

【问题讨论】：

标签： ag-grid ag-grid-react

【解决方案1】：

有人知道如何隐藏列标题吗？

你为什么不为此使用 CSS？
.ag-root .ag-header {
    display: none;
}

我们必须自己转换数据吗？

是的，没有它，ag-grid 将无法理解您从服务器接收的格式。

【讨论】：