Ag-grid React 标题未显示

Question

我正在 React 中创建一个简单的 Ag-Grid。 但是，尽管我为每列指定了标题名称，但我无法弄清楚为什么本地主机上的标题为空白。 我尝试调整高度并包装每个标题的文本。 我正在使用 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

年份标题不可见，因为 20 的列宽太小而无法显示。 如果您使列可调整大小，那么您将能够上下拖动宽度并查看 headerName 的显示方式。

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