[docs] Create TablePaginationUnstyled docs

docs/data/material/components/tables/TableCustomized.js → docs/data/base/components/table-pagination/TableCustomized.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
+import TablePaginationUnstyled, {
+  tablePaginationUnstyledClasses as classes,
+} from '@mui/base/TablePaginationUnstyled';
 
 function createData(name, calories, fat) {
   return { name, calories, fat };
@@ -64,10 +66,11 @@ const Root = styled('div')(
 
 const CustomTablePagination = styled(TablePaginationUnstyled)(
   ({ theme }) => `
-  & .MuiTablePaginationUnstyled-spacer {
+  & .${classes.spacer} {
     display: none;
   }
-  & .MuiTablePaginationUnstyled-toolbar {
+
+  & .${classes.toolbar}  {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -78,42 +81,51 @@ const CustomTablePagination = styled(TablePaginationUnstyled)(
       align-items: center;
     }
   }
-  & .MuiTablePaginationUnstyled-selectLabel {
+
+  & .${classes.selectLabel} {
     margin: 0;
   }
-  & .MuiTablePaginationUnstyled-select {
+
+  & .${classes.select}{
     padding: 2px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     background-color: transparent;
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     }
+
     &:focus {
       outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
     }
   }
-  & .MuiTablePaginationUnstyled-displayedRows {
+
+  & .${classes.displayedRows} {
     margin: 0;
 
     @media (min-width: 768px) {
       margin-left: auto;
     }
   }
-  & .MuiTablePaginationUnstyled-actions {
+
+  & .${classes.actions} {
     padding: 2px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     text-align: center;
   }
-  & .MuiTablePaginationUnstyled-actions > button {
+
+  & .${classes.actions} > button {
     margin: 0 8px;
     border: transparent;
     border-radius: 2px;
     background-color: transparent;
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     }
+
     &:focus {
       outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
     }
@@ -165,7 +177,7 @@ export default function UnstyledTable() {
           ))}
 
           {emptyRows > 0 && (
-            <tr style={{ height: 41 * emptyRows }}>
+            <tr style={{ height: 34 * emptyRows }}>
               <td colSpan={3} />
             </tr>
           )}

docs/data/material/components/tables/TableCustomized.tsx → docs/data/base/components/table-pagination/TableCustomized.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
+import TablePaginationUnstyled, {
+  tablePaginationUnstyledClasses as classes,
+} from '@mui/base/TablePaginationUnstyled';
 
 function createData(name: string, calories: number, fat: number) {
   return { name, calories, fat };
@@ -64,10 +66,11 @@ const Root = styled('div')(
 
 const CustomTablePagination = styled(TablePaginationUnstyled)(
   ({ theme }) => `
-  & .MuiTablePaginationUnstyled-spacer {
+  & .${classes.spacer} {
     display: none;
   }
-  & .MuiTablePaginationUnstyled-toolbar {
+
+  & .${classes.toolbar}  {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -78,42 +81,51 @@ const CustomTablePagination = styled(TablePaginationUnstyled)(
       align-items: center;
     }
   }
-  & .MuiTablePaginationUnstyled-selectLabel {
+
+  & .${classes.selectLabel} {
     margin: 0;
   }
-  & .MuiTablePaginationUnstyled-select {
+
+  & .${classes.select}{
     padding: 2px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     background-color: transparent;
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     }
+
     &:focus {
       outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
     }
   }
-  & .MuiTablePaginationUnstyled-displayedRows {
+
+  & .${classes.displayedRows} {
     margin: 0;
 
     @media (min-width: 768px) {
       margin-left: auto;
     }
   }
-  & .MuiTablePaginationUnstyled-actions {
+
+  & .${classes.actions} {
     padding: 2px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     text-align: center;
   }
-  & .MuiTablePaginationUnstyled-actions > button {
+
+  & .${classes.actions} > button {
     margin: 0 8px;
     border: transparent;
     border-radius: 2px;
     background-color: transparent;
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     }
+
     &:focus {
       outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
     }
@@ -170,7 +182,7 @@ export default function UnstyledTable() {
           ))}
 
           {emptyRows > 0 && (
-            <tr style={{ height: 41 * emptyRows }}>
+            <tr style={{ height: 34 * emptyRows }}>
               <td colSpan={3} />
             </tr>
           )}

docs/data/material/components/tables/TableUnstyled.js → docs/data/base/components/table-pagination/TableUnstyled.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
+import TablePaginationUnstyled, {
+  tablePaginationUnstyledClasses as classes,
+} from '@mui/base/TablePaginationUnstyled';
 
 function createData(name, calories, fat) {
   return { name, calories, fat };
@@ -42,7 +44,7 @@ const Root = styled('div')`
 `;
 
 const CustomTablePagination = styled(TablePaginationUnstyled)`
-  & .MuiTablePaginationUnstyled-toolbar {
+  & .${classes.toolbar} {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -54,23 +56,23 @@ const CustomTablePagination = styled(TablePaginationUnstyled)`
     }
   }
 
-  & .MuiTablePaginationUnstyled-selectLabel {
+  & .${classes.selectLabel} {
     margin: 0;
   }
 
-  & .MuiTablePaginationUnstyled-displayedRows {
+  & .${classes.displayedRows} {
     margin: 0;
 
     @media (min-width: 768px) {
       margin-left: auto;
     }
   }
 
-  & .MuiTablePaginationUnstyled-spacer {
+  & .${classes.spacer} {
     display: none;
   }
 
-  & .MuiTablePaginationUnstyled-actions {
+  & .${classes.actions} {
     display: flex;
     gap: 0.25rem;
   }

docs/data/material/components/tables/TableUnstyled.tsx → docs/data/base/components/table-pagination/TableUnstyled.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
+import TablePaginationUnstyled, {
+  tablePaginationUnstyledClasses as classes,
+} from '@mui/base/TablePaginationUnstyled';
 
 function createData(name: string, calories: number, fat: number) {
   return { name, calories, fat };
@@ -42,7 +44,7 @@ const Root = styled('div')`
 `;
 
 const CustomTablePagination = styled(TablePaginationUnstyled)`
-  & .MuiTablePaginationUnstyled-toolbar {
+  & .${classes.toolbar} {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -54,23 +56,23 @@ const CustomTablePagination = styled(TablePaginationUnstyled)`
     }
   }
 
-  & .MuiTablePaginationUnstyled-selectLabel {
+  & .${classes.selectLabel} {
     margin: 0;
   }
 
-  & .MuiTablePaginationUnstyled-displayedRows {
+  & .${classes.displayedRows} {
     margin: 0;
 
     @media (min-width: 768px) {
       margin-left: auto;
     }
   }
 
-  & .MuiTablePaginationUnstyled-spacer {
+  & .${classes.spacer} {
     display: none;
   }
 
-  & .MuiTablePaginationUnstyled-actions {
+  & .${classes.actions} {
     display: flex;
     gap: 0.25rem;
   }

docs/data/base/components/table-pagination/table-pagination.md

@@ -0,0 +1,46 @@
+---
+product: base
+title: React Table pagination component
+components: TablePaginationUnstyled
+githubLabel: 'component: TablePagination'
+packageName: '@mui/base'
+---
+
+# Unstyled table pagination
+
+<p class="description">Table pagination lets users navigate through data in tables.</p>
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+The TablePaginationUnstyled component controls two table properties: displayed page index and number of rows per page.
+
+By default it renders its internal components wrapped in a `tr` tag, so it's easy to insert it in a table's `tr`.
+This can be changed, if needed, by supplying the `component` or `components.Root` prop.
+This way you can place the pagination controls outside of the table.
+
+## Basic TablePaginationUnstyled
+
+{{"demo": "TableUnstyled.js"}}
+
+### Custom pagination options
+
+It's possible to customize 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
+  <TablePaginationUnstyled rowsPerPageOptions={[10, 50]} />
+  ```
+
+- **objects**, the `value` and `label` keys will be used respectively for the value and label of the option (useful for words such as "All").
+
+  ```jsx
+  <TablePaginationUnstyled
+    rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]}
+  />
+  ```
+
+## Customized look and feel
+
+{{"demo": "TableCustomized.js"}}

docs/data/base/pages.ts

@@ -25,6 +25,7 @@ const pages = [
         subheader: 'navigation',
         children: [
           { pathname: '/base/react-menu', title: 'Menu' },
+          { pathname: '/base/react-table-pagination', title: 'Table pagination' },
           { pathname: '/base/react-tabs', title: 'Tabs' },
         ],
       },

docs/data/material/components/tables/tables.md

@@ -1,7 +1,7 @@
 ---
 product: material-ui
 title: React Table component
-components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TablePaginationUnstyled
+components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel
 githubLabel: 'component: table'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#table
 materialDesign: https://material.io/components/data-tables
@@ -121,16 +121,6 @@ Virtualization helps with performance issues.
 
 {{"demo": "ReactVirtualizedTable.js", "bg": true}}
 
-## Unstyled
-
-If you would like to use an unstyled Table, you can use the primitive elements and enhance the table with the unstyled pagination as shown in the demo below.
-
-{{"demo": "TableUnstyled.js"}}
-
-### Customized look and feel
-
-{{"demo": "TableCustomized.js"}}
-
 ## Accessibility
 
 (WAI tutorial: <https://www.w3.org/WAI/tutorials/tables/>)
@@ -140,3 +130,8 @@ If you would like to use an unstyled Table, you can use the primitive elements a
 A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it's about and decide if they want to read it.
 
 {{"demo": "AcccessibleTable.js", "bg": true}}
+
+## Unstyled
+
+If you would like to use an unstyled Table, you can use the primitive HTML elements and enhance the table with the TablePaginationUnstyled component.
+See the demos in the [unstyled table pagination docs](/base/react-table-pagination)