Display values of array of objects in Table format in ReactNative

Question

I am new to React Native. My objective is to display this below array of objects in table format in React Native. I am using DataTable of React-Native-Paper.

var accounts=[
        {
            "accNumber": "56456454",
            "accType": "D",
            "productCode": "1454541",
            "availBalance": "987436.46",
          },
        {
            "accNumber": "12424345645",
            "accType": "D",
            "productCode": "154545641",
            "availBalance": "500397.64",
          },
        {
            "accNumber": "4554545664",
            "accType": "D",
            "productCode": "44545",
            "availBalance": "2467.02",
          }
    ]

I have tried this but still it is showing an error:

 <DataTable>
   <DataTable.Header>
      <DataTable.Title >
          <Text style={styles.text}>Account</Text>
      </DataTable.Title>
      <DataTable.Title >
          <Text style={styles.text}>Code</Text>
      </DataTable.Title>
      <DataTable.Title >
           <Text style={styles.text}>Available Balance</Text> 
      </DataTable.Title>
   </DataTable.Header>
  {
   accounts.map(account=>{
     return(
        <DataTable.Row>
           <DataTable.Cell>{account.accNumber}</DataTable.Cell>
           <DataTable.Cell>{account.productCode}</DataTable.Cell>
           <DataTable.Cell>{account.availBalance}</DataTable.Cell>
        </DataTable.Row>
      )
   })}
 </DataTable>

Kindly suggest the way to display accounts data in tabular format supported by React Native. Is there any other way to map the data in table format apart from DataTable?

Expected Result:

Account                Code         Available Balance
56456454               1454541      987436.46
12424345645            154545641    500397.64
4554545664             44545        2467.02

score 2 · Answer 1 · answered Aug 06 '19 at 02:24

It is difficult to know exactly is wrong without seeing the error message, but I was able to adapt your code to get the react-native-paper DataTable to work.

Below is a working example. You can also run it yourself in this snack.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { DataTable } from 'react-native-paper';

export default App = () => {
  var accounts = [
    {
      accNumber: '56456454',
      accType: 'D',
      productCode: '1454541',
      availBalance: '987436.46',
    },
    {
      accNumber: '12424345645',
      accType: 'D',
      productCode: '154545641',
      availBalance: '500397.64',
    },
    {
      accNumber: '4554545664',
      accType: 'D',
      productCode: '44545',
      availBalance: '2467.02',
    },
  ];

  return (
    <View style={styles.container}>
      <DataTable>
        <DataTable.Header>
          <DataTable.Title>Account</DataTable.Title>
          <DataTable.Title>Code</DataTable.Title>
          <DataTable.Title>
            Balance Available
          </DataTable.Title>
        </DataTable.Header>
        {
          accounts.map(account => {
          return (
            <DataTable.Row
              key={account.accNumber} // you need a unique key per item
              onPress={() => {
                // added to illustrate how you can make the row take the onPress event and do something
                console.log(`selected account ${account.accNumber}`)
              }}
            >
              <DataTable.Cell>
                {account.accNumber}
              </DataTable.Cell>
              <DataTable.Cell style={styles.messageColumn}>
                {account.productCode}
              </DataTable.Cell>
              <DataTable.Cell numeric>
                {account.availBalance}
              </DataTable.Cell>
            </DataTable.Row>
        )})}
      </DataTable>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

score 1 · Answer 2 · edited Mar 13 '20 at 10:51

Yes, there are other ways to map data in react native using FlatList, etc.

Replace this section of your code:

{
   accounts.map(account=>{
     return(
        <DataTable.Row>
           <DataTable.Cell>{account.accNumber}</DataTable.Cell>
           <DataTable.Cell>{account.productCode}</DataTable.Cell>
           <DataTable.Cell>{account.availBalance}</DataTable.Cell>
        </DataTable.Row>
      )
   })}
 </DataTab

with this:

   { accounts.map((account, key)=>(
        <DataTable.Row>
            <DataTable.Cell>{account.accNumber}</DataTable.Cell>
            <DataTable.Cell>{account.productCode}</DataTable.Cell>
            <DataTable.Cell>{account.availBalance}</DataTable.Cell>
        </DataTable.Row>
        )
    )}

You should get rid of the warning.

For the above example i need to add pagination. Help me anyone. i am using react native expo — sac, Mar 29 '21 at 05:05

score 0 · Answer 3 · answered Jul 24 '19 at 07:00

0

I am also working on a project where I need to generate a table view from JSON. I am using FlatList of React-Native. Here is an example of my code

  <View style={{flex: 1}}>
    <View style={[tableStyle.tableWrapper]}>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
        <FlatList
          data={[renderList]}
          renderItem={this.renderTableBody}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    </View>
  </View>

you need to pass the renderList(an array generate from your JSON file) and render these value in renderItem.

answered Jul 24 '19 at 07:00

Rajesh Bhartia

690
4
10

as per my requirement, I have done the following: changed data={accounts}, renderItem={({item})=>{item.accNumber}{item.availBalance}{item.productCode}} But still error is coming. Can u please elaborate the solution or any link to refer? – Archie Jul 24 '19 at 11:02
can you view the ``renderTableBody`` how you write this? – Yoel Jan 19 '21 at 21:55

Display values of array of objects in Table format in ReactNative

3 Answers3