docs/public/3.0/data-table-pagination.html
A component to show pagination for data table.
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;
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