Dynamic Table Generator For React Native

Category: React Native , Table | December 24, 2017
Author: Gil2015
Views Total: 834
Official Page: Go to website
Last Update: December 24, 2017
License: MIT

A simple, flexible React Native component to dynamically generate tables on your app.

Installation:

# NPM
$ npm install react-native-table-component --save

How to use it:

Import the table component and other required resources.

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

Generate a basic html table.

class tableView extends Component {
  render() {
    const tableHead = ['Head1', 'Head2', 'Head3', 'Head4'];
    const tableData = [
      ['1', '2', '3', '4'],
      ['a', 'b', 'c', 'd'],
    ];
  
    return (
      <View>
        <Table>
          <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={tableData} style={styles.row} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

// your own styles here
const styles = StyleSheet.create({
  head: { ... },
  text: { ... },
  row: { ... }
})

Preview:

Dynamic Table Generator For React Native