A React Native table component using react-native-reanimated and react-native-gesture-handler.
How to use it:
1. Install & import.
# NPM $ npm i react-native-reanimated-table
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-reanimated-table';
2. Basic usage.
import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, Row, Rows } from 'react-native-reanimated-table';
export default class ExampleOne extends Component { constructor(props) { super(props); this.state = { tableHead: ['Head', 'Head2', 'Head3', 'Head4'], tableData: [ ['1', '2', '3', '4'], ['a', 'b', 'c', 'd'], ['1', '2', '3', '456\n789'], ['a', 'b', 'c', 'd'] ] } } render() { const state = this.state; return ( <View style={styles.container}> <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}> <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/> <Rows data={state.tableData} textStyle={styles.text}/> </Table> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#f1f8ff' }, text: { margin: 6 } });
Preview:
Download Details:
Author: dohooo
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/dohooo/react-native-reanimated-table
License: MIT