CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
IncognitoUser
IncognitoUser

Reputation: 436

Material-UI Table select all per page pagination

Is it possible to select items only on the current page / per page in the Table?

https://codesandbox.io/s/ebnf3?file=/demo.js

Upvotes: 1

Views: 2459

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81310

You can look at how the rows get sorted and filtered inside the TableBody below, just take the part where it filter to the handleSelectAllClick function:

<TableBody>
  {/* if you don't need to support IE11, you can replace the `stableSort` call with:
      rows.slice().sort(getComparator(order, orderBy)) */}
  {stableSort(rows, getComparator(order, orderBy))
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .map((row, index) => {
      return (...);
    }

const handleSelectAllClick = (event) => {
  if (event.target.checked) {
    const newSelecteds = stableSort(rows, getComparator(order, orderBy))
      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      .map((n) => n.name);

    setSelected(newSelecteds);
    return;
  }
  setSelected([]);
};

At this point, it's almost working except that you can't clear all the selection because the Checkbox's state inside the table header depends on the number of rows selected, it can't be unselected because you only select the rows in 1 page, not all rows. You can fix it by taking control of the Checkbox and make it always change state between the 2 options (select/unselect):

const [value, setValue] = React.useState(false);

<Checkbox
  color="primary"
  // indeterminate={numSelected > 0 && numSelected < rowCount}
  checked={value}
  onChange={(_, value) => {
    setValue(value);
    onSelectAllClick(_, value);
  }}
  inputProps={{
    "aria-label": "select all desserts"
  }}
/>

Codesandbox Demo

Upvotes: 2

Tyler
Tyler

Reputation: 1283

Editing the handleSelectAllClick to the following should work:

 const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelecteds = stableSort(rows, getComparator(order, orderBy))
      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      .map((n)=>n.name) 

      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
  };

Upvotes: 0

Related Questions