antd table search filtering

Question

i'm new on react hooks(typescript), here i'm having trouble figuring out how to filter by two, at the moment search filtering is working with one filter and it is 'receiver?.name?' i want to add one more filter and it is 'sending?name?'

here is working code:

 const handleSearchh = (searchText: string) => { const filteredEvents = orders?.filter(({ receiver }) => { const name = receiver?.name?.toLowerCase()?? ""; return name.includes(searchText); }); setData(filteredEvents); }; <Searchh onSearch={handleSearchh} /> <Table dataSource={Data} columns={columns} />

i want to add this to it

 const filteredEvents = orders?.filter(({ sending }) => { const name = sending?.name?.toLowerCase()?? ""; return name.includes(searchText); });

it is antd table i want it to filter the search by two parameters, receivers and senders name

Answer 1

This isn't antd specific, but can't you just chain the filter functions?

// ...
const filterFuncOne = ({ receiver }) => {
      const name = receiver?.name?.toLowerCase() ?? "";
      return name.includes(searchText);
    };

const filterFuncTwo = ({ sending }) => {
      const name = sending?.name?.toLowerCase() ?? "";
      return name.includes(searchText);
    }

const filteredEvents = orders? 
  .filter.(filterFuncOne)
  .filter(filterFuncTwo);  // <-- chained

//...

Answer 2

You can try this solution.

  const handleSearchh = (searchText: string) => {
    filterData(searchText)
  };

 const filterData = (searchText) => {     
    const filteredEvents = orders?.filter(({ receiver, sending }) => {
     const receiverName = receiver?.name?.toLowerCase() ?? "";
     const sendingName = sending?.name?.toLowerCase() ?? "";
     return receiverName.includes(searchText) && sendingName.includes(searchText);
   });

   setData(filteredEvents);    
 }