6

React Native Simple Data Tables

 3 years ago
source link: https://reactnativeexample.com/react-native-simple-data-tables/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-awesome-table

React-Native Simple Data Tables

Examples cam be found on our Storybook https://garrylachman.github.io/react-native-awesome-table/?path=/story/cell--default

Installation

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

yarn add react-native-awesome-table

Examples

Basic Example

Basic Example

import React from 'react';
import Table, {ColumnProps} from 'react-native-awesome-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}
		/>
	)
};

Basic example storybook: https://garrylachman.github.io/react-native-awesome-table/?path=/story/table--basic&args=rowsCount:10

GitHub

https://github.com/garrylachman/react-native-awesome-table


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK