Question 226373 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to filter multiple table columns in reactjs

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>}
   </>
  )}**
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
        )}
    </>
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search