🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

React Native Table

Documentation

React Native Table Component

This is a table component for react native.

切换到中文文档

Installation

npm install react-native-table-component

USE:

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';



Changelogs

  • [v1.0.3]
    • 'TableWraper' changed to 'TableWrapper';
  • [v1.1.1]
    • Data supports incoming Element types

Examples

Example1

import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, Row, Rows } from 'react-native-table-component';  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 } });

Example2

import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';  export default class ExampleTwo extends Component {   constructor(props) {     super(props);     this.state = {       tableHead: ['', 'Head1', 'Head2', 'Head3'],       tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],       tableData: [         ['1', '2', '3'],         ['a', 'b', 'c'],         ['1', '2', '3'],         ['a', 'b', 'c']       ]     }   }    render() {     const state = this.state;     return (       <View style={styles.container}>         <Table>           <Row data={state.tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text}/>           <TableWrapper style={styles.wrapper}>             <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>             <Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>           </TableWrapper>         </Table>       </View>     )   } }  const styles = StyleSheet.create({   container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },   head: {  height: 40,  backgroundColor: '#f1f8ff'  },   wrapper: { flexDirection: 'row' },   title: { flex: 1, backgroundColor: '#f6f8fa' },   row: {  height: 28  },   text: { textAlign: 'center' } });

Example3

import React, { Component } from 'react'; import { StyleSheet, View, ScrollView } from 'react-native'; import { Table, TableWrapper, Row } from 'react-native-table-component';  export default class ExampleThree extends Component {   constructor(props) {     super(props);     this.state = {       tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'],       widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200]     }   }    render() {     const state = this.state;     const tableData = [];     for (let i = 0; i < 30; i += 1) {       const rowData = [];       for (let j = 0; j < 9; j += 1) {         rowData.push(`${i}${j}`);       }       tableData.push(rowData);     }      return (       <View style={styles.container}>         <ScrollView horizontal={true}>           <View>             <Table borderStyle={{borderColor: '#C1C0B9'}}>               <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>             </Table>             <ScrollView style={styles.dataWrapper}>               <Table borderStyle={{borderColor: '#C1C0B9'}}>                 {                   tableData.map((rowData, index) => (                     <Row                       key={index}                       data={rowData}                       widthArr={state.widthArr}                       style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}                       textStyle={styles.text}                     />                   ))                 }               </Table>             </ScrollView>           </View>         </ScrollView>       </View>     )   } }  const styles = StyleSheet.create({   container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },   header: { height: 50, backgroundColor: '#537791' },   text: { textAlign: 'center', fontWeight: '100' },   dataWrapper: { marginTop: -1 },   row: { height: 40, backgroundColor: '#E7E6E1' } });

Example4

import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';  export default class ExampleFour 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', '4'],         ['a', 'b', 'c', 'd']       ]     }   }    _alertIndex(index) {     Alert.alert(`This is row ${index + 1}`);   }    render() {     const state = this.state;     const element = (data, index) => (       <TouchableOpacity onPress={() => this._alertIndex(index)}>         <View style={styles.btn}>           <Text style={styles.btnText}>button</Text>         </View>       </TouchableOpacity>     );      return (       <View style={styles.container}>         <Table borderStyle={{borderColor: 'transparent'}}>           <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>           {             state.tableData.map((rowData, index) => (               <TableWrapper key={index} style={styles.row}>                 {                   rowData.map((cellData, cellIndex) => (                     <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text}/>                   ))                 }               </TableWrapper>             ))           }         </Table>       </View>     )   } }  const styles = StyleSheet.create({   container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },   head: { height: 40, backgroundColor: '#808B97' },   text: { margin: 6 },   row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },   btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },   btnText: { textAlign: 'center', color: '#fff' } });

Example5

import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-table-component';  export default class ExampleFive extends Component {   constructor(props) {     super(props);     const elementButton = (value) => (       <TouchableOpacity onPress={() => this._alertIndex(value)}>         <View style={styles.btn}>           <Text style={styles.btnText}>button</Text>         </View>       </TouchableOpacity>     );      this.state = {       tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],       tableData: [         [elementButton('1'), 'a', 'b', 'c', 'd'],         [elementButton('2'), '1', '2', '3', '4'],         [elementButton('3'), 'a', 'b', 'c', 'd']       ]     }   }    _alertIndex(value) {     Alert.alert(`This is column ${value}`);   }    render() {     const state = this.state;     return (       <View style={styles.container}>         <Table style={{flexDirection: 'row'}}>           {/* Left Wrapper */}           <TableWrapper style={{width: 80}}>             <Cell data="" style={styles.singleHead}/>             <TableWrapper style={{flexDirection: 'row'}}>               <Col data={['H1', 'H2']} style={styles.head} heightArr={[60, 60]} textStyle={styles.text} />               <Col data={state.tableTitle} style={styles.title} heightArr={[30, 30, 30, 30]} textStyle={styles.titleText}></Col>             </TableWrapper>           </TableWrapper>            {/* Right Wrapper */}           <TableWrapper style={{flex:1}}>             <Cols data={state.tableData} heightArr={[40, 30, 30, 30, 30]} textStyle={styles.text}/>           </TableWrapper>         </Table>       </View>     )   } }  const styles = StyleSheet.create({   container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },   singleHead: { width: 80, height: 40, backgroundColor: '#c8e1ff' },   head: { flex: 1, backgroundColor: '#c8e1ff' },   title: { flex: 2, backgroundColor: '#f6f8fa' },   titleText: { marginRight: 6, textAlign:'right' },   text: { textAlign: 'center' },   btn: { width: 58, height: 18, marginLeft: 15, backgroundColor: '#c8e1ff', borderRadius: 2 },   btnText: { textAlign: 'center' } });



Properties

Prop Type Description Default
data Array Table data. null
style Style Container style. null
borderStyle Object Table border line width and color. { borderWidth: 1, borderColor: #000 }
textStyle Style Cell font style. null
flexArr Array Flex value per column. []
widthArr Array Width per column. []
heightArr Array Height per line. []
...props any   more props



Notice

  • Cells in Col and Cols components do not support adaptive height.
  • Please set the magin value in the textStyle property to adjust the padding and do not use the padding.
  • If parent element is not Table component,please add the type of borderstyle.
<ScrollView horizontal={true}>   {/* If parent element is not Table component,please add the type of borderstyle. */}   <TableWrapper borderStyle={{borderWidth: 2, borderColor: 'blue',}}>     <Cols data={data} />   </TableWrapper> </ScrollView>

License

MIT


You May Also Like