Notify President Madagascar

    react-native-table-component
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-table-component package

    1.2.2 • Public • Published

    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

    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

    import React, { Component } from 'react';
    import { StyleSheet, View } from 'react-native';
    import { Table, Row, Rows } from 'react-native-table-component';
    
    export default class ExampleOne extends Component {
      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() {
        const state = this.state;
        return (
          <View style={styles.container}>
            <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
              <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
              <Rows data={state.tableData} textStyle={styles.text}/>
            </Table>
          </View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
      head: { height: 40, backgroundColor: '#f1f8ff' },
      text: { margin: 6 }
    });

    Example2

    import React, { Component } from 'react';
    import { StyleSheet, View } from 'react-native';
    import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';
    
    export default class ExampleTwo extends Component {
      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() {
        const state = this.state;
        return (
          <View style={styles.container}>
            <Table borderStyle={{borderWidth: 1}}>
              <Row data={state.tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text}/>
              <TableWrapper style={styles.wrapper}>
                <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
                <Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
              </TableWrapper>
            </Table>
          </View>
        )
      }
    }
    
    const styles = 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

    import React, { Component } from 'react';
    import { StyleSheet, View, ScrollView } from 'react-native';
    import { Table, TableWrapper, Row } from 'react-native-table-component';
    
    export default class ExampleThree extends Component {
      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() {
        const state = this.state;
        const tableData = [];
        for (let i = 0; i < 30; i += 1) {
          const rowData = [];
          for (let j = 0; j < 9; j += 1) {
            rowData.push(`${i}${j}`);
          }
          tableData.push(rowData);
        }
    
        return (
          <View style={styles.container}>
            <ScrollView horizontal={true}>
              <View>
                <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                  <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>
                </Table>
                <ScrollView style={styles.dataWrapper}>
                  <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                    {
                      tableData.map((rowData, index) => (
                        <Row
                          key={index}
                          data={rowData}
                          widthArr={state.widthArr}
                          style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                          textStyle={styles.text}
                        />
                      ))
                    }
                  </Table>
                </ScrollView>
              </View>
            </ScrollView>
          </View>
        )
      }
    }
    
    const styles = 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

    import React, { Component } from 'react';
    import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
    import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
    
    export default class ExampleFour extends Component {
      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() {
        const state = this.state;
        const element = (data, index) => (
          <TouchableOpacity onPress={() => this._alertIndex(index)}>
            <View style={styles.btn}>
              <Text style={styles.btnText}>button</Text>
            </View>
          </TouchableOpacity>
        );
    
        return (
          <View style={styles.container}>
            <Table borderStyle={{borderColor: 'transparent'}}>
              <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
              {
                state.tableData.map((rowData, index) => (
                  <TableWrapper key={index} style={styles.row}>
                    {
                      rowData.map((cellData, cellIndex) => (
                        <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text}/>
                      ))
                    }
                  </TableWrapper>
                ))
              }
            </Table>
          </View>
        )
      }
    }
    
    const styles = 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

    import React, { Component } from 'react';
    import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
    import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-table-component';
    
    export default class ExampleFive extends Component {
      constructor(props) {
        super(props);
        const elementButton = (value) => (
          <TouchableOpacity onPress={() => this._alertIndex(value)}>
            <View style={styles.btn}>
              <Text style={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() {
        const state = this.state;
        return (
          <View style={styles.container}>
            <Table style={{flexDirection: 'row'}} borderStyle={{borderWidth: 1}}>
              {/* Left Wrapper */}
              <TableWrapper style={{width: 80}}>
                <Cell data="" style={styles.singleHead}/>
                <TableWrapper style={{flexDirection: 'row'}}>
                  <Col data={['H1', 'H2']} style={styles.head} heightArr={[60, 60]} textStyle={styles.text} />
                  <Col data={state.tableTitle} style={styles.title} heightArr={[30, 30, 30, 30]} textStyle={styles.titleText}></Col>
                </TableWrapper>
              </TableWrapper>
    
              {/* Right Wrapper */}
              <TableWrapper style={{flex:1}}>
                <Cols data={state.tableData} heightArr={[40, 30, 30, 30, 30]} textStyle={styles.text}/>
              </TableWrapper>
            </Table>
          </View>
        )
      }
    }
    
    const styles = 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.
    <ScrollView horizontal={true}>
      {/* If parent element is not Table component,please add the type of borderstyle. */}
      <TableWrapper borderStyle={{borderWidth: 2, borderColor: 'blue',}}>
        <Cols data={data} />
      </TableWrapper>
    </ScrollView>

    License

    MIT

    Install

    npm i react-native-table-component

    DownloadsWeekly Downloads

    11,137

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    34.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • gil2015