How to filter multiple table columns in reactjs

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>
        )}
    </>
)}