Material ui : Table scroll to top of new page

Question

I'm a bit lost on this.

I already try many settings with scrollTop. Let me explain, I'm using material Ui and their pagination stuff with table documentation here so I'm stuck when I click on next set of row( or change page ), I start at the bottom. but I would like to start at the top of every new row.

If someone can help me and give me an explanation of why, A huge thanks! sorry, I'm quite new to React.

here is my code :

function DisplayList(props) {
   var rows = [];
   const data = props.data;
   const searchData = props.searchData;
   const setHoverAddress = props.setHoverAddress;

   const classes = useStyles1();

   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);

   const handleChangePage = (event, newPage) => {
       setPage(newPage);   
   };

   const handleChangeRowsPerPage = (event) => {
       setRowsPerPage(parseInt(event.target.value, 10));
       setPage(0);
   };


   data.map((result, index) => { // WARNING : slice here which limits the number of results: .slice(0, 5)
       const volulme = Math.round(result.volulme);
       const volulme2 = Math.round(result.volulme2);


       rows.push(
       <div id={index}>
           <ListItem 
           alignItems="flex-start"
           onMouseEnter={e => {
               console.log(index);
           }}
           >
               <Grid container direction="row" spacing={1}>
                   <Grid item xs={5}>

                   {/* <Stage width={150} height={150}>
                       <Layer>
                       <Shape
                           sceneFunc={(context, shape) => {
                           context.beginPath();
                           context.moveTo(20, 10);
                           context.lineTo(120, 80);
                           context.lineTo(120, 140);
                           context.lineTo(22, 140);
                           context.closePath();
                           // (!) Konva specific method, it is very important
                           context.fillStrokeShape(shape);
                           }}
                           fill="#00D2FF"
                           stroke="black"
                           strokeWidth={2}
                       />
                       </Layer>
                   </Stage> */}

                   </Grid>
                   <Grid item xs={7}>
                   <ListItemText
                   primary={
                   }
                   secondary={
                       <React.Fragment>
                       <Typography
                           component="span"
                           variant="body2"
                           display="inline"
                           color="textPrimary"
                       >
                           Solid2 : {volulme2}
                       </Typography>
                       </React.Fragment>
                   }
                   />
                   <ListItemText
                   secondary={
                       <React.Fragment>
                       <Typography
                           component="span"
                           variant="body2"
                           display="inline"
                           color="textPrimary"
                       >
                           Solid : {volulme}
                       </Typography>
                       </React.Fragment>
                   }
                   />
                   <FormControlLabel
                   control={
                       <Checkbox icon={<FavoriteBorder />} 
                       checkedIcon={<Favorite />} 
                       color="primary"
                       onClick={(e) => {
                           if (e.target.checked) {
                               addFavourite(parc_id, 1)
                           } else {
                               removeFavourite(parc_id, 1)
                           }
                       }}
                       name="checkedH" />
                   }
                       label="Enregistrer"
                   />
                   </Grid>
               </Grid>
           </ListItem>
       </div>
       )
   })


   return (
           <Table className={classes.table} aria-label="custom pagination table">
               <TableBody>
               {(rowsPerPage > 0
                   ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   : rows
               ).map((row) => (
                   <TableRow key={index}>
                       <TableCell component="th" scope="row">
                           {row}
                       </TableCell>
                   </TableRow>
               ))}
               </TableBody>
               <TableFooter>
                   <TableRow>
                       <TablePagination
                       rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                       colSpan={3}
                       count={rows.length}
                       rowsPerPage={rowsPerPage}
                       page={page}
                       SelectProps={{
                           inputProps: { 'aria-label': 'rows per page' },
                           native: true,
                       }}
                       onChangePage={handleChangePage}
                       onChangeRowsPerPage={handleChangeRowsPerPage}
                       ActionsComponent={TablePaginationActions}
                       />
                   </TableRow>
               </TableFooter>
           </Table>
   )
}

Elfi Yang · Accepted Answer · 2020-10-02 08:53:12Z

2

Have you tried scrollIntoView? I used scrollTo not working but scrollIntoView is fine.

  const handleChangeRowsPerPage = (event) => {
    tableRef.current && tableRef.current.scrollIntoView();

    setRowsPerPage(parseInt(event.target.value, 10))
    setPage(0)
  }

answered Oct 2, 2020 at 8:53

Elfi Yang

1531 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GitGitBoom · Accepted Answer · 2020-07-13 15:43:55Z

1

I don't see scrollTop in your example, so it's tough to say exactly what the issue is. If you just trying to scroll the window try window.scrollTo(0, 0);

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

If your trying to scroll the table element itself you can use a ref.

To the top of your component add:

function DisplayList(props) {
   const tableRef = React.createRef();
   var rows = [];
   const data = props.data;
   ...

Add the ref to your table:

  return (
  <Table
    ref={tableRef}
    className={classes.table}
    aria-label="custom pagination table"
  >
    <TableBody>
    ...

Finally your page event use the ref to change scrollTop

const handleChangePage = (event, newPage) => {
  setPage(newPage);   
  tableRef.current?.scrollTop = 0;
};

edited Jul 13, 2020 at 15:43

answered Jul 13, 2020 at 15:19

GitGitBoom

1,9226 silver badges5 bronze badges

7 Comments

L.S Over a year ago

Thanks for the answer @GitGitBoom . Yes I removed the scrollTop on my example . As you can see on the documentation of material UI I'm using table pagination and once I got data in it, every time I change "page" I stay at the bottom of it, I would like to be at the top

GitGitBoom Over a year ago

Adding window.scrollTo(0, 0); to your handleChangePage event should do it then.

L.S Over a year ago

A big thanks for the answer! However for answer leads to a failed to compile " Syntax error: Invalid left-hand side in assignment expression " on the tableRef.current?.scrollTop = 0; . And I already try the window.scrollTo(0,0); it changes nothing .... :( Thanks for you time! if you have any idea!

GitGitBoom Over a year ago

Yep you can either install optional chaining: (babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining), or you can just use a conditional: if(tableRef.current) {tableRef.current.scrollTop = 0;}. The reason being is the current property may not exist depending of the timing of the call.

L.S Over a year ago

Hi @GitGitBoom , thank's again for the answer ! I've try with the conditional so no error but it's not working either :/ , this thing is going to make me mad ...

|

Andran · Accepted Answer · 2022-08-26 11:40:50Z

0

Оn Angular Material i did like this

// html
<table mat-table [dataSource]="dataSource" #dataTable>
...
</table>

// ts
@ViewChild('dataTable') dataTable: ElementRef;

pageChange(event: { pageSize: number; pageIndex: number; }): void {
    const tableElement = this.dataTable['_elementRef']?.nativeElement;
    tableElement?.scrollIntoView();
    // set current page event.pageIndex or event.pageIndex + 1
    // get data
}

edited Aug 26, 2022 at 11:40

answered Aug 26, 2022 at 8:14

Andran

2841 silver badge7 bronze badges

Collectives™ on Stack Overflow

Material ui : Table scroll to top of new page

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related