title: Material UI Table Pagination Issue React
body: <p>I m using Material UI and following this <a href="https://material-ui.com/demos/tables/" rel="nofollow noreferrer">https://material-ui.com/demos/tables/</a> sample.</p>
  
  <p>When i try to do sample for Custom Table Pagination Action it's not working. It's returning inherits.js:5 Uncaught TypeError: Super expression must either be null or a function error.</p>
  
  <p>I narrow down to issue, when i add the below import i could see the above error.</p>
  
  <pre><code>import TablePagination from '@material-ui/core/TablePagination';
  </code></pre>
  
  <p>Please find the code below and suggest me to move on.</p>
  
  <pre><code>import React from 'react';
  import PropTypes 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 TableCell from '@material-ui/core/TableCell';
  import TableFooter from '@material-ui/core/TableFooter';
  import TablePagination from '@material-ui/core/TablePagination';
  import TableRow from '@material-ui/core/TableRow';
  import Paper from '@material-ui/core/Paper';
  import IconButton from '@material-ui/core/IconButton';
  import FirstPageIcon from '@material-ui/icons/FirstPage';
  import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
  import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
  import LastPageIcon from '@material-ui/icons/LastPage';
  
  const actionsStyles = theme =&gt; ({
    root: {
      flexShrink: 0,
      color: theme.palette.text.secondary,
      marginLeft: theme.spacing.unit * 2.5,
    },
  });
  
  class TablePaginationActions extends React.Component {
    handleFirstPageButtonClick = event =&gt; {
      this.props.onChangePage(event, 0);
    };
  
    handleBackButtonClick = event =&gt; {
      this.props.onChangePage(event, this.props.page - 1);
    };
  
    handleNextButtonClick = event =&gt; {
      this.props.onChangePage(event, this.props.page + 1);
    };
  
    handleLastPageButtonClick = event =&gt; {
      this.props.onChangePage(
        event,
        Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1),
      );
    };
  
  
  
  render() {
      const { classes, count, page, rowsPerPage, theme } = this.props;
  return (
    &lt;div className={classes.root}&gt;
      &lt;IconButton
        onClick={this.handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="First Page"
      &gt;
        {theme.direction === 'rtl' ? &lt;LastPageIcon /&gt; : &lt;FirstPageIcon /&gt;}
      &lt;/IconButton&gt;
      &lt;IconButton
        onClick={this.handleBackButtonClick}
        disabled={page === 0}
        aria-label="Previous Page"
      &gt;
        {theme.direction === 'rtl' ? &lt;KeyboardArrowRight /&gt; : &lt;KeyboardArrowLeft /&gt;}
      &lt;/IconButton&gt;
      &lt;IconButton
        onClick={this.handleNextButtonClick}
        disabled={page &gt;= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Next Page"
      &gt;
        {theme.direction === 'rtl' ? &lt;KeyboardArrowLeft /&gt; : &lt;KeyboardArrowRight /&gt;}
      &lt;/IconButton&gt;
      &lt;IconButton
        onClick={this.handleLastPageButtonClick}
        disabled={page &gt;= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Last Page"
      &gt;
        {theme.direction === 'rtl' ? &lt;FirstPageIcon /&gt; : &lt;LastPageIcon /&gt;}
      &lt;/IconButton&gt;
        &lt;/div&gt;
      );
    }
  }
  TablePaginationActions.propTypes = {
    classes: PropTypes.object.isRequired,
    count: PropTypes.number.isRequired,
    onChangePage: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
    theme: PropTypes.object.isRequired,
  };
  
  const TablePaginationActionsWrapped = withStyles(actionsStyles, { withTheme: true })(
    TablePaginationActions,
  );
  
  let counter = 0;
  function createData(name, calories, fat) {
    counter += 1;
    return { id: counter, name, calories, fat };
  }
  
  const styles = theme =&gt; ({
    root: {
      width: '100%',
      marginTop: theme.spacing.unit * 3,
    },
    table: {
      minWidth: 500,
    },
    tableWrapper: {
      overflowX: 'auto',
    },
  });
  
  class CustomPaginationActionsTable extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        data: [
          createData('Cupcake', 305, 3.7),
          createData('Donut', 452, 25.0),
          createData('Eclair', 262, 16.0),
          createData('Frozen yoghurt', 159, 6.0),
          createData('Gingerbread', 356, 16.0),
          createData('Honeycomb', 408, 3.2),
          createData('Ice cream sandwich', 237, 9.0),
          createData('Jelly Bean', 375, 0.0),
          createData('KitKat', 518, 26.0),
          createData('Lollipop', 392, 0.2),
          createData('Marshmallow', 318, 0),
          createData('Nougat', 360, 19.0),
          createData('Oreo', 437, 18.0),
        ].sort((a, b) =&gt; (a.calories &lt; b.calories ? -1 : 1)),
        page: 0,
        rowsPerPage: 5,
      };
    }
  
    handleChangePage = (event, page) =&gt; {
      this.setState({ page });
    };
  
    handleChangeRowsPerPage = event =&gt; {
      this.setState({ rowsPerPage: event.target.value });
    };
  
    render() {
      const { classes } = this.props;
      const { data, rowsPerPage, page } = this.state;
      const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
  
      return (
        &lt;Paper className={classes.root}&gt;
          &lt;div className={classes.tableWrapper}&gt;
            &lt;Table className={classes.table}&gt;
              &lt;TableBody&gt;
                {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n =&gt; {
                  return (
                    &lt;TableRow key={n.id}&gt;
                      &lt;TableCell component="th" scope="row"&gt;
                        {n.name}
                      &lt;/TableCell&gt;
                      &lt;TableCell numeric&gt;{n.calories}&lt;/TableCell&gt;
                      &lt;TableCell numeric&gt;{n.fat}&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  );
                })}
                {emptyRows &gt; 0 &amp;&amp; (
                  &lt;TableRow style={{ height: 48 * emptyRows }}&gt;
                    &lt;TableCell colSpan={6} /&gt;
                  &lt;/TableRow&gt;
                )}
              &lt;/TableBody&gt;
              &lt;TableFooter&gt;
                &lt;TableRow&gt;
                  &lt;TablePagination
                    colSpan={3}
                    count={data.length}
                    rowsPerPage={rowsPerPage}
                    page={page}
                    onChangePage={this.handleChangePage}
                    onChangeRowsPerPage={this.handleChangeRowsPerPage}
                    ActionsComponent={TablePaginationActionsWrapped}
                  /&gt;
                &lt;/TableRow&gt;
              &lt;/TableFooter&gt;
            &lt;/Table&gt;
          &lt;/div&gt;
        &lt;/Paper&gt;
      );
    }
  }
  
  CustomPaginationActionsTable.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CustomPaginationActionsTable);
  </code></pre>