120 lines
2.5 KiB
TypeScript
120 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { StyleSheet, View } from 'react-native';
|
|
import { Table, TableWrapper, Col, Rows } from 'react-native-tabeller';
|
|
|
|
export const ExampleFive: React.FC = () => {
|
|
const [sideHead] = useState<string[]>(['H1', 'H2']);
|
|
const [rowTitles] = useState<string[]>([
|
|
'Title',
|
|
'Title2',
|
|
'Title3',
|
|
'Title4',
|
|
]);
|
|
|
|
// Table data - matching the structure in the screenshot
|
|
const [tableData] = useState<string[][]>([
|
|
['a', '1', 'a'],
|
|
['b', '2', 'b'],
|
|
['c', '3', 'c'],
|
|
['d', '4', 'd'],
|
|
]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}>
|
|
<TableWrapper style={styles.wrapper}>
|
|
{/* left column with H1, H2 */}
|
|
<Col
|
|
data={sideHead}
|
|
style={styles.sideHeader}
|
|
heightArr={[60, 60]}
|
|
textStyle={styles.sideHeaderText}
|
|
/>
|
|
<TableWrapper style={styles.tableContentWrapper}>
|
|
{/* row titles column */}
|
|
<Col
|
|
data={rowTitles}
|
|
style={styles.title}
|
|
heightArr={[30, 30, 30, 30]}
|
|
textStyle={styles.titleText}
|
|
/>
|
|
{/* content cells */}
|
|
<Rows
|
|
data={tableData}
|
|
style={styles.row}
|
|
flexArr={[1, 1, 1]}
|
|
textStyle={styles.text}
|
|
/>
|
|
</TableWrapper>
|
|
</TableWrapper>
|
|
</Table>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
paddingTop: 30,
|
|
backgroundColor: '#fff',
|
|
},
|
|
header: {
|
|
height: 50,
|
|
backgroundColor: '#fff',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerText: {
|
|
textAlign: 'center',
|
|
fontWeight: '500',
|
|
},
|
|
wrapper: {
|
|
flexDirection: 'row',
|
|
},
|
|
sideHeader: {
|
|
width: 60,
|
|
backgroundColor: '#C6F3E0',
|
|
},
|
|
sideHeaderText: {
|
|
textAlign: 'center',
|
|
fontWeight: '500',
|
|
},
|
|
tableContentWrapper: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
},
|
|
title: {
|
|
width: 80,
|
|
backgroundColor: '#f6f8fa',
|
|
},
|
|
titleText: {
|
|
textAlign: 'left',
|
|
paddingLeft: 5,
|
|
},
|
|
row: {
|
|
height: 30,
|
|
},
|
|
text: {
|
|
textAlign: 'center',
|
|
},
|
|
btn: {
|
|
width: 58,
|
|
height: 30,
|
|
backgroundColor: '#c8e1ff',
|
|
borderRadius: 2,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
btnText: {
|
|
textAlign: 'center',
|
|
fontSize: 12,
|
|
},
|
|
centered: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
});
|
|
|
|
export default ExampleFive;
|