Description:
A pretty simple data table component for React Native applications.
How to use it:
1. Install and import the component.
# Yarn $ yarn add react-native-awesome-table # NPM $ npm i react-native-awesome-table --save
import React from 'react';
import Table, {ColumnProps} from 'react-native-awesome-table';2. Create a basic 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}
/>
)
};Preview:
