[Table] Fix handling of rowsPerPage={-1} (#23299)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs/pages/api-docs/table-pagination.md

@@ -40,7 +40,7 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name required">onPageChange<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
 | <span class="prop-name">onRowsPerPageChange</span> | <span class="prop-type">func</span> |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">page<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The zero-based index of the current page. |
-| <span class="prop-name required">rowsPerPage<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The number of rows per page. |
+| <span class="prop-name required">rowsPerPage<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The number of rows per page.<br>Set -1 to display all the rows. |
 | <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">Array&lt;number<br>&#124;&nbsp;{ label: string, value: number }&gt;</span> | <span class="prop-default">[10, 25, 50, 100]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
 | <span class="prop-name">SelectProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the rows per page [`Select`](/api/select/) element. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |

packages/material-ui/src/TablePagination/TablePagination.d.ts

@@ -109,6 +109,8 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
       page: number;
       /**
        * The number of rows per page.
+       *
+       * Set -1 to display all the rows.
        */
       rowsPerPage: number;
       /**

packages/material-ui/src/TablePagination/TablePagination.js

@@ -111,6 +111,11 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
   const labelId = useId(SelectProps.labelId);
   const MenuItemComponent = SelectProps.native ? 'option' : MenuItem;
 
+  const getLabelDisplayedRowsTo = () => {
+    if (count === -1) return (page + 1) * rowsPerPage;
+    return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
+  };
+
   return (
     <Component className={clsx(classes.root, className)} colSpan={colSpan} ref={ref} {...other}>
       <Toolbar className={classes.toolbar}>
@@ -149,7 +154,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
         <Typography color="inherit" variant="body2" className={classes.caption}>
           {labelDisplayedRows({
             from: count === 0 ? 0 : page * rowsPerPage + 1,
-            to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
+            to: getLabelDisplayedRowsTo(),
             count: count === -1 ? -1 : count,
             page,
           })}
@@ -276,6 +281,8 @@ TablePagination.propTypes = {
   }),
   /**
    * The number of rows per page.
+   *
+   * Set -1 to display all the rows.
    */
   rowsPerPage: PropTypes.number.isRequired,
   /**

packages/material-ui/src/TablePagination/TablePagination.test.js

@@ -402,4 +402,27 @@ describe('<TablePagination />', () => {
       expect(combobox).toHaveAccessibleName('Rows per page: 10');
     });
   });
+
+  describe('prop: rowsPerPage', () => {
+    it('should display max number of rows text when prop is -1', () => {
+      const { container } = render(
+        <table>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                count={25}
+                page={0}
+                rowsPerPage={-1}
+                onPageChange={noop}
+              />
+            </TableRow>
+          </TableFooter>
+        </table>,
+      );
+
+      expect(container).to.include.text('All');
+      expect(container).to.include.text('1-25 of 25');
+    });
+  });
 });