React Native Reanimated Table

This is a table component for react native.

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

Installation

npm install react-native-reanimated-table

1import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-reanimated-table';

Examples

Example1

1import React, { Component } from 'react';
2import { StyleSheet, View } from 'react-native';
3import { Table, Row, Rows } from 'react-native-reanimated-table';
4
5export default class ExampleOne extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
10      tableData: [
11        ['1', '2', '3', '4'],
12        ['a', 'b', 'c', 'd'],
13        ['1', '2', '3', '456\n789'],
14        ['a', 'b', 'c', 'd']
15      ]
16    }
17  }
18
19  render() {
20    const state = this.state;
21    return (
22      <View style={styles.container}>
23        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
24          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
25          <Rows data={state.tableData} textStyle={styles.text}/>
26        </Table>
27      </View>
28    )
29  }
30}
31
32const styles = StyleSheet.create({
33  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
34  head: { height: 40, backgroundColor: '#f1f8ff' },
35  text: { margin: 6 }
36});

---

Example2

1import React, { Component } from 'react';
2import { StyleSheet, View } from 'react-native';
3import { Table, TableWrapper, Row, Rows, Col } from 'react-native-reanimated-table';
4
5export default class ExampleTwo extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      tableHead: ['', 'Head1', 'Head2', 'Head3'],
10      tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
11      tableData: [
12        ['1', '2', '3'],
13        ['a', 'b', 'c'],
14        ['1', '2', '3'],
15        ['a', 'b', 'c']
16      ]
17    }
18  }
19
20  render() {
21    const state = this.state;
22    return (
23      <View style={styles.container}>
24        <Table borderStyle={{borderWidth: 1}}>
25          <Row data={state.tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text}/>
26          <TableWrapper style={styles.wrapper}>
27            <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
28            <Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
29          </TableWrapper>
30        </Table>
31      </View>
32    )
33  }
34}
35
36const styles = StyleSheet.create({
37  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
38  head: {  height: 40,  backgroundColor: '#f1f8ff'  },
39  wrapper: { flexDirection: 'row' },
40  title: { flex: 1, backgroundColor: '#f6f8fa' },
41  row: {  height: 28  },
42  text: { textAlign: 'center' }
43});

---

Example3

1import React, { Component } from 'react';
2import { StyleSheet, View, ScrollView } from 'react-native';
3import { Table, TableWrapper, Row } from 'react-native-reanimated-table';
4
5export default class ExampleThree extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'],
10      widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200]
11    }
12  }
13
14  render() {
15    const state = this.state;
16    const tableData = [];
17    for (let i = 0; i < 30; i += 1) {
18      const rowData = [];
19      for (let j = 0; j < 9; j += 1) {
20        rowData.push(`${i}${j}`);
21      }
22      tableData.push(rowData);
23    }
24
25    return (
26      <View style={styles.container}>
27        <ScrollView horizontal={true}>
28          <View>
29            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
30              <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>
31            </Table>
32            <ScrollView style={styles.dataWrapper}>
33              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
34                {
35                  tableData.map((rowData, index) => (
36                    <Row
37                      key={index}
38                      data={rowData}
39                      widthArr={state.widthArr}
40                      style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
41                      textStyle={styles.text}
42                    />
43                  ))
44                }
45              </Table>
46            </ScrollView>
47          </View>
48        </ScrollView>
49      </View>
50    )
51  }
52}
53
54const styles = StyleSheet.create({
55  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
56  header: { height: 50, backgroundColor: '#537791' },
57  text: { textAlign: 'center', fontWeight: '100' },
58  dataWrapper: { marginTop: -1 },
59  row: { height: 40, backgroundColor: '#E7E6E1' }
60});

---

Example4

