how to do bind data with material-ui table and also pagination - reactjs

Question

I have facing an issue with binding my data with the material-UI table
(1) first thing it is just showing the product name and when I am trying to add product price so it is now binding there
(2) also I have done pagination on my server-side but when i change the page of my table it is just showing the first 5 rows
in this image, you can easily see that just names are showing on the table, and in the console, there are two arrays showing, the first one occurred when the page was loaded and the second one occurred when I change my pagination, check the pagination in the page.
here is my table code
products.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.calories}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.fat}
</TableCell>
</TableRow>
))}
here i am fetching data
const dispatch = useDispatch();
const {loading, products, error, productCount} = useSelector(state => state.products);
useEffect(()=>{
dispatch(getProducts());
},[dispatch])
I am also attaching the material-UI link here which I am using, I just simple copied and paste code the
on the page of material-UI, you can see Custom pagination actions
https://mui.com/components/tables/#main-content

Answer 1

For Pagination, you can use DataGrid in MUI,
First, you have to define a constant for columns naming like below then use the MUI DataGrid
const columns = [
{ field: "name", headerName: "Name" },
{ field: "calories", headerName: "Calories" },
{ field: "fat", headerName: "Fat" },
]
<DataGrid
rows={products}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5, 10, 15]}
checkboxSelection={false}
/>
Here Products is the list you are providing the page to render.
And you have to handle the listing rows pagination by Top, Skip Strategy