Need help with react-native-table-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Gil2015
516 Stars 101 Forks MIT License 107 Commits 32 Opened issues

Description

🌱Build table for react native

Services available

!
?

Need anything else?

Contributors list

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.