Search code examples
djangoreactjsdjango-rest-frameworkmaterial-table

How to implement a custom search remote data for each column on material-tale in React

I was wondering if it is possible to implement a custom search row for each column in my material-table data in React ? enter image description here

I would like to have a function which calls my Django Rest api's search function with the data submitted in my search filter in material-table and then display only the matched data.

Based on the material-table docs I tried to implement customFilterAndSearch and pass the term to a custom method which calls my Rest api with the search term but the customFilterAndSearch access the method multiple times. Actually I get to a point where there axios get method get called by the number of rows items I have in my table.

Here is the custom customFilterAndSearch call:

customFilterAndSearch: (term, rowData) => this.getDataFilterNomService(term, rowData) },

Here is my custom method I used: 

async getDataFilterNomService(term, rowData){
    console.log("TermDinFilter", term)
    //console.log("rowDataDinFilter", rowData)
    try{
      let response = await axiosInstance.get('get/servicecatalog/filterNomService/', {
        params: {
          "nom_service":term
        }
      });
      console.log("Response la Filtru NomService", response)

    } catch(error){
        console.log("Error: ", JSON.stringify(error, null, 4));
        throw error;
    }

  }

And here is how django gets called when I try to search for a name like : "Viorel"

backend_1   | [11/Jun/2020 16:49:02] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?

It gets called like 18 times...as per the number of entries on the table.

I was wondering if there is a way to override the customFilterAndSearch...so when the user enters a submit action the Django Api gets called only one time ?

Or if there is another way of implementing this functionality ?

Solution

  • I had a look at the blog and I think it can be improved. (correct me if iam wrong as iam new to this). The approach i have used to solve this issue is by using filter headers which I think is better than having a fixed row for this. step 1: set the filtering to true

      options={{
    filtering: true
  }}

    step 2: then use column specific filter rendering (you can have it as text, select , search... components). use Onchange,onBlur... to trigger the api call for remote data.

     columns = [ {
  field: 'one',
  title: 'One',
  filterComponent: (metaData) => {
    return (
      <input
        type='text'
        onBlur={e => {
          // console metaData and use it as per your wish
        }}
      />
    )
  }
},
{
  field: 'two',
  title: 'Two',
  filtering: false // if you dont want to have filter for any column -add this
}]