CODEWITHSUNDEEP
reactjsreact-native
j.doe
j.doe

Reputation: 4859

Create a table with ListView

I am trying to create a kind of a table with ListView component. I am able to show the data in the listView with this code

constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
     dataSource: ds.cloneWithRows(['row 1', 'row 2']),
      }; 
    }

  render() {
    const appData = this.props.appData;
    return (
      <View>
      <View style={styles.container}>
      <Text style={styles.title}> {I18n.t('appDetail.moreInformations')} </Text>
      </View>
      <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />
      </View>
      )
    }
  }


  const styles = StyleSheet.create({
    container: {
      marginTop: 10,
    },
    title:{
    fontSize: 20,
    fontWeight: 'bold'
    },
    list:{
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent:'space-around',
        paddingTop: 10
    }

  });

However I didn't found a solution to put each item on the left of its cell. And also to set the max items per row to two. My final result should looks like this table(without border obviously)

+------------------------------+-----------------------------+
| item 1.                      | item 2.                     |
+------------------------------+-----------------------------+
| item 3.                      | item 4                      |
+------------------------------+-----------------------------+
| item5                        | item 6                      |
+------------------------------+-----------------------------+

Do you have an idea on how to achieve that?

Upvotes: 0

Views: 362

Answers (1)

Hern&#225;n Albertario
Hern&#225;n Albertario

Reputation: 930

You can use a FlatList and set to it the numColumns={2} prop and style={{ flexDirection: 'column' }}. In my case I'm working with 3 cols: FlatList with numColumns={3}:

 <FlatList
    style={{ flexDirection: 'column' }}             //<-- This Line
    numColumns={3}                                  //<-- And this one
    data={this.props.myList}
    keyExtractor={(item, index) => item.Id}
    renderItem={this.renderItem.bind(this)}
/>

Image: FlatList whit numColumns={3}

Upvotes: 1

Related Questions