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?
Same problem of #703
I created a pull request to resolve that problem, waiting approval
Most helpful comment
Same problem of #703
I created a pull request to resolve that problem, waiting approval