How to change page in mateiral ui table based on search? - reactjs

Question

Like the title says I need to change the page based on search value. What do I mean by this, let's say that the name Test is on th page 2 of my table, but not on page 1. How do I then change the page automatically?
Here is my TableComponent.js:
import React, { useState } from "react";
import Table from "#mui/material/Table";
import TableBody from "#mui/material/TableBody";
import TableCell from "#mui/material/TableCell";
import TableContainer from "#mui/material/TableContainer";
import TableHead from "#mui/material/TableHead";
import TableRow from "#mui/material/TableRow";
import useFetch from "./custom_hooks/useFetch";
import TableFooter from "#mui/material/TableFooter";
import TablePagination from "#mui/material/TablePagination";
import IconButton from "#mui/material/IconButton";
import Box from "#mui/material/Box";
import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from "react-icons/md";
import styled from "styled-components";
const TableH = styled(TableHead)`
height: 3.5rem;
`;
const TableB = styled(TableBody)`
height: 3.375rem;
`;
const RoleButton = styled.button`
color: #c80539;
outline: none;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
`;
function TablePaginationActions(props) {
const { page, onPageChange } = props;
const handleBackButtonClick = (event) => {
onPageChange(event, page);
};
const handleNextButtonClick = (event) => {
onPageChange(event, page + 2);
};
return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
<MdKeyboardArrowLeft color="#707070" />
</IconButton>
<IconButton onClick={handleNextButtonClick} aria-label="next page">
<MdKeyboardArrowRight color="#707070" />
</IconButton>
</Box>
);
}
const TableComponent = ({ url, cellNames, value }) => {
const [page, setPage] = useState(1);
const [rowsPerPage, setRowsPerPage] = useState(5);
const [roles, setRoles] = useState("Admin");
const { data, error } = useFetch(`${url}${page}`);
if (!data) {
return <h1> LOADING...</h1>;
}
if (error) {
console.log(error);
}
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
};
// currently this is not functional as it is supposed to be, right now when you click on a button it is going to change role for everyone
const handleRoleChange = () => {
if (roles === "Admin") {
setRoles("User");
} else {
setRoles("Admin");
}
};
return (
<TableContainer
style={{
height: 385,
border: "1px solid #e2e2e3",
borderRadius: 5,
}}
data-testid="table-container"
>
<Table stickyHeader>
<TableH>
<TableRow>
{cellNames.map((names, index) => {
return (
<TableCell
style={{
fontWeight: "bold",
fontSize: 14,
paddingRight: names.paddingRight,
paddingLeft: names.paddingLeft,
}}
align={names.align}
key={index}
>
{names.name}
</TableCell>
);
})}
</TableRow>
</TableH>
<TableB>
{data.data
.filter((val) => {
const notFound = !val.name
.toLowerCase()
.includes(value.toLowerCase());
if (value === "") {
return val;
} else if (val.name.toLowerCase().includes(value.toLowerCase())) {
return val;
} else if (notFound) {
// WHAT TO DO HERE ????
}
})
.slice(0, rowsPerPage)
.map((apiData, index) => {
return (
<TableRow key={index}>
<TableCell align="left" style={{ paddingLeft: 40 }}>
{apiData.name}
</TableCell>
<TableCell align="left">{apiData.email}</TableCell>
<TableCell align="left">{apiData.status}</TableCell>
<TableCell align="left">{roles}</TableCell>
<TableCell align="right" style={{ paddingRight: 40 }}>
<RoleButton onClick={handleRoleChange}>
{roles === "Admin" ? "Set as User" : "Set as Admin"}
</RoleButton>
</TableCell>
</TableRow>
);
})}
</TableB>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10]}
colSpan={6}
style={{
borderBottom: "none",
height: 50,
color: "#707070",
}}
count={data.meta.pagination.total}
rowsPerPage={rowsPerPage}
page={page - 1}
SelectProps={{
inputProps: {
"aria-label": "rows per page",
},
native: true,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);
};
export default TableComponent;
If anyone know how to do this, I would greatly appreciate that. As I only recently started using Material UI, this seems complicated for me. I assume that somehow I need to change page based on condition that the value is not found on current page, but how do I implement that?