# جدول البيانات: الترقيم

> Split the slotsmith data table into pages, control the page and page size, change the page-size options, or hide the controls.

The data table paginates by default: it shows ten rows a page, with previous and next buttons, a page counter and a page-size control under the table. Pass `pagination` with `onPaginationChange` to control the page, and `pageSizeOptions` to change the sizes offered.

```tsx
import { useState } from "react";
import { DataTable, type DataTablePaginationState } from "slotsmith/data-table";
import { columns, people } from "../shared/people";

export default function Pagination() {
  const [pagination, setPagination] = useState<DataTablePaginationState>({ pageIndex: 0, pageSize: 5 });
  const first = pagination.pageIndex * pagination.pageSize + 1;
  const last = Math.min(first + pagination.pageSize - 1, people.length);
  return (
    <>
      <DataTable
        data={people}
        columns={columns}
        getRowId={(person) => person.id}
        pagination={pagination}
        onPaginationChange={setPagination}
        // The sizes the page-size control offers.
        pageSizeOptions={[5, 10, 20]}
      />
      <p>{`Rows ${first}–${last} of ${people.length}`}</p>
    </>
  );
}
```

Use the buttons to move between pages, or pick another page size. The text under the table follows the controlled state.

## Page state

The state is `{ pageIndex, pageSize }`, with `pageIndex` counting from 0.

- [`pagination`](https://slotsmith.dev/ar/components/data-table/api/#props) and [`onPaginationChange`](https://slotsmith.dev/ar/components/data-table/api/#props) control it, as the demo does. Leave them out and use [`defaultPagination`](https://slotsmith.dev/ar/components/data-table/api/#props) for a starting page the table keeps itself; the default is the first page of ten rows.
- [`pageSizeOptions`](https://slotsmith.dev/ar/components/data-table/api/#props) lists the sizes the page-size control offers.
- [`resetSelectionOnPageChange`](https://slotsmith.dev/ar/components/data-table/api/#props) clears the [selection](https://slotsmith.dev/ar/components/data-table/guides/sorting-and-selection/) when the page or the page size changes.

## Turning it off

- [`enablePagination`](https://slotsmith.dev/ar/components/data-table/api/#props) set to `false` renders every row and no controls.
- [`hidePagination`](https://slotsmith.dev/ar/components/data-table/api/#props) hides the controls but keeps paging: the table shows only the current page, so drive `pagination` from controls of your own.

For data that is paged on a server, set [`manualPagination`](https://slotsmith.dev/ar/components/data-table/api/#props), pass the current page as `data` and the total as [`rowCount`](https://slotsmith.dev/ar/components/data-table/api/#props). The [server data](https://slotsmith.dev/ar/components/data-table/guides/server-data/) guide covers it.

## The controls

The controls are the [`Pagination`](https://slotsmith.dev/ar/components/data-table/api/#slot-Pagination) slot: a `<nav>` named by the [`pagination`](https://slotsmith.dev/ar/components/data-table/api/#label-pagination) label, holding two [`PaginationButton`](https://slotsmith.dev/ar/components/data-table/api/#slot-PaginationButton) slots, the page counter and the [`PageSizeSelect`](https://slotsmith.dev/ar/components/data-table/api/#slot-PageSizeSelect) slot. The counter reads the [`pageInfo`](https://slotsmith.dev/ar/components/data-table/api/#label-pageInfo) label, "Page 1 of 3", in an `aria-live` region, so a page change is read out. The page-size control is the slotsmith Autocomplete, named by the visible [`rowsPerPage`](https://slotsmith.dev/ar/components/data-table/api/#label-rowsPerPage) text. Replace any of these slots with your design system's own.