嘗試在反應組件中對 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