Skip to content

Commit

Permalink
table pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
samuelsycamore committed Sep 6, 2023
1 parent ce60c09 commit 5f74432
Showing 1 changed file with 5 additions and 20 deletions.
25 changes: 5 additions & 20 deletions docs/data/base/components/table-pagination/table-pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<td>` tag by default so it can be inserted into a table's `<tr>`.
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 (
<table>
<tr>
<TablePagination />
</tr>
</table>
);
}
```

### Basics
Table Pagination renders its internal elements in a `<td>` tag by default so it can be inserted into a table's `<tr>`.
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:

Expand Down Expand Up @@ -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
<TablePagination<typeof CustomComponent>
Expand Down

0 comments on commit 5f74432

Please sign in to comment.