React Native Table
In this article, we are going to look at how to build table in react native and display the data in the table. We will create a responsive table in react native application, this table will be horizontally and vertically Scrollable. The header of the table will be fixed while scrolling the table horizontally or vertically.
Tables help us display information neatly and elegantly in rows and columns. We are using react-native-table-component Library for design a table.
Lets, Start building table component.
1. Install the latest react native CLI by typing the below command in the terminal.
npm install -g react-native-cli
2. Create a new application by typing below command in the terminal.
react-native init ReactNativeTable
3. Enter Inside the Project Folder.
cd ReactNativeTable
4. Install the react-native-table-component package by running the following command in the terminal.
npm i react-native-table-component
Now, we are all set to start creating Android and ios Table in react native application.
To build table in react native , we have to import following methods in App.js file. Define Constructor (props), super(props), and
state inside the export default class app. Inside the state, we declare the Table's header and width of array that we will display in table.
export default class App extends Component{
constructor(props) {
super(props);
this.state = {
tableHead: ['Id', 'Name','Age', 'city', 'Status'],
widthArr: [50,90,70,90,100]
}
}
Next, We will declare the render() method inside the export default class App. Here we set the dummy data which will display in table.
render(){
const state = this.state;
const tableData = [
['1','John','27','Hairball',' Success '],
['2','Krish','29','Canyon',' Success '],
['3','Arnold','22','Paradise',' Success'],
['4','Mickey','25','Itly',' Success '],
];
________________________________________________________________________________________
Final App.js File Code
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, ScrollView, } from 'react-native';
import PropTypes from 'prop-types';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';
export default class App extends Component{
constructor(props) {
super(props);
this.state = {
tableHead: ['Id', 'Name', 'Age', 'city', 'Status'],
widthArr: [50,90,70,90,100]
}
}
render(){
const state = this.state;
const tableData = [
['1','John','27','Hairball',' Success '],
['2','Krish','29','Canyon',' Success '],
['3','Arnold','22','Paradise',' Success'],
['4','Mickey','25','Itly',' Success '],
];
return (
<View style={styles.MainContainer}>
<Text style={{fontSize:20,color:'#D00'}}>React Native Table</Text>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={{padding:15,fontWeight:'bold'}}/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{
tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={[styles.row, index%2 && {backgroundColor: '#D7DBDD'}]}
textStyle={styles.text}
/>
))
}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
header: { height: 40, backgroundColor: '#D7DBDD' },
text: {padding:15,fontWeight: '100' },
dataWrapper: { marginTop: -1 },
row: { height: 40, backgroundColor: '#FFFFFF' },
MainContainer: {
flex:1,
backgroundColor: '#FFFFFF',
justifyContent: 'center',
alignItems: 'center',
marginTop:200,
marginLeft:15,
marginRight:10
},
});
_________________________________________________________________________________________Output:
