Skip to content

Options not changing with screen size changes even though specified in options #1445

@kdeasymoneysniper

Description

@kdeasymoneysniper

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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions