How to filter multiple table columns in reactjs

Question

In below react component return statement I have two search boxes. Search by name is working fine but how can i add another search criteria to search by Plot No. Is it possible to add another turnery operator in same filter statement? or do I need to write separate statement for Plot No column?

**return (
    <>
    <div class="input-group mb-3">
        <form>
          <input type='text' className="form-control searchBar" placeholder='Search by Name' onChange={(e)=> setSearch(e.target.value)}></input>
        
        </form>

        <form>
          <input type='text' className="form-control searchBar" placeholder='Search by Plot No' onChange={(e)=> setSearch(e.target.value)}></input>
        
        </form>
        </div>
        {isLoading ? 
        <div className='circle'>
          <Box sx={{ display: 'flex' }}>
          <CircularProgress />
          
          
          <h1>Loading</h1>
          
          
        </Box>
        
         </div>:

    <div>
 <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
         <TableHead>
          <TableRow>
            <TableCell align="left">Sector</TableCell>
            <TableCell align="left">Plot No</TableCell>
            <TableCell align="left">Street</TableCell>
            <TableCell align="left">Size</TableCell>
            <TableCell align="left">Name</TableCell>
            <TableCell align="left">Contact No</TableCell>
            <TableCell align="left">Address</TableCell>
            <TableCell align="left">Action</TableCell>
            
          </TableRow>
        </TableHead>
        <TableBody>
        {properties.filter((row) =>{
          return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search)}).map((row) => (
            <TableRow
               key={row._id
        }
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            > 

 
                         
              <TableCell align="left">{row.Sector}</TableCell>
              <TableCell align="left">{row["Plot No"]}</TableCell>
              <TableCell align="left">{row.Street}</TableCell>
              <TableCell align="left">{row.Size}</TableCell>
              <TableCell align="left">{row.Name}</TableCell>
              <TableCell align="left">{row["Contact No"]}</TableCell>
              <TableCell align="left">{row.Address}</TableCell>
              <TableCell align="left" >
              <Link to ={`/property/${row._id}` }>
                <Button variant='contained'>Details</Button>
              </Link>
              </TableCell>             
            </TableRow>            
          ))}
        </TableBody>
      </Table>
    </TableContainer>
   </div>}
   </>
  )}**

Answer 1

You can modify the filter function to search by both Name and Plot No:

return (
    <>
        <div className="input-group mb-3">
            <form>
                <input
                    type='text'
                    className="form-control searchBar"
                    placeholder='Search by Name'
                    onChange={(e) => setSearch(e.target.value)}
                />
            </form>

            <form>
                <input
                    type='text'
                    className="form-control searchBar"
                    placeholder='Search by Plot No'
                    onChange={(e) => setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc tìm kiếm theo Plot No */}
                />
            </form>
        </div>

        {isLoading ? (
            <div className='circle'>
                <Box sx={{ display: 'flex' }}>
                    <CircularProgress />
                    <h1>Loading</h1>
                </Box>
            </div>
        ) : (
            <div>
                <TableContainer component={Paper}>
                    <Table sx={{ minWidth: 650 }} aria-label="simple table">
                        <TableHead>
                            <TableRow>
                                <TableCell align="left">Sector</TableCell>
                                <TableCell align="left">Plot No</TableCell>
                                <TableCell align="left">Street</TableCell>
                                <TableCell align="left">Size</TableCell>
                                <TableCell align="left">Name</TableCell>
                                <TableCell align="left">Contact No</TableCell>
                                <TableCell align="left">Address</TableCell>
                                <TableCell align="left">Action</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {properties
                                .filter((row) =>
                                    search.toLowerCase() === '' ||
                                    row.Name.toLowerCase().includes(search) ||
                                    row["Plot No"].toLowerCase().includes(searchPlotNo) // Sử dụng state tìm kiếm mới
                                )
                                .map((row) => (
                                    <TableRow
                                        key={row._id}
                                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                    >
                                        <TableCell align="left">{row.Sector}</TableCell>
                                        <TableCell align="left">{row["Plot No"]}</TableCell>
                                        <TableCell align="left">{row.Street}</TableCell>
                                        <TableCell align="left">{row.Size}</TableCell>
                                        <TableCell align="left">{row.Name}</TableCell>
                                        <TableCell align="left">{row["Contact No"]}</TableCell>
                                        <TableCell align="left">{row.Address}</TableCell>
                                        <TableCell align="left">
                                            <Link to={`/property/${row._id}`}>
                                                <Button variant='contained'>Details</Button>
                                            </Link>
                                        </TableCell>
                                    </TableRow>
                                ))}
                        </TableBody>
                    </Table>
                </TableContainer>
            </div>
        )}
    </>
)}

Answer 2

I am able to resolve this issue by below modification.

{properties.filter((row) =>{
          return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search) || row["Plot No"].includes(search) }).map((row) => (

But still Each Text box searches entire table. while i want to filter results from filtered results.