React Native Simple Data Table Component

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:

React Native Simple Data Table Component

Download Details:

Author: garrylachman

Live Demo: View The Demo

Download Link: Download The Source Code

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

License: MIT

You Might Be Interested In:

Add Comment