Adding Pagination to Table component

src/components/Table/index.jsx

@@ -6,11 +6,11 @@ import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import TableHead, { type Column } from '~/components/Table/TableHead'
+import TablePagination from '@material-ui/core/TablePagination'
 import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
 
 type Props<K> = {
   label: string,
-  rowsPerPage?: number,
   defaultOrderBy: string,
   columns: List<Column>,
   data: Array<K>,
@@ -21,6 +21,7 @@ type State = {
   order: Order,
   orderBy: string,
   orderProp: boolean,
+  rowsPerPage: number,
 }
 
 class GnoTable<K> extends React.Component<Props<K>, State> {
@@ -29,6 +30,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     order: 'desc',
     orderBy: this.props.defaultOrderBy,
     orderProp: false,
+    rowsPerPage: 5,
   }
 
   onSort = (property: string, orderProp: boolean) => {
@@ -42,15 +44,34 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     this.setState({ order, orderBy, orderProp })
   }
 
+  handleChangePage = (page: number) => {
+    this.setState({ page })
+  }
+
+  handleChangeRowsPerPage = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    const rowsPerPage = Number(event.target.value)
+    this.setState({ rowsPerPage })
+  }
+
   render() {
     const {
-      data, label, columns, rowsPerPage = 5,
+      data, label, columns,
     } = this.props
+
     const {
-      order, orderBy, page, orderProp,
+      order, orderBy, page, orderProp, rowsPerPage,
     } = this.state
 
+    const backProps = {
+      'aria-label': 'Previous Page',
+    }
+
+    const nextProps = {
+      'aria-label': 'Next Page',
+    }
+
     return (
+      <React.Fragment>
         <Table aria-labelledby={label}>
           <TableHead
             columns={columns}
@@ -77,6 +98,17 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
               ))}
           </TableBody>
         </Table>
+        <TablePagination
+          component="div"
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          backIconButtonProps={backProps}
+          nextIconButtonProps={nextProps}
+          onChangePage={this.handleChangePage}
+          onChangeRowsPerPage={this.handleChangeRowsPerPage}
+        />
+      </React.Fragment>
     )
   }
 }

src/theme/mui.js

@@ -131,6 +131,32 @@ export default createMuiTheme({
         fontWeight: bolderFont,
       },
     },
+    MuiTablePagination: {
+      toolbar: {
+        '& > span:nth-child(2)': {
+          order: 1,
+        },
+      },
+      selectIcon: {
+        height: '100%',
+        top: '0px',
+      },
+      caption: {
+        fontFamily: 'Roboto Mono, monospace',
+        letterSpacing: '-0.5px',
+        order: 3,
+        color: disabled,
+      },
+      input: {
+        order: 2,
+        width: '60px',
+        padding: `0 ${md} 0 0`,
+      },
+      actions: {
+        order: 4,
+        color: disabled,
+      },
+    },
   },
   palette,
 })