react-native-table-component

by Gil2015

🌱Build table for react native

492 Stars 92 Forks Last release: Not found MIT License 107 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native Table Component

This is a table component for react native.

切换到中文文档

Installation

npm install react-native-table-component

USE:
jsx
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
  • [v1.2.1]
    • Change the default value of the borderWidth from 1 to 0

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 (

) } }

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 (

) } }

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="{{borderWidth:" bordercolor:>
          <row data="{state.tableHead}" widtharr="{state.widthArr}" style="{styles.header}" textstyle="{styles.text}/">
        </row>
{ tableData.map((rowData, index) => ( )) }
) } }

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) => ( this._alertIndex(index)}> button );

return (
  <view style="{styles.container}">
    <table borderstyle="{{borderColor:">
      <row data="{state.tableHead}" style="{styles.head}" textstyle="{styles.text}/">
      {
        state.tableData.map((rowData, index) =&gt; (
          <tablewrapper key="{index}" style="{styles.row}">
            {
              rowData.map((cellData, cellIndex) =&gt; (
                <cell key="{cellIndex}" data="{cellIndex" element index : celldata textstyle="{styles.text}/">
              ))
            }
          </cell></tablewrapper>
        ))
      }
    </row>
) } }

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) => ( this._alertIndex(value)}> button );

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 (

{/* Left Wrapper */}

      {/* Right Wrapper */}
      <tablewrapper style="{{flex:1}}">
        <cols data="{state.tableData}" heightarr="{[40," textstyle="{styles.text}/">
      </cols></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: 0, 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.
  {/* If parent element is not Table component,please add the type of borderstyle. */}
  
    
  

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.