react-native-tabeller/example/src/ExampleFour.tsx
Asad f5e7150667
Some checks are pending
CI / lint (push) Waiting to run
CI / test (push) Waiting to run
CI / build-library (push) Waiting to run
CI / build-web (push) Waiting to run
first build
2025-03-08 20:47:44 -05:00

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;