How to use DataTable in React Native?

Hi Guys,

Today, I would like to show you how to use DataTable in react native. In this article, we will implement a how to create DataTable in react native. if you have question about DataTable example in react native then I will give simple example with solution. this example will help you how to add DataTable in react native. Here, Creating a basic example of how to implement DataTable in react native.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

First of all you have to react-native-datatable-component package.

npm install react-native-datatable-component

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import DataTable, { COL_TYPES } from 'react-native-datatable-component';

const App = () => {

    const data = [
        { name: 'Divyesh', age: 21, gender: 'male' },
        { name: 'Nikhil', age: 22, gender: 'male' },
        { name: 'Rajesh', age: 21, gender: 'male' },
        { name: 'Bhavesh', age: 22, gender: 'male' },
        { name: 'Vishal', age: 20, gender: 'male' },
        { name: 'Dharmik', age: 22, gender: 'male' }
    ];

    const colSettings = [
        { name: 'name', type: COL_TYPES.STRING, width: '40%' },
        { name: 'age', type: COL_TYPES.INT, width: '30%' },
        { name: 'gender', type: COL_TYPES.STRING, width: '30%' }
    ];

    const colNames = ['name', 'age', 'gender'];

    return (
        <View style={styles.container}>
            <DataTable
                data={data}
                colNames={colNames}
                colSettings={colSettings}
                backgroundColor={'#acaaab33'}
                headerLabelStyle={{ color: 'black', fontSize: 12 }}
                noOfPages={10}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 50,
        width: '100%',
        alignSelf: 'center',
    }
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...