105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
|
|
|
|
import { Task } from '../data/schema';
|
|
import { labels, priorities, statuses } from '../data/data';
|
|
import { DataTableToolbar } from './DataTableToolbar';
|
|
import { DataTablePagination } from './DataTablePagination';
|
|
|
|
interface DataTableProps {
|
|
data: Task[];
|
|
}
|
|
|
|
export const DataTable: React.FC<DataTableProps> = ({ data }) => {
|
|
const [filteredData, setFilteredData] = useState(data);
|
|
const [page, setPage] = useState(0);
|
|
const [rowsPerPage, setRowsPerPage] = useState(10);
|
|
|
|
const renderItem = ({ item }: { item: Task }) => {
|
|
const label = labels.find(l => l.value === item.label);
|
|
const status = statuses.find(s => s.value === item.status);
|
|
const priority = priorities.find(p => p.value === item.priority);
|
|
|
|
return (
|
|
<View style={styles.row}>
|
|
<Text style={styles.cell}>{item.id}</Text>
|
|
<View style={styles.cell}>
|
|
<Text style={styles.badge}>{label?.label}</Text>
|
|
<Text>{item.title}</Text>
|
|
</View>
|
|
<View style={styles.cell}>
|
|
|
|
<Text>{status?.label}</Text>
|
|
</View>
|
|
<View style={styles.cell}>
|
|
|
|
<Text>{priority?.label}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.cell}>
|
|
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<DataTableToolbar onFilter={setFilteredData} data={data} />
|
|
<FlatList
|
|
data={filteredData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
|
|
renderItem={renderItem}
|
|
keyExtractor={(item) => item.id}
|
|
ListHeaderComponent={() => (
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerCell}>ID</Text>
|
|
<Text style={styles.headerCell}>Title</Text>
|
|
<Text style={styles.headerCell}>Status</Text>
|
|
<Text style={styles.headerCell}>Priority</Text>
|
|
<Text style={styles.headerCell}>Actions</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
<DataTablePagination
|
|
page={page}
|
|
setPage={setPage}
|
|
rowsPerPage={rowsPerPage}
|
|
setRowsPerPage={setRowsPerPage}
|
|
totalItems={filteredData.length}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#ccc',
|
|
paddingVertical: 10,
|
|
},
|
|
headerCell: {
|
|
flex: 1,
|
|
fontWeight: 'bold',
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#eee',
|
|
paddingVertical: 10,
|
|
},
|
|
cell: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
badge: {
|
|
backgroundColor: '#eee',
|
|
paddingHorizontal: 5,
|
|
paddingVertical: 2,
|
|
borderRadius: 10,
|
|
marginRight: 5,
|
|
},
|
|
});
|