⚠️ This Repository is No Longer Maintained ⚠️

🔴 Attention: This repository is no longer being actively maintained or updated. The development has shifted to another GitHub repository. We encourage you to check out the new repository for the latest features and improvements. Thank you for your understanding and support! 🙌.

🙏 A big thank you to Gil2015, the original author, for their tremendous efforts and contributions to this project!

🔗 New Repository: react-native-reanimated-table

🚀 In the new repository, we will be working on creating a high-performance table component using Reanimated. The API will initially be compatible with this project, but it will change completely after version 0.1.0. Please be patient and stay tuned for updates!

We're excited about the new direction we're taking, and we hope you'll join us there! Happy coding! 💻😄

---

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