How Can I Show Data In A Table Format In React Native?

I need to show data in a Table format in my app. I want something like this' How can I add a dropdown icon next to the first header in the table and design my code similar to the

Solution 1:

You can use DataTable from react-native-paper library.

import { DataTable } from'react-native-paper';

constMyComponent = () => (
  <DataTable><DataTable.Header><DataTable.TitlesortDirection='descending'>Dessert</DataTable.Title><DataTable.Titlenumeric>Calories</DataTable.Title><DataTable.Titlenumeric>Fat (g)</DataTable.Title></DataTable.Header></DataTable> );

sortDirection='descending' will help you add drop down icon next to your header.

Solution 2:

try this package https://www.npmjs.com/package/react-native-table-component

importReact, { Component } from'react';
import { StyleSheet, View } from'react-native';
import { Table, Row, Rows } from'react-native-table-component';

exportdefaultclassExampleOneextendsComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Visite Date', 'Member', 'you ...', 'etc..'],
      tableData: [
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...']
      ]
    }
  }

  render() {
    const state = this.state;
    return (
      <Viewstyle={styles.container}><TableborderStyle={{borderWidth:2, borderColor: '#c8e1ff'}}><Rowdata={state.tableHead}style={styles.head}textStyle={styles.text}/><Rowsdata={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 }
});