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

Question

I can't figure out how to implement a simple search bar to the ag-grid i set. I would like to let my input filter the results in my grid based on every columns I couldn't figure out a good documentation with example for that. Here is my code. Feel free to redirect me to a proper example or another question similar.

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

If the cell data in object format then you have to format it Ag-Grid Value Formatters