gbclient/src/tasks/components/DataTablePagination.tsx

58 lines
1.4 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
interface DataTablePaginationProps {
page: number;
setPage: (page: number) => void;
rowsPerPage: number;
setRowsPerPage: (rowsPerPage: number) => void;
totalItems: number;
}
export const DataTablePagination: React.FC<DataTablePaginationProps> = ({
page,
setPage,
rowsPerPage,
setRowsPerPage,
totalItems,
}) => {
const totalPages = Math.ceil(totalItems / rowsPerPage);
return (
<View style={styles.container}>
<Text>{}</Text>
<View style={styles.navigation}>
<TouchableOpacity onPress={() => setPage(0)} disabled={page === 0}>
</TouchableOpacity>
<TouchableOpacity onPress={() => setPage(page - 1)} disabled={page === 0}>
</TouchableOpacity>
<Text>{}</Text>
<TouchableOpacity onPress={() => setPage(page + 1)} disabled={page === totalPages - 1}>
</TouchableOpacity>
<TouchableOpacity onPress={() => setPage(totalPages - 1)} disabled={page === totalPages - 1}>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
borderTopWidth: 1,
borderTopColor: '#ccc',
},
navigation: {
flexDirection: 'row',
alignItems: 'center',
},
});