A simple table for react native.
npm install react-native-simple-tablenpm install react-native-simple-table --savejs
import React, { Component } from 'react'
import {
Platform,
StyleSheet,
View,
Text
} from 'react-native'
import Table from 'react-native-simple-table'import DataFactory from '../mock/DataFactory'
const columns = [
{
title: 'Mobile',
dataIndex: 'mobile',
width: 105
},
{
title: 'Name',
dataIndex: 'name',
width: 140
},
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Sex',
dataIndex: 'sex'
},
];
class Example extends Component {
render() {
let dataSource = DataFactory.generate().data;
return (
react-native-simple-table
)
}
}
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: {
paddingTop: 20
},
android: {}
}),
},
title: {
fontSize: 18,
padding: 10,
textAlign: 'center'
}
});
export default Example
``js
import mockjs, { Random } from 'mockjs'export default class DataFactory {
static generate() {
return mockjs.mock({
'data|1-20': [{
'mobile|12300000000-12399999999': 1,
'name|1': '@first @last',
'age|18-80': 1,
'sex|1': () => Random.pick(['male','female']),
}]
});
}
}
``| Property | Description | Type | Default |
---|---|---|---
dataSource | data record array to be rendered | any[] | []
columns | columns of table | Column[] | []
columnWidth | column width | number | 60
renderCell | render function | function | undefined
height | table height | number | 240
Column
| Property | Description | Type | Default |
---|---|---|---
title | title of this column | string | -
dataIndex | display field of the data record | string | -
width | width of this column | number | -