How to Create Responsive Table Component in React Native

In this tutorial, you will learn how to create a responsive table component in React Native application using the react-native-table-component package. Also, we will show you how to style the table UI component with the help of CSS.

This example will explain how to integrate table in react native app from scratch. The react-native-table-component library offers the easy way to create a simple responsive table in react native. It provides a bunch of properties, which can let you customize the table component on the fly.

Adding tables in react native is not complicated; tables provide the way to show information in a grid-type format of rows and columns. It helps organize the data and offers an outlook to scan the information for decision making.

React Native Responsive Table Component Example

  • Step 1: Install React Native CLI
  • Step 2: Create New React Native Project
  • Step 3: Install Table Component Package
  • Step 4: Create Table Component
  • Step 5: Register Table Component in App Js
  • Step 6: Start React Native App

Install React Native CLI

You must install Node 12 LTS or higher version in your system; you may use either npm or yarn to begin installing the Expo CLI.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Create New React Native Project

In this step, you need to run command the given command to create the new React Native application.

expo init RnBlogProject

Next, get into the app folder.

cd RnBlogProject

Install Table Component Package

In this step, you need to install the react native table component package in react native app with the help of the provided command.

npm install react-native-table-component

Implement Responsive Table in React Native

In this step, you have to create a table_component.js file in your reactive native project; in this file, you need to import the Row, Table sub modules from the ‘react-native-table-component’ primary module.

Import the View, StyleSheet and ScrollView from ‘react-native’ module, and create TableComponenet class and simultaneously export it, use the modules to create the responsive table in react native application.

Likewise, you have to add the custom styling with the help CSS.

Then, update code in table_component.js file.

import React, { Component } from 'react';

import { View, StyleSheet, ScrollView } from 'react-native';
import { Row, Table } from 'react-native-table-component';


export default class TableComponenet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tbHead: ['Header', 'Header', 'Header', 'Header', 'Header', 'Header', 'Header'],
      widths: [100, 120, 130, 140, 150, 160, 170]
    }
  }

  render() {
    const state = this.state;
    const data = [];
    for (let i = 0; i < 50; i += 1) {
      const totlatRows = [];
      for (let j = 0; j < 9; j += 1) {
        totlatRows.push(`${i}${j}`);
      }
      data.push(totlatRows);
    }

    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          <View>
            <Table>
              <Row data={state.tbHead} widths={state.widths} style={styles.headerWrapper} textStyle={styles.text}/>
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table>
                {
                  data.map((totlatRows, index) => (
                    <Row
                      key={index}
                      data={totlatRows}
                      textStyle={styles.text}
                      widthArr={state.widths}
                      style={[styles.row, index%2 && {backgroundColor: '#ffffff'}]}
                    />
                  ))
                }
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { 
    flex: 1, 
    padding: 18, 
    paddingTop: 25
  },
  headerWrapper: { 
    height: 60,
    backgroundColor: '#BAEFBE'
  },
  text: { 
    textAlign: 'center'
  },
  row: { 
    height: 60, 
    backgroundColor: '#F6F7Fb',
  }
});

Register Table Component in App Js

In this section, we will tell you how to register the new component in your main app js file.

For that, you have to open the App.js; in this file, register the table component as mentioned below.


import React from 'react';

import TableComponenet from './table_component.js'


export default function App() {
  return (
    <TableComponenet/>
  );
}

Start React Native App

In the last step, you need to run command to start the development server; use either of the command based on your package manager.

# npm
npm start


# yarn
yarn start

We have developed the react native table component; for testing you may use the Expo tool; you have to install the Expo app to test the app on mobile device.

After starting the app, you have to scan the QR code, open the react native app on your mobile device.

How to Create Responsive Table Component in React Native

Conclusion

In this guide, we learned how to create table components in react native, how to create a responsive table that adjusts its size as per the device, and display information in rows and columns format.