Bug 1520857- add support in tc-web for displaying information from the lastFire table

src/components/Button/index.jsx

@@ -50,7 +50,7 @@ export default class Button extends Component {
     spanProps: object,
   };
 
-  handleButtonClick = () => {
+  handleButtonClick = e => {
     const { onClick, track } = this.props;
 
     if (track && process.env.GA_TRACKING_ID) {
@@ -60,7 +60,7 @@ export default class Button extends Component {
     }
 
     if (onClick) {
-      onClick();
+      onClick(e);
     }
   };
 

src/components/DataTable/index.jsx

@@ -7,14 +7,27 @@ import {
   oneOf,
   oneOfType,
   object,
+  bool,
 } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
+import TableFooter from '@material-ui/core/TableFooter';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import TableRow from '@material-ui/core/TableRow';
+import TablePagination from '@material-ui/core/TablePagination';
 
+@withStyles(() => ({
+  noDisplay: {
+    display: 'none',
+  },
+  tablePaginationRoot: {
+    position: 'relative',
+    left: '207%',
+  },
+}))
 /**
  * A table to display a set of data elements.
  */
@@ -26,6 +39,11 @@ export default class DataTable extends Component {
     sortByHeader: null,
     sortDirection: 'desc',
     noItemsMessage: 'No items for this page.',
+    isPaginate: false,
+  };
+
+  state = {
+    page: 0,
   };
 
   static propTypes = {
@@ -66,6 +84,10 @@ export default class DataTable extends Component {
      * A message to display when there is no items to display.
      */
     noItemsMessage: string,
+    /**
+     * Whether to paginate the table
+     */
+    isPaginate: bool,
   };
 
   handleHeaderClick = ({ target }) => {
@@ -76,17 +98,25 @@ export default class DataTable extends Component {
     }
   };
 
+  handleChangePage = (event, page) => {
+    this.setState({ page });
+  };
+
   render() {
     const {
+      classes,
       items,
       columnsSize,
       renderRow,
       headers,
       sortByHeader,
       sortDirection,
       noItemsMessage,
+      isPaginate,
     } = this.props;
     const colSpan = columnsSize || (headers && headers.length) || 0;
+    const { page } = this.state;
+    const rowsPerPage = 5;
 
     return (
       <Table>
@@ -115,9 +145,36 @@ export default class DataTable extends Component {
               </TableCell>
             </TableRow>
           ) : (
-            items.map(renderRow)
+            items
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map(renderRow)
           )}
         </TableBody>
+        {isPaginate && (
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                classes={{
+                  root: classes.tablePaginationRoot,
+                  spacer: classes.noDisplay,
+                  caption: classes.noDisplay,
+                }}
+                component="div"
+                count={items.length}
+                rowsPerPage={rowsPerPage}
+                rowsPerPageOptions={[rowsPerPage]}
+                page={page}
+                backIconButtonProps={{
+                  'aria-label': 'Previous Page',
+                }}
+                nextIconButtonProps={{
+                  'aria-label': 'Next Page',
+                }}
+                onChangePage={this.handleChangePage}
+              />
+            </TableRow>
+          </TableFooter>
+        )}
       </Table>
     );
   }