77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-tabeller';
|
|
import { View, StyleSheet } from 'react-native';
|
|
|
|
export const ExampleThree = () => {
|
|
const tableHead = ['', 'Head1', 'Head2', 'Head3'];
|
|
const tableTitle = ['Title1', 'Title2', 'Title3'];
|
|
const tableData = [
|
|
['a', 'b', 'c'],
|
|
['d', 'e', 'f'],
|
|
['g', 'h', 'i'],
|
|
];
|
|
|
|
const onCellPress = (data: any) => {
|
|
console.log(`Cell pressed: ${data}`);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Table borderStyle={{ borderWidth: 1 }}>
|
|
<Row data={tableHead} style={styles.head} textStyle={styles.headText} />
|
|
<TableWrapper style={styles.wrapper}>
|
|
<Col
|
|
data={tableTitle}
|
|
style={styles.title}
|
|
heightArr={[28, 28, 28]}
|
|
textStyle={styles.titleText}
|
|
/>
|
|
<Rows
|
|
data={tableData}
|
|
flexArr={[1, 1, 1]}
|
|
style={styles.row}
|
|
textStyle={styles.text}
|
|
onPress={onCellPress}
|
|
/>
|
|
</TableWrapper>
|
|
</Table>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
paddingTop: 30,
|
|
backgroundColor: '#fff',
|
|
},
|
|
head: {
|
|
height: 44,
|
|
backgroundColor: '#C6F3E0',
|
|
},
|
|
text: {
|
|
textAlign: 'center',
|
|
padding: 5,
|
|
},
|
|
headText: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
row: {
|
|
height: 40,
|
|
backgroundColor: '#fff',
|
|
},
|
|
wrapper: {
|
|
flexDirection: 'row',
|
|
},
|
|
title: {
|
|
flex: 1,
|
|
backgroundColor: '#C6F3E0',
|
|
},
|
|
titleText: {
|
|
textAlign: 'left',
|
|
marginLeft: 6,
|
|
fontWeight: '600',
|
|
},
|
|
});
|