handle TypeScript side

mui · Oct 18, 2019 · 9630eea · 9630eea
1 parent b002e82
commit 9630eea
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;