How do I paginate in React Native Paper DataTable?

Question

I'm having trouble finding enough information to use React Native Paper DataTable Pagination. The documents are pretty slim and there are only a few videos on the topic that haven't given me the information I need.

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'
import { DataTable, page, setPage, setItemsPerPage, optionsPerPage, itemsPerPage } from 'react-native-paper';

const Drawer = createDrawerNavigator();

function SearchComponent() {
  return (
    <View style={{ flex: 1 }}>Search Bar</View>
  );
}

function TableComponent({ headers, values }) {
  if (!headers || !values) return null;
  const optionsPerPage = [0];
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(optionsPerPage[10]);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <DataTable.Row style={{ width: 1000 }}>
        <DataTable.Cell text>First Name</DataTable.Cell>
        <DataTable.Cell text>Last Name</DataTable.Cell>
        <DataTable.Cell text>Provider Email</DataTable.Cell>
        <DataTable.Cell text>Review</DataTable.Cell>
        <DataTable.Cell text>Rating</DataTable.Cell>
        <DataTable.Cell text>Review Completed</DataTable.Cell>
      </DataTable.Row>
      <DataTable style={{ width: 1000 }}>
        {/* {headers?.map(({ title, numeric }) => <DataTable.Title key={title} numeric={numeric}>{title}</DataTable.Title>)} */}
        {values?.map((value, index) => <DataTable.Row key={index}>
          {headers?.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)}
        </DataTable.Row>)}
        <DataTable.Pagination
          page={page}
          numberOfPages={1000}
          onPageChange={(page) => setPage(page)}
          label="1-2 of 1000"
          optionsPerPage={optionsPerPage}
          itemsPerPage={itemsPerPage}
          setItemsPerPage={setItemsPerPage}
          optionsLabel={'Rows per page'}
        />
      </DataTable>
    </View>
  );
}

I've been messing with numbers in the DataTable.Pagination component, but nothing I change has any visual effect. I could really use someone experienced with React Native Paper to explain it to me, please.

score 5 · Accepted Answer · answered Mar 09 '22 at 07:24

This is because there is no prop under DataTable.Pagination that deals with the rows. DataTable.Pagination handles the data for pagination only, nothing to do with the rows. Displaying the rows is handled by DataTable.Rows. This is were you need to filter the data before mapping it out for display.

I'm guessing this one handles displaying the rows in your code.

{values?.map((value, index) => <DataTable.Row key={index}> {headers?.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)} </DataTable.Row>)}

Filter/segregate the values first using slice before mapping it out for display. You may use code like this.

values.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage).map((value) => <DataTable.Row key={index}>{headers?.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)}</DataTable.Row>)})

I cant test this works on your code since you did not provide a sandbox but I made a sample using the data provided in react native paper. See working example here : Data pagination sample

How do I paginate in React Native Paper DataTable?

1 Answers1