尝试在反应组件中对 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

Refer this demo

如果单元格数据是对象格式那么你必须格式化它Ag-Grid Value Formatters

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

trying to implement a text filter to a ag-grid in a react component

reactjs

ag-grid