score:3
after digging for three hours i found that you have to add the following prop to thetablepagination
component as well as adding the ref as per other great answers explained (how to scroll to an element?):
selectprops(https://github.com/mui-org/material-ui/blob/f013f19bc2792a25663e8a3658aed0365c0a1964/packages/material-ui/src/tablepagination/tablepagination.js#l118) and i use scrollintoview instead of scrollto option.
so change your code to the following it should work:
const tableref = react.useref(null)
...
<tablecontainer component={paper} ref={tableref}>
...
<tablepagination
rowsperpageoptions={[5, 10, 25]}
component="div"
count={users.length}
rowsperpage={rowsperpage}
page={page}
onchangepage={handlechangepage}
onchangerowsperpage={handlechangerowsperpage}
selectprops={{
inputprops: { "aria-label": "rows per page" },
native: true
}}
/>
const handlechangerowsperpage = (event) => {
tableref.current && tableref.current.scrollintoview();
setrowsperpage(parseint(event.target.value, 10))
setpage(0)
}
Source: stackoverflow.com
Related Query
- How to scroll up while selecting rowsperpage in material UI?
- How to fix `TypeError: document.createRange is not a function` error while testing material ui popper with react-testing-library?
- How to add horizontal scroll in Material UI grid
- How to set the width of material ui Popper to its container's width while setting disable portal as false
- How to change scroll behavior while going back in next js?
- How can I show edit button in column cell while hovering over table row in Material UI Table?
- Getting error as 'handleChange is not a function' while selecting date in Material UI
- How can I stop my material UI Cards from going off screen creating a horizontal scroll situation?
- Nesting buttons in Material UI: how to disable ripple effect of container button while clicking on a child button?
- How to prevent arrow key selecting behavior in Material UI auto suggest?
- How to update the Atlaskit DropDownMenu title/trigger colour while selecting an option
- Selecting second child div while hovering on first child div in makeStyles Material UI
- How to use popperComponent Props while using useAutoComplete in material ui reactJS
- How to make a material ui chips array scroll left and right using arrows?
- How to stop the buttons overflowing in material ui table row while scrolling?
- How to pass props while routing on click of Listitem of Material UI using v6
- how to uncheck the other section radio buttons while selecting another section of radio button?
- How to make infinite scroll work with react and intersection api while lazily fetching data?
- How to Remove Focus after selecting Items from the Options in React Material UI
- How to get explicit time after selecting a date in Material UI KeyboardDatePicker
- How to Apply vertical Scroll to material ui ListItem
- How to not to resize the content while using drawer in Material UI
- How to add vertical scroll to my React material table?
- How to Programmatically Scroll Drawer in Material UI React JS?
- How can I make this scroll To Top upon re-rendering while keeping the headers reactive functionality?
- How to turn on and off the scroll trigger in Material UI useScrollTrigger module?
- How to Default export react withRouter while using material UI makeStyles
- How to genrate dynamically feild while selecting specific option from Select Box
- How to prevent selecting value while enter key press in react-select
- How can I add a background color to my nav when scroll up with Material UI?
More Query from same tag
- db.collection is not a function React / Firestore
- Cannot crop image using react-image-crop
- cryptic TypeScript error message when not returning the state from a reducer
- Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘
- Issues setting up a router in React typescript
- React hooks functions have old version of a state var
- Mapping Over an Array onClick Button in React
- action.rehydrate is not a function
- callback function after dispatch function in react-redux
- how to require images that are passed in as prop names into react component?
- How to pass variables to a GraphQL query?
- Passing a value from one request to another request in ReactJs
- How to select only one checkbox in a group using reactjs component
- Global variable not defined across multiple useEffects
- How to validate input fields in react?
- Browser autocomplete issue
- How to return a function within a function and display it in return
- Display Component based on another component lifecycle
- Generate React form fields from JSON
- React routing throws error:Cannot read property 'push' of undefined for Browser router
- How to see nested react component
- React create one styled components for two different icons?
- react js carousel and positions
- Unsure if I'm using setState correctly because my state is not updated during initial load
- how to handle subcomponent completion eventsin react / flux / redux
- Express overwrites react-router client side routes
- How to execute after yield take()
- How to Pass Event Up Through Multiple Child Components?
- immer.js merge nested object
- Axios posts as JSON object, how to change