React Native Table Component

* The project is no longer maintained due to work reasons and can be transferred if necessary.

If you are interested in maintaining the project, please contact the email 594244274@qq.com.

This is a table component for react native.

• Installation
• Changelogs
• Examples
• Properties
• Notice
• License

切换到中文文档

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

Examples

Example1

importReact,{Component}from'react';import{StyleSheet,View}from'react-native';import{Table,Row,Rows}from'react-native-table-component';exportdefaultclassExampleOneextendsComponent{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(){conststate=this.state;return(<Viewstyle={styles.container}><TableborderStyle={{borderWidth: 2,borderColor: '#c8e1ff'}}><Rowdata={state.tableHead}style={styles.head}textStyle={styles.text}/><Rowsdata={state.tableData}textStyle={styles.text}/></Table></View>)}}conststyles=StyleSheet.create({container: {flex: 1,padding: 16,paddingTop: 30,backgroundColor: '#fff'},head: {height: 40,backgroundColor: '#f1f8ff'},text: {margin: 6}});

---

Example2

importReact,{Component}from'react';import{StyleSheet,View}from'react-native';import{Table,TableWrapper,Row,Rows,Col}from'react-native-table-component';exportdefaultclassExampleTwoextendsComponent{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(){conststate=this.state;return(<Viewstyle={styles.container}><TableborderStyle={{borderWidth: 1}}><Rowdata={state.tableHead}flexArr={[1,2,1,1]}style={styles.head}textStyle={styles.text}/><TableWrapperstyle={styles.wrapper}><Coldata={state.tableTitle}style={styles.title}heightArr={[28,28]}textStyle={styles.text}/><Rowsdata={state.tableData}flexArr={[2,1,1]}style={styles.row}textStyle={styles.text}/></TableWrapper></Table></View>)}}conststyles=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

importReact,{Component}from'react';import{StyleSheet,View,ScrollView}from'react-native';import{Table,TableWrapper,Row}from'react-native-table-component';exportdefaultclassExampleThreeextendsComponent{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(){conststate=this.state;consttableData=[];for(leti=0;i<30;i+=1){constrowData=[];for(letj=0;j<9;j+=1){rowData.push(`${i}${j}`);}tableData.push(rowData);}return(<Viewstyle={styles.container}><ScrollViewhorizontal={true}><View><TableborderStyle={{borderWidth: 1,borderColor: '#C1C0B9'}}><Rowdata={state.tableHead}widthArr={state.widthArr}style={styles.header}textStyle={styles.text}/></Table><ScrollViewstyle={styles.dataWrapper}><TableborderStyle={{borderWidth: 1,borderColor: '#C1C0B9'}}>{tableData.map((rowData,index)=>(<Rowkey={index}data={rowData}widthArr={state.widthArr}style={[styles.row,index%2&&{backgroundColor: '#F7F6E7'}]}textStyle={styles.text}/>))}</Table></ScrollView></View></ScrollView></View>)}}conststyles=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

importReact,{Component}from'react';import{StyleSheet,View,Text,TouchableOpacity,Alert}from'react-native';import{Table,TableWrapper,Row,Cell}from'react-native-table-component';exportdefaultclassExampleFourextendsComponent{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(){conststate=this.state;constelement=(data,index)=>(<TouchableOpacityonPress={()=>this._alertIndex(index)}><Viewstyle={styles.btn}><Textstyle={styles.btnText}>button</Text></View></TouchableOpacity>);return(<Viewstyle={styles.container}><TableborderStyle={{borderColor: 'transparent'}}><Rowdata={state.tableHead}style={styles.head}textStyle={styles.text}/>{state.tableData.map((rowData,index)=>(<TableWrapperkey={index}style={styles.row}>{rowData.map((cellData,cellIndex)=>(<Cellkey={cellIndex}data={cellIndex===3 ? element(cellData,index) : cellData}textStyle={styles.text}/>))}</TableWrapper>))}</Table></View>)}}conststyles=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

importReact,{Component}from'react';import{StyleSheet,View,Text,TouchableOpacity,Alert}from'react-native';import{Table,TableWrapper,Col,Cols,Cell}from'react-native-table-component';exportdefaultclassExampleFiveextendsComponent{constructor(props){super(props);constelementButton=(value)=>(<TouchableOpacityonPress={()=>this._alertIndex(value)}><Viewstyle={styles.btn}><Textstyle={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(){conststate=this.state;return(<Viewstyle={styles.container}><Tablestyle={{flexDirection: 'row'}}borderStyle={{borderWidth: 1}}>{/* Left Wrapper */}<TableWrapperstyle={{width: 80}}><Celldata=""style={styles.singleHead}/><TableWrapperstyle={{flexDirection: 'row'}}><Coldata={['H1','H2']}style={styles.head}heightArr={[60,60]}textStyle={styles.text}/><Coldata={state.tableTitle}style={styles.title}heightArr={[30,30,30,30]}textStyle={styles.titleText}></Col></TableWrapper></TableWrapper>{/* Right Wrapper */}<TableWrapperstyle={{flex:1}}><Colsdata={state.tableData}heightArr={[40,30,30,30,30]}textStyle={styles.text}/></TableWrapper></Table></View>)}}conststyles=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.

<ScrollViewhorizontal={true}>{/* If parent element is not Table component，please add the type of borderstyle. */}<TableWrapperborderStyle={{borderWidth: 2,borderColor: 'blue',}}><Colsdata={data}/></TableWrapper></ScrollView>

License

MIT