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,41 +44,71 @@ 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 (
-      <Table aria-labelledby={label}>
+      <React.Fragment>
-        <TableHead
+        <Table aria-labelledby={label}>
-          columns={columns}
+          <TableHead
-          order={order}
+            columns={columns}
-          orderBy={orderBy}
+            order={order}
-          onSort={this.onSort}
+            orderBy={orderBy}
+            onSort={this.onSort}
+          />
+          <TableBody>
+            {stableSort(data, getSorting(order, orderBy, orderProp))
+              .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
+              .map((row: any, index: number) => (
+                <TableRow
+                  tabIndex={-1}
+                  key={index}
+                >
+                  {
+                    columns.map((column: Column) => (
+                      <TableCell key={column.id} numeric={column.numeric} component="th" scope="row" padding="none">
+                        {row[column.id]}
+                      </TableCell>
+                    ))
+                  }
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+        <TablePagination
+          component="div"
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          backIconButtonProps={backProps}
+          nextIconButtonProps={nextProps}
+          onChangePage={this.handleChangePage}
+          onChangeRowsPerPage={this.handleChangeRowsPerPage}
         />
-        <TableBody>
+      </React.Fragment>
-          {stableSort(data, getSorting(order, orderBy, orderProp))
-            .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
-            .map((row: any, index: number) => (
-              <TableRow
-                tabIndex={-1}
-                key={index}
-              >
-                {
-                  columns.map((column: Column) => (
-                    <TableCell key={column.id} numeric={column.numeric} component="th" scope="row" padding="none">
-                      {row[column.id]}
-                    </TableCell>
-                  ))
-                }
-              </TableRow>
-            ))}
-        </TableBody>
-      </Table>
     )
   }
 }

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,
 })