58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
|
|
import { Table, TableWrapper, Row, Cell } from 'react-native-tabeller';
|
|
|
|
type TableDataType = string[][];
|
|
|
|
export const ExampleFour: React.FC = () => {
|
|
const [tableHead] = useState<string[]>(['Head', 'Head2', 'Head3', 'Head4']);
|
|
const [tableData] = useState<TableDataType>([
|
|
['1', '2', '3', '4'],
|
|
['a', 'b', 'c', 'd'],
|
|
['1', '2', '3', '4'],
|
|
['a', 'b', 'c', 'd'],
|
|
]);
|
|
|
|
const alertIndex = (index: number): void => {
|
|
Alert.alert(`This is row ${index + 1}`);
|
|
};
|
|
|
|
const element = (data: any, index: number): React.ReactElement => (
|
|
<TouchableOpacity onPress={() => alertIndex(index)}>
|
|
<View style={styles.btn}>
|
|
<Text style={styles.btnText}>button</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Table borderStyle={{ borderColor: 'transparent' }}>
|
|
<Row data={tableHead} style={styles.head} textStyle={styles.text} />
|
|
{tableData.map((rowData, index) => (
|
|
<TableWrapper key={index} style={styles.row}>
|
|
{rowData.map((cellData, cellIndex) => (
|
|
<Cell
|
|
key={cellIndex}
|
|
data={cellIndex === 3 ? element(cellData, index) : cellData}
|
|
textStyle={styles.text}
|
|
/>
|
|
))}
|
|
</TableWrapper>
|
|
))}
|
|
</Table>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
|
|
head: { height: 40, backgroundColor: '#C6F3E0' },
|
|
text: { margin: 8 },
|
|
row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
|
|
btn: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 },
|
|
btnText: { textAlign: 'center', color: '#fff' },
|
|
});
|
|
|
|
export default ExampleFour;
|