EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native Table

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native Table

React Native Table

What is React Native Table?

React Native Table is a component library which used to represent an array of data in the tabular format. It has options of pagination, and other important features which needed for the listing of data, the main benefit of using this component is that it allows managing a huge amount of data coming from the server, for example, suppose server has sent a list of 10000000 products with all details. Now the app has to display or manage these data, so by writing any normal code to manage such big data will be very hard so the react-native table will play an important role here.

Syntax

In the below syntax, we are initializing an array of names and assigning it to the state variable “dataForTable”, and this variable will be used in render function to display all these data in the form of a list, in the same way, we are defining header variable with name “headerOfTable”, and this attribute will play the role of the header of the table. We are importing the React Native.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Here we have two children component of the main Table component they are,

  • Row: This Will be used for the creation of the header, and here we are passing a single array of data.
  • Rows: This component will be used for the creation of the table contents, here we are passing a collection of an array of data which will be visible in the form of table contents.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
class tableExample extends Component {
constructor(props) {
super(props);
this.state = {
headerOfTable: [‘name’, 'age', 'sex', 'location’'],
dataForTable: [
['name1', ''age1'', ''sex1'', ''location1''],
['name2', ''age2'', ''sex2'', ''location2''],
['name3', ''age3'', ''sex3'', ''location3''],
['name4', ''age4'', ''sex4'', ''location4''],
] }
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table>
<Row data={state.headerOfTable}/>
<Rows data={state.dataForTable} />
</Table>
</View>
)
}
}

How does React Native Table work?

It’s working principle very much similar to any other react-native component library; we can describe its working in the below steps.

  • Table: The table is the main component of the react library which has many child components.
  • Row: Row is the children component of the Table, and it takes an array of data. This data can be used for the formation of headers. We can easily create a header by passing an array of header names.
  • Rows: Rows is the children component of Table, and it takes an array of data. This data can be used for the formation of table contents. We can easily create a header by passing an array of header names.

Examples of React Native Table

In this example, we are performing the steps below to get the table as the output.

  • We defined one table example class which is extending the react core component.
  • We have defined some initial states variables like an array of data for the header and an array of data for the react-native table contents inside the constructor function.
  • Data in the header and table contents are similar.
  • We have imported react-native-table-component for creating tabular formats.
  • Inside the render function, we are calling the Table parent component, and in this parent component, we are called the Row and Rows children component to create the header and table contents.
  • Children component Row will pass the header and Row data for the data contents for the react-native table.
  • Finally, the output will be visible to the end-user in the form of header and table contents.

Here we can also define something for the footer in the same way how we have designed the header by passing header data. Please see the below example and screen of output for a better understanding.

Code:

import React, { Component } from 'react';//importing react core
import { View } from 'react-native';//importing View from the react-native
import { Table, Row, Rows } from 'react-native-table-component';//Here we are Importing
export default class tableExample extends Component {
constructor(props) {
super(props);
this.state = {
headerData:  ["username", "age", "sex", "location"],//initialisation of header of table
tableContents: [
["ranjan", "30", "male", "Chennai"],
["Ajay", "29", "male", "Mumbai",],
["vijay", "29", "male", "Mumbai",],
["Suraj", "24", "male", "Kolkata",],
["Akash", "27", "male", "Mumbai",],
["Alka", "29", "female", "Delhi",] ] }//initialisation of table contents
}
//calling the render function for the
render() {
const state = this.state;
return (
<View>
<Table>
<Row data={state.headerData}/>
<Rows data={state.tableContents}/>
</Table>
</View>
)
}
}

Output:

React Native Table - 1

Advantages of React Native Table

Advantage of using react native table is given below:

  • Re-usability: Because of the functional architecture of the table, we can define any table once and can be used by many places; for example, if we are creating a tabular representation for the admin user same piece of code will be used to create super admin, user and staff also, so we are using same code for a table in all kind of representations.
  • Small code: To create the same view, we need to write too much code if we are going to write everything from scratch.
  • Performance: In the case of data from the server is very large; in that case, normal app code may note be good enough to deal with such big data because react-native tables are very optimized, they will handle it very perfectly.
  • Easy To manage: Because of the functional architecture, it will be easy to extend and manage; in case if we need to do any change in the existing architecture, then it will be very easy with the help of a react-native table.
  • Custom Style: We can write custom style for a table(at the table label, we can define design for the header and footer and the table contents looks), row(here we can define the look, color or any other related stuff to row), and column(here we can define the look, colo and another related attribute to the column )

Conclusion

From this article, we learned about the table in react native; we learned how we could create tabular representation by passing an array of data for header creation and an array of data for table contents creations. We also learned that using a react native table is more useful than writing our own code for html table creation.

Recommended Articles

This is a guide to React Native Table. Here we discuss syntax, working, advantages, and examples of react native table with codes and outputs. You can also go through our other related articles to learn more –

  1. React Native Layout
  2. React Native Architecture
  3. React Native FlatList
  4. React Versions

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More