Ag-grid React header not displaying

Question

I am creating a simple Ag-Grid in React. However, I cannot figure out why the header is blank on the local host although I have specified header names for each column. I have tried adjusting the height and wrapping the text of each header. I am using ag-theme-alpine.

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

const InitialRowData = [
    { year: 1 },
    { year: 2 },
    { year: 3 }
];

const columnDefs = [
    { headerName: 'year', field: 'year', width: 20 },
    { headerName: 'premium', field: 'premium', width: 90, editable: true, enableRangeSelection: true }
];

export function MyGrid() {

    const [rowData, setRowData] = useState(InitialRowData);
    return (
        <div className="ag-theme-alpine" style={{ height: 900, width: 200 }}>
            <AgGridReact

                rowData={rowData}
                columnDefs={columnDefs}
                enableRangeSelection={true}
            >
            </AgGridReact>
        </div>

    );
}

Answer 1

The year heading is not visible because the column width of 20 is too small for it to display. If you make the column resizeable then you will be able to drag the width up and down and see how the headerName displays.

{ headerName: 'year', field: 'year', resizable: true, width: 20,  },