diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md index d731fa3a9267e3..8a5b4ea151290c 100644 --- a/docs/data/base/components/table-pagination/table-pagination.md +++ b/docs/data/base/components/table-pagination/table-pagination.md @@ -21,33 +21,17 @@ It controls two properties of its parent table: - displayed page index - number of rows per page -Table Pagination renders its internal elements in a `` tag by default so it can be inserted into a table's ``. -You can use the `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table. -See the [Slot props section](#slot-props) for details. - {{"demo": "UnstyledPaginationIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} ## Component -### Usage - -After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements: - ```jsx import { TablePagination } from '@mui/base/TablePagination'; - -export default function MyApp() { - return ( - - - - -
- ); -} ``` -### Basics +Table Pagination renders its internal elements in a `` tag by default so it can be inserted into a table's ``. +You can use the `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table. +See [Custom structure](#custom-structure) for details. The following demo shows an example of customized pagination controls in a table footer that spans the entire row: @@ -123,7 +107,8 @@ The following code snippet applies a CSS class called `my-spacer` to the spacer ### Usage with TypeScript -In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. +This way, you can safely provide the custom root's props directly on the component: ```tsx