Hide column headers in ag-grid

Question

Here is a very basic sample with 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'));

I would like to not show the column headers, thus I put headerHeight="0". But it did not work.

So does anyone know how to hide the column headers?

Additionally, I would like to pass a two-dimensional array [['Toyota', 'Celica', 35000],['Ford', 'Mondeo', 32000], ['Porsche', 'Boxter', 72000]] (rather than object) to the data. Does anyone know how to make ag-grid accept that? Do we have to convert the data by ourselves?

Answer 1

• does anyone know how to hide the column headers?

why don't you use CSS for this?

.ag-root .ag-header {
    display: none;
}

• Do we have to convert the data by ourselves?

Yes, without that, ag-grid won't be able to understand the format you're receiving from server.