Gil2015
commented
6 years ago You can refer to example 5.
Closed Hannibal2 closed 5 years ago
Gil2015
commented
6 years ago You can refer to example 5.
Hannibal2
commented
6 years ago You can refer to example 5.
But in that example first row cells are button, but I need to make buttons every cell in table besides first row and first column
Hannibal2
commented
6 years ago You can refer to example 5. solved this way, but now my table is reversed - it has 7 rows instead of 7 colums
export default class ExampleTwo extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
tableTitle: [],
tableData: [
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
['1', '2', '3', '1', '2', '3', '2'],
]
}
}
_alertIndex(index) {
Alert.alert(`This is row ${index + 1}`);
}
render() {
const state = this.state;
for (let i = 0; i < 24; i++) {
state.tableTitle.push( i + ':' + '00'
)}
const element = (data, index) => (
<TouchableOpacity onPress={() => this._alertIndex(index)}>
<View style={styles.btn}>
<Text style={styles.btnText}>button</Text>
</View>
</TouchableOpacity>
);
return (
<ScrollView style={styles.container}>
<Table>
<Row data={state.tableHead} flexArr={[1, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
<TableWrapper style={styles.wrapper}>
<Col data={state.tableTitle} style={styles.title} flexArr={[1, 1, 1, 1, 1, 1, 1]} heightArr={[28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28]} textStyle={styles.text}/>
{/* <Rows data={state.tableData} flexArr={[1, 1, 1, 1, 1, 1, 1]} style={styles.row} textStyle={styles.text}/> */}
{
state.tableData.map((rowData, index) => (
<TableWrapper key={index} >
{
rowData.map((cellData, cellIndex) => (
<Cell key={cellIndex} data={element(cellData, index)} style={styles.row} textStyle={styles.text}/>
))
}
</TableWrapper>
))
}
</TableWrapper>
</Table>
</ScrollView>
) }}
const styles = {
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
wrapper: { flexDirection: 'row' },
title: { backgroundColor: '#f6f8fa' },
row: { height: 28 },
text: { textAlign: 'center' },
btn: { backgroundColor: '#78B7BB' },
btnText: { textAlign: 'center', color: '#fff' }
};
It's actually not an issue, but really need your help! How to make each cell besides first row and column a button? I need to make table, and each cell besides first row and column needs to have onPress method that is to be button. I don't understand how to do this mapping. I really need your help.