title: Material Ui Table Sort with pagination
body: <p>I'm trying to get my table to sort via the different columns following the material UI documentation. I'm not sure why its not working but upon clicking on the header the sort order shows up and i can see everything firing it just not sorting. I believe i have a tiny error somewhere in my code and after staring at it for hours i cant seem to find it.</p>
  
  <p><a href="https://material-ui.com/components/tables/" rel="noreferrer">Material UI Table Documentation</a></p>
  
  <p>Working CodeSandbox I'm trying to follow as well that matches the documentation: <a href="https://codesandbox.io/s/table-sort-7tg1j?file=/demo.js:4603-4690" rel="noreferrer">CodeSandbox</a></p>
  
  <p>Code base:</p>
  
  <pre><code>function TablePaginationActions(props) {
      const theme = useTheme();
      const { count, page, rowsPerPage, onChangePage } = props;
  
      const handleFirstPageButtonClick = (event) =&gt; {
          onChangePage(event, 0);
      };
  
      const handleBackButtonClick = (event) =&gt; {
          onChangePage(event, page - 1);
      };
  
      const handleNextButtonClick = (event) =&gt; {
          onChangePage(event, page + 1);
      };
  
      const handleLastPageButtonClick = (event) =&gt; {
          onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
      };
  
      return (
          &lt;div style={{ flexShrink: 0 }}&gt;
              &lt;IconButton
                  onClick={handleFirstPageButtonClick}
                  disabled={page === 0}
                  aria-label="first page"
              &gt;
                  {theme.direction === 'rtl' ? &lt;LastPageIcon /&gt; : &lt;FirstPageIcon /&gt;}
              &lt;/IconButton&gt;
              &lt;IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page"&gt;
                  {theme.direction === 'rtl' ? &lt;KeyboardArrowRight /&gt; : &lt;KeyboardArrowLeft /&gt;}
              &lt;/IconButton&gt;
              &lt;IconButton
                  onClick={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={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 = {
      count: PropTypes.number.isRequired,
      onChangePage: PropTypes.func.isRequired,
      page: PropTypes.number.isRequired,
      rowsPerPage: PropTypes.number.isRequired,
  };
  
  function descendingComparator(a, b, orderBy) {
    if (b[orderBy] &lt; a[orderBy]) {
      return -1;
    }
    if (b[orderBy] &gt; a[orderBy]) {
      return 1;
    }
    return 0;
  }
  
  function getComparator(order, orderBy) {
    return order === "desc"
      ? (a, b) =&gt; descendingComparator(a, b, orderBy)
      : (a, b) =&gt; -descendingComparator(a, b, orderBy);
  }
  
  function stableSort(array, comparator) {
    const stabilizedThis = array.map((el, index) =&gt; [el, index]);
    stabilizedThis.sort((a, b) =&gt; {
      const order = comparator(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map(el =&gt; el[0]);
  }
  
  const headCells = [
    {
      id: "",
      numeric: false,
      disablePadding: true,
      label: ""
    },
    { id: "Holiday", numeric: true, disablePadding: false, label: "Holiday" },
    { id: "Date", numeric: true, disablePadding: false, label: "Date" },
    { id: "Branch", numeric: true, disablePadding: false, label: "Branch" },
    { id: "Hours", numeric: true, disablePadding: false, label: "Hours" },
    { id: "Web", numeric: true, disablePadding: false, label: "Web" },
    { id: "Phone", numeric: true, disablePadding: false, label: "Phone" },
    { id: "CoOp", numeric: true, disablePadding: false, label: "CoOp" },
    { id: "Submitted", numeric: true, disablePadding: false, label: "Submitted" },
    { id: "SubmittedBy", numeric: true, disablePadding: false, label: "SubmittedBy" },
    { id: "Published", numeric: true, disablePadding: false, label: "Published" },
    { id: "PublishedBy", numeric: true, disablePadding: false, label: "PublishedBy" },
  ];
  
  const useStyles = makeStyles(theme =&gt; ({
    visuallyHidden: {
      border: 0,
      clip: "rect(0 0 0 0)",
      height: 1,
      margin: -1,
      overflow: "hidden",
      padding: 0,
      position: "absolute",
      top: 20,
      width: 1
    }
  }));
  
  function EnhancedTableHead(props) {
    const {
      classes,
      order,
      orderBy,
      onRequestSort
    } = props;
    const createSortHandler = property =&gt; event =&gt; {
      onRequestSort(event, property);
    };
  
    return (
      &lt;TableHead&gt;
        &lt;TableRow&gt;
          {headCells.map(headCell =&gt; (
            &lt;TableCell
              key={headCell.id}
              sortDirection={orderBy === headCell.id ? order : false}
            &gt;
              &lt;TableSortLabel
                active={orderBy === headCell.id}
                direction={orderBy === headCell.id ? order : "asc"}
                onClick={createSortHandler(headCell.id)}
              &gt;
                {headCell.label}
                {orderBy === headCell.id ? (
                  &lt;span className={classes.visuallyHidden}&gt;
                    {order === "desc" ? "sorted descending" : "sorted ascending"}
                  &lt;/span&gt;
                ) : null}
              &lt;/TableSortLabel&gt;
            &lt;/TableCell&gt;
          ))}
        &lt;/TableRow&gt;
      &lt;/TableHead&gt;
    );
  }
  
  const HolidaySettings = () =&gt; {
      const classes = useStyles();
      const [loading, setLoading] = useState(true);
      const [open, setOpen] = React.useState(false);
      const [page, setPage] = React.useState(0);
      const [rowsPerPage, setRowsPerPage] = React.useState(5);
      const anchorRef = React.useRef(null);
      const [dialogOpen, setDialogOpen] = React.useState(false);
      const [dialogData, setDialogData] = React.useState({});
      const [showInactive, setShowInactive] = useState(false);
      const [searchResults, setSearchResults] = useState([]);
      const [order, setOrder] = React.useState("asc");
      const [orderBy, setOrderBy] = React.useState("Holiday");
  
      const dispatch = useDispatch();
  
      const onInit = useCallback(() =&gt; {
          dispatch(actions.holiday_getHolidays());
          dispatch(actions.holiday_getProductionHolidays());
      }, [dispatch]);
  
      useEffect(() =&gt; {
          if (loading) {
              onInit();
          }
      }, [loading]);
  
      const rows = useSelector(state =&gt; {
          let results = [];
  
          if (showInactive) {
              results = state.holidays.holidays;
          } else {            
              results = state.holidays.activeHolidays;
          }
  
          if (state.holidays.holidays &amp;&amp; loading) {
              setLoading(false);
              setSearchResults(results);
          }
  
          return results;
      });
  
      const handleRequestSort = (event, property) =&gt; {
          const isAsc = orderBy === property &amp;&amp; order === "asc";
          setOrder(isAsc ? "desc" : "asc");
          setOrderBy(property);
      };
  
      const handleToggle = () =&gt; {
          setOpen((prevOpen) =&gt; !prevOpen);
      };
  
      const handleDialogOpen = (dataElement) =&gt; {
          setDialogData(dataElement);
          setDialogOpen(true);
          setOpen(false);
      }
  
      const handleHolidayDelete = (dataElement) =&gt; {
          dispatch(actions.holiday_deleteHoliday(dataElement));
      }
  
      const handleDialogClose = () =&gt; {
          setOpen(false);
          setDialogOpen(false);
      };
  
      const handleClose = (event) =&gt; {
          if (anchorRef.current &amp;&amp; anchorRef.current.contains(event.target)) {
              return;
          }
  
          setOpen(false);
      };
  
      const handleChangePage = (event, newPage) =&gt; {
          setPage(newPage);
      };
  
      const handleChangeRowsPerPage = (event) =&gt; {
          setRowsPerPage(parseInt(event.target.value, 10));
          setPage(0);
      };
  
      const handleInactiveChange = (e) =&gt; {
          e.persist();
          const { checked } = e.target;
          setShowInactive(checked)
      }
  
      const handleSearch = (e) =&gt; {
          e.persist();
          const searchValue = e.target.value;
          let results = _.map(rows, function(holiday) {
              if (holiday.HolidayName.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) return holiday;
          });
          results = _.without(results, undefined);
          setSearchResults(results);
      }
  
  
  
      return (
          &lt;div&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col"&gt;
                      &lt;div className="card-chart card"&gt;
                          &lt;div className="card-header"&gt;
                              &lt;div className="row"&gt;
                                  &lt;div className="col-sm-12 d-flex"&gt;
                                      &lt;h4 className="card-title"&gt;Holiday Settings&lt;/h4&gt;
  
                                      &lt;div
                                          className="ml-auto mr-5"
                                          ref={anchorRef}
                                          aria-controls={open ? 'menu-list-grow' : undefined}
                                          aria-haspopup="true"
                                          onClick={handleToggle}&gt;
                                          &lt;SettingsOutlinedIcon style={{ fontSize: 20 }} /&gt;
                                          {open ? (
                                              &lt;ExpandLess style={{ fontSize: 12 }} /&gt;
                                          ) : (
                                                  &lt;ExpandMore style={{ fontSize: 12 }} /&gt;
                                              )}
                                      &lt;/div&gt;
                                      &lt;Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal&gt;
                                          {({ TransitionProps, placement }) =&gt; (
                                              &lt;Grow
                                                  {...TransitionProps}
                                                  style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                                              &gt;
                                                  &lt;Paper&gt;
                                                      &lt;ClickAwayListener onClickAway={handleClose}&gt;
                                                          &lt;MenuList autoFocusItem={open} id="menu-list-grow"&gt;
                                                              &lt;MenuItem onClick={handleDialogOpen}&gt;Add Holiday&lt;/MenuItem&gt;
                                                              &lt;MenuItem&gt;
                                                                  &lt;FormControlLabel className=""
                                                                      label="Show Inactive"
                                                                      control={
                                                                          &lt;Checkbox
                                                                              checked={showInactive || false}
                                                                              value={showInactive}
                                                                              onChange={handleInactiveChange}
                                                                              name="Show Inactive"
                                                                              color="primary"
                                                                          /&gt;
                                                                      }
                                                                  /&gt;
                                                              &lt;/MenuItem&gt;
                                                          &lt;/MenuList&gt;
                                                      &lt;/ClickAwayListener&gt;
                                                  &lt;/Paper&gt;
                                              &lt;/Grow&gt;
                                          )}
                                      &lt;/Popper&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          {loading ? (
                              &lt;CanvasLoader loading={loading} /&gt;
                          ) : (
                                  &lt;div className="card-body"&gt;
                                      &lt;div className="text-left col-12"&gt;
                                          &lt;Paper&gt;
                                              &lt;TextField id="standard-basic" label="Search" onChange={handleSearch}/&gt;
                                              &lt;TableContainer component={Paper} className="holidaysTableContainer"&gt;
                                                  &lt;Table className="w-100" aria-label="simple table"&gt;
                                                      &lt;EnhancedTableHead
                                                        classes={classes}
                                                        order={order}
                                                        orderBy={orderBy}
                                                        onRequestSort={handleRequestSort}
                                                        rowCount={rows.length}
                                                      /&gt;
                                                      &lt;TableBody&gt;
                                                          {stableSort(searchResults, getComparator(order, orderBy))
                                                              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                                              .map((row, index) =&gt; {
                                                                  return (
                                                                      &lt;TableRow key={row.RowId} id={row.Id} className={row.Active ? '' : 'inactive-row'}&gt;
                                                                          &lt;TableCell&gt;{&lt;div className="d-flex flex-align-center justify-content-center"&gt;&lt;CreateOutlinedIcon className="holidayEditIcon" style={{ color: '#00f2c3' }} onClick={() =&gt; { handleDialogOpen(row); }} /&gt; {row.Active ? (&lt;DeleteForeverOutlinedIcon className="holidayDeleteIcon" style={{ color: '#fd5d93' }} onClick={() =&gt; { handleHolidayDelete(row); }} /&gt;) : (&lt;div&gt;&lt;/div&gt;)}&lt;/div&gt;}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{row.HolidayName}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{moment(row.HolidayDate).format('ddd, MMM Do YYYY')}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{row.Branch ? row.Branch : 'All'}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{row.Hours ? row.Hours : 'Closed'}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{(row.Web ? &lt;DoneIcon style={{ color: '#00f2c3' }} value="true" /&gt; : &lt;CloseIcon style={{ color: '#fd5d93' }} value="false" /&gt;)}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{(row.Phone ? &lt;DoneIcon style={{ color: '#00f2c3' }} value="true" /&gt; : &lt;CloseIcon style={{ color: '#fd5d93' }} value="false" /&gt;)}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{(row.CoOp ? &lt;DoneIcon style={{ color: '#00f2c3' }} value="true" /&gt; : &lt;CloseIcon style={{ color: '#fd5d93' }} value="false" /&gt;)}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{(row.Submitted ? moment(row.Submitted).format('MMM Do, YYYY') : false)}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{row.SubmittedBy}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{(row.Published ? moment(row.Published).format('MMM Do, YYYY') : false)}&lt;/TableCell&gt;
                                                                          &lt;TableCell&gt;{row.PublishedBy}&lt;/TableCell&gt;
                                                                      &lt;/TableRow&gt;
                                                                  )
                                                          })}
                                                      &lt;/TableBody&gt;
                                                      &lt;TableFooter&gt;
                                                          &lt;TableRow&gt;
                                                              &lt;TablePagination
                                                                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                                                                  colSpan={12}
                                                                  count={searchResults.length}
                                                                  rowsPerPage={rowsPerPage}
                                                                  page={page}
                                                                  onChangePage={handleChangePage}
                                                                  onChangeRowsPerPage={handleChangeRowsPerPage}
                                                                  ActionsComponent={TablePaginationActions}
                                                              /&gt;
                                                          &lt;/TableRow&gt;
                                                      &lt;/TableFooter&gt;
                                                  &lt;/Table&gt;
                                              &lt;/TableContainer&gt;
                                          &lt;/Paper&gt;
                                          &lt;HolidayDialog open={dialogOpen} onClose={handleDialogClose} data={dialogData} /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              )} 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default HolidaySettings;
  </code></pre>