Material-table: Refresh rows and pageSize on change of pageSizeOptions

Created on 26 Jul 2019  路  1Comment  路  Source: mbrn/material-table

Hi.

I calculate number of rows per page of table according to height of container element:

calculateHeights() {
        const container = document.querySelector('.projectsTable');
        const tableRows = Array.from(container.getElementsByClassName('MuiTableRow-root'));
        const tableToolbars = Array.from(container.getElementsByClassName('MuiToolbar-root'));
        const containerHeight = container.clientHeight - 80;
        const rowsHeight = tableRows.map(row => row.clientHeight)
            .reduce((sum, height) => height + sum);
        const toolbarsHeight = tableToolbars.map(row => row.clientHeight)
            .reduce((sum, height) => height + sum);

        return {
            container: containerHeight,
            rows: rowsHeight,
            toolbars: toolbarsHeight,
            rowsCount: tableRows.length
        };
    }

calculateRowsPerPage() {
        const heights = this.calculateHeights();
        let currentRows = Math.floor((heights.container - heights.toolbars) / heights.rowsCount);

        while(heights.toolbars + currentRows * heights.rows / heights.rowsCount > heights.container && currentRows > 1) {
            currentRows--;
        }

        this.setState({
            pageSize: currentRows,
            pageSizeOptions: [currentRows, currentRows * 2, currentRows * 3, currentRows * 4]
        });
    }

...and window.resize event listener calls calculateRowsPerPage method:

componentDidMount() {
        (async () => {
            await this.loadProjects();
            this.calculateRowsPerPage();
        })();

        window.addEventListener('resize', (this.calculateRowsPerPage).bind(this));
    }

It updates options from current state and control in TablePagination contains actual list of page sizes. Next I need rows to be refreshed and first pageSize in list autoselected. Could you add this, please?

bug duplicate

Most helpful comment

Same problem of #703

I created a pull request to resolve that problem, waiting approval

>All comments

Same problem of #703

I created a pull request to resolve that problem, waiting approval

Was this page helpful?
0 / 5 - 0 ratings