CODEWITHSUNDEEP
react-nativereact-native-flatlist
Fahad
Fahad

Reputation: 185

How to show grid lines in flatList in react native

I have list of employee details. I need the grid lines between them (to view as a table). How it is possible with flatList in react native?

    <View >
                  <View style={Styles.empTab}>
                    <ScrollView horizontal={true} >
                      <View style={Styles.empTable}>
                        <Text>SL#</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View style={Styles.empitem}>
                              <Text>{item["emp_id"]}</Text>
                            </View>
                          )}
                        />
                      </View>

                      <View style={Styles.empTable}>
                        <Text>Name</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View  style={Styles.empitem}>
                              <Text>{item["name"]}</Text>
                            </View>
                          )}
                        />
                      </View>
                    </ScrollView>
                  </View>

The result is like as

SL#  Name 
1    ab     
2     gh

I need to view it as a table (ie with row-column border)

Upvotes: 2

Views: 5728

Answers (4)

Shahzad
Shahzad

Reputation: 508

I solved this problem by using below renderRow code. I have 2 columns in grid view. Please change column length by replacing X in index % X === 0 and index <= Y where Y is columns-1

renderRow({ item, index }) {
    return (
      <View style={[styles.GridViewContainer, 
                    index % 2 === 0 ? {
                      borderLeftWidth: 1, borderLeftColor: 'black',
                      borderRightWidth: 1, borderRightColor: 'black',} 
                      : 
                      {borderRightWidth: 1, borderRightColor: 'black'}

                      ,{borderBottomWidth: 1, borderBottomColor: 'black'}
                      ,index <= 1 && {borderTopWidth: 1, borderBottomColor: 'black'}
                    ]}
      >

      ... render item code ...
        </View>
    )
  }

Upvotes: 1

akhil choudhary
akhil choudhary

Reputation: 953

Here ItemSeparatorComponent will render horizontal border and render item will give it vertical border. Below example will work for two columns you can change the index%2 to whatever you numColumns is. Like if numColumns is 3 then it will be index%3

<FlatList
      numColumns={2}
      ItemSeparatorComponent={this.renderSeparator}
    </FlatList>

renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'black',
        height: 1
      }}
    />
  );

renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 2 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'black'}]}>{item}</Text>
    )}

Upvotes: 0

kivul
kivul

Reputation: 1158

Found an easy way to create your table, I'm using react-native-table-component to achieve this.

import React, { Component } from "react";
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows } from 'react-native-table-component';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      tableHead: ['SL#', 'Name'],
      tableData: [
        ['1', 'ab'],
        ['2', 'gh'],
        ['3', 'asdf'],
      ]
    }
  }
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table>
          <Row data={state.tableHead} flexArr={[1, 1]} style={styles.head} textStyle={styles.text} />
          <TableWrapper style={styles.wrapper}>
            <Rows data={state.tableData} flexArr={[1, 1]} style={styles.row} textStyle={styles.text} />
          </TableWrapper>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff'
  },
  head: {
    height: 40,
    backgroundColor: '#f1f8ff'
  },
  wrapper: {
    flexDirection: 'row'
  },
  title: {
    flex: 1, backgroundColor: '#f6f8fa'
  },
  row: {
    height: 28
  },
  text: {
    textAlign: 'center'
  }
});

You can read more here: https://www.npmjs.com/package/react-native-table-component

Upvotes: 0

Bhagwat K
Bhagwat K

Reputation: 3142

You can use ItemSeparatorComponent property of FlstList

So create one function that will return a separtor view:

renderSeparatorView = () => {
    return (
      <View style={{
          height: 1, 
          width: "100%",
          backgroundColor: "#CEDCCE",
        }}
      />
    );
  };

Now use this method in FlatList 

  <FlatList
        ...
        ItemSeparatorComponent={this.renderSeparatorView}
      />

This will create a horizontal separator view.

For vertical separator view change style like:

     style={{
          height: 100%, 
          width: "1",
          backgroundColor: "#CEDCCE",
        }}

Upvotes: 3

Related Questions