1import React, { Component } from 'react';
2import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
3import { Table, TableWrapper, Row, Cell } from 'react-native-reanimated-table';
4
5export default class ExampleFour extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
10      tableData: [
11        ['1', '2', '3', '4'],
12        ['a', 'b', 'c', 'd'],
13        ['1', '2', '3', '4'],
14        ['a', 'b', 'c', 'd']
15      ]
16    }
17  }
18
19  _alertIndex(index) {
20    Alert.alert(`This is row ${index + 1}`);
21  }
22
23  render() {
24    const state = this.state;
25    const element = (data, index) => (
26      <TouchableOpacity onPress={() => this._alertIndex(index)}>
27        <View style={styles.btn}>
28          <Text style={styles.btnText}>button</Text>
29        </View>
30      </TouchableOpacity>
31    );
32
33    return (
34      <View style={styles.container}>
35        <Table borderStyle={{borderColor: 'transparent'}}>
36          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
37          {
38            state.tableData.map((rowData, index) => (
39              <TableWrapper key={index} style={styles.row}>
40                {
41                  rowData.map((cellData, cellIndex) => (
42                    <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text}/>
43                  ))
44                }
45              </TableWrapper>
46            ))
47          }
48        </Table>
49      </View>
50    )
51  }
52}
53
54const styles = StyleSheet.create({
55  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
56  head: { height: 40, backgroundColor: '#808B97' },
57  text: { margin: 6 },
58  row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
59  btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },
60  btnText: { textAlign: 'center', color: '#fff' }
61});

---

Example5

1import React, { Component } from 'react';
2import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
3import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-reanimated-table';
4
5export default class ExampleFive extends Component {
6  constructor(props) {
7    super(props);
8    const elementButton = (value) => (
9      <TouchableOpacity onPress={() => this._alertIndex(value)}>
10        <View style={styles.btn}>
11          <Text style={styles.btnText}>button</Text>
12        </View>
13      </TouchableOpacity>
14    );
15
16    this.state = {
17      tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
18      tableData: [
19        [elementButton('1'), 'a', 'b', 'c', 'd'],
20        [elementButton('2'), '1', '2', '3', '4'],
21        [elementButton('3'), 'a', 'b', 'c', 'd']
22      ]
23    }
24  }
25
26  _alertIndex(value) {
27    Alert.alert(`This is column ${value}`);
28  }
29
30  render() {
31    const state = this.state;
32    return (
33      <View style={styles.container}>
34        <Table style={{flexDirection: 'row'}} borderStyle={{borderWidth: 1}}>
35          {/* Left Wrapper */}
36          <TableWrapper style={{width: 80}}>
37            <Cell data="" style={styles.singleHead}/>
38            <TableWrapper style={{flexDirection: 'row'}}>
39              <Col data={['H1', 'H2']} style={styles.head} heightArr={[60, 60]} textStyle={styles.text} />
40              <Col data={state.tableTitle} style={styles.title} heightArr={[30, 30, 30, 30]} textStyle={styles.titleText}></Col>
41            </TableWrapper>
42          </TableWrapper>
43
44          {/* Right Wrapper */}
45          <TableWrapper style={{flex:1}}>
46            <Cols data={state.tableData} heightArr={[40, 30, 30, 30, 30]} textStyle={styles.text}/>
47          </TableWrapper>
48        </Table>
49      </View>
50    )
51  }
52}
53
54const styles = StyleSheet.create({
55  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
56  singleHead: { width: 80, height: 40, backgroundColor: '#c8e1ff' },
57  head: { flex: 1, backgroundColor: '#c8e1ff' },
58  title: { flex: 2, backgroundColor: '#f6f8fa' },
59  titleText: { marginRight: 6, textAlign:'right' },
60  text: { textAlign: 'center' },
61  btn: { width: 58, height: 18, marginLeft: 15, backgroundColor: '#c8e1ff', borderRadius: 2 },
62  btnText: { textAlign: 'center' }
63});

---

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.

1<ScrollView horizontal={true}>
2  {/* If parent element is not Table component，please add the type of borderstyle. */}
3  <TableWrapper borderStyle={{borderWidth: 2, borderColor: 'blue',}}>
4    <Cols data={data} />
5  </TableWrapper>
6</ScrollView>

License

MIT