# React Components/Pagination

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `defaultPage` | `` | No |  | The initial active page. Use when you don't need to control the active page of the pagination. |
| `disabled` | `` | No |  | Whether the component is disabled. |
| `labelTooltipNext` | `` | No |  | The tooltip label on the "next page" button. |
| `labelTooltipPrev` | `` | No |  | The tooltip label on the "previous page" button. |
| `onPageChange` | `` | No |  | Callback fired when the active page changes. |
| `onPageSizeChange` | `` | No |  | Callback fired when the page size changes. |
| `page` | `` | No |  | The controlled active page |
| `pageSize` | `` | No |  | The number of items per page. |
| `renderTotalItemsLabel` | `` | No |  | @deprecated @default-value='of ${totalItems} results' Format the label displayed near the per-page selector. DEPRECATED: prefer the use of the sub component PaginationPageSizeSelector |
| `siblingCount` | `` | No |  | The number of pages to show beside active page. |
| `totalItems` | `` | Yes |  | The total number of items. |
| `withPageSizeSelector` | `` | No |  | @deprecated Whether the per-page selector is displayed. DEPRECATED: prefer the use of the sub component PaginationPageSizeSelector |


## Subcomponents


### PaginationPageSelector



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `` | No | 'Go to page' | The label displayed near the go-to-page input. |
| `submitLabel` | `` | No | 'Go' | The label displayed in the go-to-page submit button. |



### PaginationPageSizeSelector



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `` | No |  | @default-value='of ${totalItems} results' The label displayed near the per-page selector. |



### PaginationPages



## Examples


### Accessibility Label

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination aria-label="Pagination" totalItems={5000}>
      <PaginationPages />
    </Pagination>
}
```

### Anatomy Tech

```tsx
{
  tags: ['!dev'],
  render: ({}) => <Pagination totalItems={100}>
      <PaginationPageSizeSelector />
      <PaginationPages />
      <PaginationPageSelector />
    </Pagination>
}
```

### Controlled

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';
import { useState } from 'react';`
  },
  tags: ['!dev'],
  parameters: {
    docs: {
      source: {
        ...staticSourceRenderConfig()
      }
    }
  },
  render: ({}) => {
    const [page, setPage] = useState(1);
    function handlePageChange({
      page
    }: PaginationPageChangeDetail) {
      setPage(page);
    }
    return <Pagination onPageChange={handlePageChange} page={page} totalItems={500}>
        <PaginationPages />
      </Pagination>;
  }
}
```

### Default

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination totalItems={5000}>
      <PaginationPages />
    </Pagination>
}
```

### Demo

```tsx
{
  render: ({
    totalItems,
    withPageSelector,
    withPageSizeSelector,
    ...arg
  }: DemoArg) => <Pagination totalItems={totalItems ?? 5000} {...arg}>
      {withPageSizeSelector && <PaginationPageSizeSelector />}

      <PaginationPages />

      {withPageSelector && <PaginationPageSelector />}
    </Pagination>,
  argTypes: orderControls({
    disabled: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    labelTooltipNext: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    labelTooltipPrev: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    pageSize: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    page: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    siblingCount: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    totalItems: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    withPageSelector: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    },
    withPageSizeSelector: {
      table: {
        category: CONTROL_CATEGORY.general
      }
    }
  }),
  args: {
    totalItems: 5000
  }
}
```

### Disabled

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination disabled totalItems={500}>
      <PaginationPages />
    </Pagination>
}
```

### Items Per Page

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination pageSize={25} totalItems={500}>
      <PaginationPages />
    </Pagination>
}
```

### Overview

```tsx
{
  tags: ['!dev'],
  parameters: {
    layout: 'centered'
  },
  render: ({}) => <Pagination totalItems={100}>
      <PaginationPageSizeSelector />
      <PaginationPages />
      <PaginationPageSelector />
    </Pagination>
}
```

### Page Size Selection

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPageSizeSelector, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination totalItems={500}>
      <PaginationPageSizeSelector />

      <PaginationPages />
    </Pagination>
}
```

### Sibling Count

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination defaultPage={5} siblingCount={2} totalItems={500}>
      <PaginationPages />
    </Pagination>
}
```

### Theme Generator

```tsx
{
  parameters: {
    layout: 'fullscreen'
  },
  tags: ['!dev'],
  render: ({}) => <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
    alignItems: 'flex-start'
  }}>
      <Pagination totalItems={100}>
        <PaginationPages />
      </Pagination>
      <Pagination totalItems={500} pageSize={25}>
        <PaginationPages />
      </Pagination>
      <Pagination totalItems={500} disabled>
        <PaginationPages />
      </Pagination>
      <Pagination totalItems={100}>
        <PaginationPageSizeSelector />
        <PaginationPages />
        <PaginationPageSelector />
      </Pagination>
    </div>
}
```

### With Tooltip Labels

```tsx
{
  globals: {
    imports: `import { Pagination, PaginationPages } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Pagination labelTooltipPrev="Go to previous page" labelTooltipNext="Go to next page" totalItems={500}>
      <PaginationPages />
    </Pagination>
}
```