Create React Native Simple Data Table Component


Category: React React Table | June 22, 2021
Author:garrylachman
Official Page:Go to website
Last Update:June 21, 2021
License:MIT

Description:

You must be looking to create a simple data table for your React Native application. Here is the example, that will show you, how you can create the same.

How can I use it?

First, install the React data table component using Yarn.

yarn add react-native-awesome-table

Or, you may install it via npm.

npm -i --save react-native-awesome-table

And then, import the required components.

import React from 'react';
import Table, {ColumnProps} from 'react-native-awesome-table';

Now, create the basic structure of data table.

type DataRow = {
	id: number,
	firstName: string,
	lastName: string,
	country: string
};

const columns:ColumnProps[] = [
	{ 'dataKey': 'id', title: 'ID', flex: 1 },
	{ 'dataKey': 'firstName', title: 'First Name', flex: 2 },
	{ 'dataKey': 'lastName', title: 'Last Name', flex: 2 },
	{ 'dataKey': 'country', title: 'Country', flex: 3 }
]

const exampleRow:DataRow = {
	id: 0,
	firstName: "Garry",
	lastName: "Lachman",
	country: "Israel"
};

export BasicTable = () => {
	const [data, setData] = React.useState<DataRow[]>([]);

	React.useEffect(() => {
		setData(
			[...Array(10)].map(
				(_, i) => ({...exampleRow, id: ++i})
			)
		);
	}, []);

	return (
		<Table 
			columns={columns}
			data={data}
		/>
	)
};