How to make search filter for each column in html table in react

I have a HTML table which I made from scratch and rendering it with APIs data, I did all the pagination sorting and other stuffs but now I am trying to do search filter for each column.

I made one global search filter which works totally fine but facing issue with the making search for each column.

What I am doing

• Below is my HTML table component

           <HTMLTable
             tableData={tData} // here passing data as tData
             tableClass="table"
             theadClass="theadClass"
             tbodyClass="tbodyClass"
           />
  

• What I am doing is getting data from api and creating one state and updating it in useEffect when page loads as empty array dependency like below

   const [searchData, setsearchData] = useState(null);
   useEffect(() => {
   setsearchData(data); // here updating my state with the api data
   }, []);
  

• Now below is my logic I am using to filter the data

  const table_data =
   searchData &&
   searchData.filter((item) => {
   return (
   item[context.columnTypedInto] // here whichever column user types I am passing it as 
   context
     ?.toString() // writing the logic for number
     .toLowerCase()
     .includes(context.SearchValue.toLowerCase()) || // when user types anything I am 
     saving it in context and passing it here
    !context.SearchValue
     );
  });
  

• So About the above code, i have created a context when user types in any of the column I know which column they are typing into so that is context.columnTypedInto and what user is typing that too I am storing into a context which is context.SearchValue so this works fine

• Now What i am trying to do is when user is typing anything I am getting that related data and updating my state setsearchData which works fine, below is the code

   useEffect(() => {
   setsearchData(table_data);
  }, [context.SearchValue]); 
  

SO whenever search value changes this code will run and it is working fine if I type in any column and search then I type in another column it search for the first searched data only not the whole data.

Issue I am facing

What issue I am facing is, whenever I am press backspace it won't work because the latest data in state is what I typed the last, so when I presss backspace I want it to take the previous data and when nothing is there the whole data should show.

That is the only part I am left with, I hope I have explained it well, if not, I will take the inputs and explain my issue again.

Edit/Update

I tried the below answer updated by @jantimon but that is not working, here is my code sandbox

Below I am explaining the full scenario

• When I type in first_name column lets say I typed Jeanette so below is the data for this
• 1 Jeanette Penddreth jpenddreth0@census.gov Female 26.58.193.2
• Now If I type Giavani in first_name column it should show empty table because now the data is just one row, and when I press backspace it retain the data step-by-step
• Before this edit When I type in firstname and then search for other it shows empty table which is totally fine but when I press backspace it is not taking the last data.

I have updated the codeSand box please do check.

i am trying to implement like this

Via Active questions tagged javascript - Stack Overflow https://ift.tt/OdwRuxv