This article will give you an example of how to create DataTable with react native. This article will give you a simple example of how to implement DataTable with react native. This code will help you how to use DataTable with react native. This example will give you a simple example of how to add DataTable with react native. So, let’s follow few step to create a simple way to react native DataTable example.
Let’s start following example:
Step 1: Download Project
First step run the following command to create a new project.
expo init ExampleApp
Step 2: Install and Setup
Second, you need to react-native-datatable-component package.
npm install react-native-datatable-component
Step 3: App.js
In this almost final, You will open the App.js file to editor 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;
Run Project
In the final step run your project using the given command
expo start
You can QR code scan in Expo Go Application on mobile phone and view the app.
Result
0 Comments