-
Notifications
You must be signed in to change notification settings - Fork 928
Description
I want the number of rows per page to change according to the size of the screen (or more specifically, to change when the orientation of the datatable changes at 959.95px). When it is vertically orientated (less than 959.95px), I want it to only have 5 rows, but when it is more than 959.95px, I want it to have 10 rows. It shows up correctly according to the screen size on reload of browser, but when I change the browser screen size, the corresponding changes to the options did not show, even though the state in redux has been changed (I set it to change from true to false if the screen size passes 959.95px).
Is there any reason for this? There is also a rerender going on as I logged the redux state containing the true/false for the max screen width of 959.95px and it logs each time it passes the screen width, showing that it rerenders. However, there is no changes to the options. Am I doing anything wrongly? Do guide me along, thanks!
Here is my code
export default function QuotationTimeline({ quotations, type }) {
const datatable = useSelector(state => state.mediaquery.datatable);
// this datatable is taken from redux, I have checked and it changes correctly to true/false depending on screen width
const options = {
filterType: 'checkbox',
selectableRowsHeader: false,
selectableRows: false,
download: false,
print: false,
customToolbar: () => (null),
rowsPerPage: datatable ? 5 : 10,
rowsPerPageOptions: datatable ? [5] : [10],
}
return (
<MUIDataTable
data={quotations}
columns={columns}
options={options}
/>
)
"mui-datatables": "^3.2.0",
"@material-ui/core": "^4.10.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",