在 ag-grid 中设置 columnTypes

Question

我想弄清楚如何让 ag-grid 与 Typescript React 一起工作。 我正在尝试使用自定义列类型制作表格。 我定义的自定义列类型和默认列类型似乎不起作用，我不确定为什么。 这是我的代码的简单版本：

import React from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import { GridOptions } from "ag-grid-community";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';


class App extends React.Component<{}, GridOptions> {
  constructor(props: GridOptions) {
    super(props);

    this.state = {
      rowData: [
        {foo: 1, bar: 'abc'},
        {foo: 2, bar: 'def'},
      ],
      columnDefs: [
        {headerName: "foo", field: "foo", type: "numberColumn"}, 
        {headerName: "bar", field: "bar"},
      ],
      defaultColDef: {
        width: 150,
        editable: true,
        sortable: true,
        filter: "agTextColumnFilter"
      },
      columnTypes: {
        "numberColumn": {
          width: 20,
          filter: "agNumberColumnFilter"
        },
      },
      onCellClicked: function(event) {window.alert('a row was clicked '+ event.data)},
    }
  }

  render() {
    return (
      <div
        className="ag-theme-balham"
        style={{
        height: '1000px',
        width: '6000px' }}
      >
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}>
        </AgGridReact>
      </div>
    );
  }
}

export default App;

我还发现onCellClicked实际上没有做任何事情，所以我想我误解了那里的某些东西。

Answer 1

您正在本地状态中定义，但没有将其传递给AgGridReact组件，因为它对此一无所知。

您可以解构状态属性，如下所示：

    const {columnDefs, rowData, defaultColDef, onCellClicked, columnTypes} = this.state

然后使用它并像下面这样传递它：

    <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
      defaultColDef={defaultColDef}
      onCellClicked={onCellClicked}
      columnTypes={columnTypes}
    >
    </AgGridReact>