1.0.2 • Published 5 years ago
react-native-commontable v1.0.2
React Native Common Table
Getting started
yarn add react-native-commontable
Usage
import React from "react";
import {
View,
StyleSheet
} from "react-native";
import CommonTable from 'react-native-commontable';
export default class App extends React.Component {
constructor(props) {
super(props);
this.backSourceHeader = ['Name', 'Sex', 'Age'];
this.backSourceData = [
['Jack', 'Male', '24'],
['Rose', 'Female', '22']
];
}
render() {
return (
<View style={styles.container}>
<CommonTable tableHeader={this.backSourceHeader} tableData={this.backSourceData}/>
<CommonTable tableHeader={this.backSourceHeader} tableData={this.backSourceData}
tableHeaderStyle={{backgroundColor:'#677ca0'}}
textHeaderStyle={styles.normalTextWhite}
tableDataStyle={{backgroundColor:'#d4d8e9'}}
textDataStyle={styles.middleText}
/>
<CommonTable tableHeader={this.backSourceHeader} tableData={this.backSourceData} tableWidth={300}/>
<CommonTable tableHeader={this.backSourceHeader} tableData={this.backSourceData} columnsWidth={[150,100,50]}/>
<CommonTable tableHeader={this.backSourceHeader} tableData={this.backSourceData} borderWidth={3} borderColor='red'/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
normalTextWhite: {
color: '#FFFFFF',
fontSize: 18
},
middleText: {
color: '#121917',
fontSize: 18
},
});
Component props
Prop | Required | Type | default | description |
---|---|---|---|---|
tableHeader | YES | array | none | Table header array |
tableData | YES | array | none | Table data array,two-dimensional array [[]] |
columnsWidth | NO | array | none | Column width,if set,tableWidth does not work |
tableWidth | NO | number | none | Table width,if columnsWidth and tableWidth is null,Table width=screen width |
tableHeaderStyle | NO | array or object | none | |
textHeaderStyle | NO | array or object | none | |
tableDataStyle | NO | array or object | none | |
textDataStyle | NO | array or object | none | |
borderWidth | NO | number | 1 | |
borderColor | NO | string | #121917 |