How to create a table in react-native ?

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

• Basic knowledge of reactjs.
• Html, css and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on emulator (install).

Approach: In this article, we will create a simple table in react-native which will contain a person’s name, age, and favorite food details. We will use the react-native-paper library for creating a table. 

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Start the server using the following:

npx react-native run-android

Step 4: Now go to your project and create a components folder. Inside components folder, create a file DataTable.js.

Project Structure: It will look like this.

Implementation: Write down the code in respective files.

In DataTable.js, we have imported DataTable component from react-native-paper library.

• To Display column name, we will use DataTable.Header component.
• To Show title in table header, we have DataTable.Title component.
• To Display row inside a table, we will use DataTable.Row component.
• To show cell inside a table, we have DataTable.Cell component.

Filename: DataTable.js

Javascript

import React from 'react';
import { StyleSheet } from 'react-native';
import { DataTable } from 'react-native-paper';

const TableExample = () => {
  return (
    <DataTable style={styles.container}>
      <DataTable.Header style={styles.tableHeader}>
        <DataTable.Title>Name</DataTable.Title>
        <DataTable.Title>Favourite Food</DataTable.Title>
        <DataTable.Title>Age</DataTable.Title>
      </DataTable.Header>
      <DataTable.Row>
        <DataTable.Cell>Radhika</DataTable.Cell>
        <DataTable.Cell>Dosa</DataTable.Cell>
        <DataTable.Cell>23</DataTable.Cell>
      </DataTable.Row>

      <DataTable.Row>
        <DataTable.Cell>Krishna</DataTable.Cell>
        <DataTable.Cell>Uttapam</DataTable.Cell>
        <DataTable.Cell>26</DataTable.Cell>
      </DataTable.Row>
      <DataTable.Row>
        <DataTable.Cell>Vanshika</DataTable.Cell>
        <DataTable.Cell>Brownie</DataTable.Cell>
        <DataTable.Cell>20</DataTable.Cell>
      </DataTable.Row>
      <DataTable.Row>
        <DataTable.Cell>Teena</DataTable.Cell>
        <DataTable.Cell>Pizza</DataTable.Cell>
        <DataTable.Cell>24</DataTable.Cell>
      </DataTable.Row>
    </DataTable>
  );
};

export default TableExample;

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  tableHeader: {
    backgroundColor: '#DCDCDC',
  },
});

Filename: App.js

Javascript

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';

import TableExample from './components/DataTable';

const App: () => Node = () => {
  return (
    <View>
      <TableExample />
    </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: