How can I show data in a table format in react native?

Question

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 above image?

Ananth Kamath · Accepted Answer · 2020-09-17 07:51:46Z

5

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

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

const MyComponent = () => (
  <DataTable>
    <DataTable.Header>
      <DataTable.Title
        sortDirection='descending'>Dessert</DataTable.Title>
      <DataTable.Title numeric>Calories</DataTable.Title>
      <DataTable.Title numeric>Fat (g)</DataTable.Title>
    </DataTable.Header>
    </DataTable> );

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

answered Sep 17, 2020 at 7:51

Ananth Kamath

6006 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Over a year ago

can you change the color of the arrow?

Ananth Kamath Over a year ago

I haven't explored that part. So I am not sure if we can change the colour. I was working on react native for a very short period of time and just for 1 project. So i guess you have to explore it yourself.

Selmi Karim · Accepted Answer · 2019-03-18 13:43:41Z

4

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

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: ['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 (
      <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 }
});

answered Mar 18, 2019 at 13:43

Selmi Karim

2,26517 silver badges24 bronze badges

2 Comments

Rama Over a year ago

Thanks @ Selmi for your solution, but i wanted to know how can i add a drop down icon next to header1 in table

0x01Brain Over a year ago

@Selmi Karim how to set custom font size for text shown in table?

Collectives™ on Stack Overflow

How can I show data in a table format in react native?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related