尝试在反应组件中对 ag-grid 实施文本过滤器

Question

我不知道如何为我设置的 ag-grid 实现一个简单的搜索栏。 我想让我的输入根据每一列过滤我的网格中的结果，我无法找到一个好的文档和示例。 这是我的代码。 随时将我重定向到适当的示例或其他类似的问题。

import React from 'react';

import { AgGridReact } from 'ag-grid-react';
import axios from 'axios';

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

class ListTableClients extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      defaultColDef: {
        flex: 1,
        cellClass: 'cell-wrap-text',
        autoHeight: true,
        sortable: true,
        resizable: true,
      },

      columnDefs: [
        { headerName: "id", field: "id", maxWidth: 100 },
        { headerName: "name", field: "name"},
        { headerName: "email", field: "email"}],

      rowData: [
        { id: 1, name: 'maison du café', email: 'maisonducafe@gamil.com' },
        { id: 2, name: 'Warehouse', email: 'contact@warehouse.fr' },
        { id: 3, name: 'Maestro', email: 'maestro@gmail.com' }],
      rowHeight: 275,
    }
  }

  componentDidMount() {
    console.log('test');
    axios.get('http://localhost:8080/listClients').then((res) => {
      this.setState({ rowData: res.data });
    }).catch((error) => { console.log(error) });
  }

  render() {
    return (
        <div style={{width: '100%', paddingLeft: '50px', paddingRight: '50px', paddingTop: '50px'}} className="ag-theme-alpine">
          <input type="text" placeholder="Filter..." onInput={this.onFilterTextBoxChanged}/>
          <AgGridReact
            domLayout='autoHeight'
            columnDefs={this.state.columnDefs}
            defaultColDef={this.state.defaultColDef}
            getRowHeight={this.state.getRowHeight}
            rowData={this.state.rowData}>
          </AgGridReact>
        </div>
    );
  }
}

export default ListTableClients;

Answer 1

参考这个演示

如果单元格数据采用 object 格式，则必须对其进行格式化Ag-Grid Value Formatters