Logo

DataTable.Pagination

A component to show pagination for data table.

Usage

import * as React from 'react';
import { DataTable } from 'react-native-paper';

const itemsPerPage = 2;

const items = [
  {
    key: 1,
    name: 'Page 1',
  },
  {
    key: 2,
    name: 'Page 2',
  },
  {
    key: 3,
    name: 'Page 3',
  },
];

const MyComponent = () => {
  const [page, setPage] = React.useState(0);
  const from = page * itemsPerPage;
  const to = (page + 1) * itemsPerPage;

  return (
    <DataTable>
      <DataTable.Pagination
        page={page}
        numberOfPages={Math.floor(items.length / itemsPerPage)}
        onPageChange={page => setPage(page)}
        label={`${from + 1}-${to} of ${items.length}`}
      />
    </DataTable>
  );
};

export default MyComponent;

Props

page (required)
Type: number

The currently visible page (starting with 0).

numberOfPages (required)
Type: number

The total number of pages.

label
Type: React.ReactNode

Label text to display

onPageChange (required)
Type: (page: number) => void

Function to execute on page change.

style
Type: StyleProp<ViewStyle>
theme
Type: Theme
Edit this page