/
CustomFooter.js
61 lines (51 loc) · 1.73 KB
/
CustomFooter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from "react";
import TableFooter from "@mui/material/TableFooter";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import MuiTablePagination from "@mui/material/TablePagination";
import { withStyles } from "@mui/styles";
const defaultFooterStyles = {
};
class CustomFooter extends React.Component {
handleRowChange = event => {
this.props.changeRowsPerPage(event.target.value);
};
handlePageChange = (_, page) => {
this.props.changePage(page);
};
render() {
const { count, classes, textLabels, rowsPerPage, page } = this.props;
const footerStyle = {
display:'flex',
justifyContent: 'flex-end',
padding: '0px 24px 0px 24px'
};
return (
<TableFooter>
<TableRow>
<TableCell style={footerStyle} colSpan={1000}>
<button>Custom Option</button>
<MuiTablePagination
component="div"
count={count}
rowsPerPage={rowsPerPage}
page={page}
labelRowsPerPage={textLabels.rowsPerPage}
labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
backIconButtonProps={{
'aria-label': textLabels.previous,
}}
nextIconButtonProps={{
'aria-label': textLabels.next,
}}
rowsPerPageOptions={[10,20,100]}
onChangePage={this.handlePageChange}
onChangeRowsPerPage={this.handleRowChange}
/>
</TableCell>
</TableRow>
</TableFooter>
);
}
}
export default withStyles(defaultFooterStyles, { name: "CustomFooter" })(CustomFooter);