From 9630eea750d968a4c4c81d6bfba62b256a412a29 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 18 Oct 2019 17:53:28 +0200
Subject: [PATCH] handle TypeScript side

---
 .../tables/CustomPaginationActionsTable.tsx   |  2 +-
 docs/src/pages/components/tables/tables.md    | 21 +++++++++++++++----
 .../src/TablePagination/TablePagination.d.ts  |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
index 78a4cd0d011a22..4f7fd311f73735 100644
--- a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
+++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -159,7 +159,7 @@ export default function CustomPaginationActionsTable() {
           <TableFooter>
             <TableRow>
               <TablePagination
-                rowsPerPageOptions={[5, 10, 25]}
+                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                 colSpan={3}
                 count={rows.length}
                 rowsPerPage={rowsPerPage}
diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md
index e36bc34e55e88a..04fa089f091b09 100644
--- a/docs/src/pages/components/tables/tables.md
+++ b/docs/src/pages/components/tables/tables.md
@@ -52,13 +52,26 @@ Here is an example of customizing the component. You can learn more about this i
 
 {{"demo": "pages/components/tables/CustomizedTables.js"}}
 
-## Custom Table Pagination Action
+### Custom pagination options
 
-The `Action` property of the `TablePagination` component allows the implementation of
-custom actions.
+It's possible to customise the options shown in the "Rows per page" select using the `rowsPerPageOptions` prop.
+You should either provide an array of:
+
+- **numbers**, each number will be used for the option's label and value.
+
+  ```jsx
+  <TablePagination rowsPerPageOptions={[10, 50]} />
+  ```
+- **objects**, the `value` and `label` keys will be used respectively for the value and label of the option (useful for language strings such as 'All').
 
-Custom options in the `Rows per page:` menu can be shown by using a JS object with the `label` key denoting the display string, such as `"All"`, and the `value` key defining the number of rows to be shown. The following example demonstrates the same.
+  ```jsx
+  <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
+  ```
 
+### Custom pagination actions
+
+The `Action` property of the `TablePagination` component allows the implementation of
+custom actions.
 
 {{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
 
diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts
index 05f2f460539921..44418d1a5b5760 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.d.ts
+++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts
@@ -26,7 +26,7 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
       onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
       page: number;
       rowsPerPage: number;
-      rowsPerPageOptions?: number[];
+      rowsPerPageOptions?: (number | { value: number; label: string })[];
       SelectProps?: Partial<SelectProps>;
     };
   defaultComponent: D;