Cara menggunakan react-native-render-html not working

Question

We will create a responsive table in React Native application, this table will be horizontally and vertically scrollable. Moreover, the Header of the table will be fixed while scrolling the table vertically or horizontally.

Table of Contents Show

Prerequisite
Initiate React Native Project
Install React Native Table Component Plugin
Build Simple Table Component in React Native
Style Table Component
Fixed Header + Horizontal & Vertical Scrollable Table Example
Table Properties
Recommended Posts:

To create the table component, we will be using the react-native-table-component plugin, Its a simple table component for React Native applications.

Let’s start building table component.

Prerequisite

We need following frameworks, tools, and packages.

Node
NPM
React-Native
React-Native CLI
Text Editor
Android Studio

Initiate React Native Project

Install the latest React Native CLI by typing the below command in the terminal.

npm install -g react-native-cli

Type command in the terminal to Install new React Native application.

react-native init ReactNativeTable

Enter inside the project folder.

cd ReactNativeTable

Install React Native Table Component Plugin

Let’s install the react-native-table-component package via npm by running the following command in the terminal.

npm i react-native-table-component

Now, we are all set to start creating Android and iOS Table in React Native application.

Build Simple Table Component in React Native

To build a simple table component in React Native, we have to import the following services in the top section of the App.js file.

Define constructor(props), super(props), and state inside the export default class App. Inside the state, we declare the Table’s header and dummy data that we will display in the Table.

export default class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      HeadTable: ['Head1', 'Head2', 'Head3', 'Head4', 'Head5'],
      DataTable: [
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5']
      ]
    }
  }
}

Next, we will declare the render() method inside the export default class App. Here, we set the table view and add custom styling classes to style the table. We will also inject the data in the table and set the table header.

render() {
  const state = this.state;
  return (
    <View style={styles.container}>
      <Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
        <Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
        <Rows data={state.DataTable} textStyle={styles.TableText}/>
      </Table>
    </View>
  )
}

We have created the basic table in React Native and here is the table component code in App.js.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      HeadTable: ['Head1', 'Head2', 'Head3', 'Head4', 'Head5'],
      DataTable: [
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5']
      ]
    }
  }
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
          <Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
          <Rows data={state.DataTable} textStyle={styles.TableText}/>
        </Table>
      </View>
    )
  }
}

Style Table Component

Now, we will learn on how to style table component. We have already imported StyleSheet API from from ‘react-native’ and defined the CSS class to style the table component similar like this style={styles.HeadStyle}.

Here is the View we have defined to display and style the table.

<View style={styles.container}>
<Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
  <Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
  <Rows data={state.DataTable} textStyle={styles.TableText}/>
</Table>
</View>

Place the following code below the export default class App extends Component.

const styles = StyleSheet.create({
  container: { 
    flex: 1,
    padding: 18,
    paddingTop: 35,
    backgroundColor: '#ffffff' 
  },
  HeadStyle: { 
    height: 50,
    alignContent: "center",
    backgroundColor: '#ffe0f0'
  },
  TableText: { 
    margin: 10
  }
});

Check out the final code below.

// App.js
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      HeadTable: ['Head1', 'Head2', 'Head3', 'Head4', 'Head5'],
      DataTable: [
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5'],
        ['a', 'b', 'c', 'd', 'e'],
        ['1', '2', '3', '4', '5']
      ]
    }
  }
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
          <Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
          <Rows data={state.DataTable} textStyle={styles.TableText}/>
        </Table>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: { 
    flex: 1,
    padding: 18,
    paddingTop: 35,
    backgroundColor: '#ffffff' 
  },
  HeadStyle: { 
    height: 50,
    alignContent: "center",
    backgroundColor: '#ffe0f0'
  },
  TableText: { 
    margin: 10
  }
});

Now, we will create a Table layout that supports horizontal & vertical scrolling and fixed header. This table will be a responsive table as well due to its adaptive approach that enhances the better user experience to visualise the data in mobile devices .

Here is the final code for Responsive Table in React Native.

react-native init ReactNativeTable

0

Import ScrollView API in the header, we are populating some data into the table. All the table code goes inside the ScrollView component and set the horizontal property to true.

Table Properties

We have used the following properties above to configure data table in React Native application.

Data: Its an Array type of data that is displayed in the Table.
flexArr: It represents Flex value per column, and Its a type of Array.
Style: To add style via CSS for the container.
textStyle: Type of Style It includes the styling in the Table’s Cell fonts.
borderStyle: Type of Object that adds border line width and color in the Table.
heightArr: It adds the height to each column, and its a type of Array.
widthArr: It adds the width to each column, and its a type of Array.

Conclusion

Finally, we have finished Table tutorial in React Native. We have learned how to create a simple table component and populate data in it.

I hope you loved this tutorial. Please share it with others. Get the complete code for this tutorial on this GitHub repository.

Have a good day and Happy coding!

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Twitter GitHub