https://github.com/jeepeng/react-native-simple-table
A simple table for react native.
https://github.com/jeepeng/react-native-simple-table
html-table react-native table
Last synced: about 1 year ago
JSON representation
A simple table for react native.
- Host: GitHub
- URL: https://github.com/jeepeng/react-native-simple-table
- Owner: Jeepeng
- License: apache-2.0
- Created: 2016-11-20T11:00:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-07-25T06:49:31.000Z (almost 7 years ago)
- Last Synced: 2024-11-14T11:14:13.880Z (over 1 year ago)
- Topics: html-table, react-native, table
- Language: JavaScript
- Size: 232 KB
- Stars: 32
- Watchers: 4
- Forks: 13
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-simple-table
A simple table for react native.
# Installation
`npm install react-native-simple-table --save`
# Usage
```js
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']),
}]
});
}
}
```
# API
Table
| 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
headerContainerStyle | header container style | object | {}
headerStyle | header text style | object | {}
bodyContainerStyle | body container style | object | {}
bodyStyle | body text style | object | {}
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 | -