I am currently exploring React Material UI for the first time.
The table I am working with can be found here under the "Custom pagination actions" section.
Within this section, there is footer content containing buttons for rows per page, next, previous, etc...
I am having trouble centering this content in the middle. Currently, it is aligned to the right by default.
I attempted to add:
align="center"
justify="center"
but was unsuccessful.
This is how my footer code appears:
<TablePagination
className=""
align="center"
justify="center"
text-align="center"
rowsPerPageOptions={[5, 10, {label: 'All', value: -1}]}
// colSpan={12}
count={props.rowsCount}
rowsPerPage={props.rowsPerPage}
page={props.page}
SelectProps={{
inputProps: {'aria-label': 'rows per page'},
native: true,
}}
onChangePage={props.onChangePage}
onChangeRowsPerPage={props.onChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
Table pagination actions
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import LastPageIcon from '@material-ui/icons/LastPage';
import {makeStyles, useTheme} from '@material-ui/core/styles';
import {IconButton} from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5),
},
}));
function TablePaginationActions(props) {
const classes = useStyles();
const theme = useTheme();
const {count, page, rowsPerPage, onChangePage} = props;
const c = console;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
};
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
export default TablePaginationActions;