Creating a table in React Native

Tables in React Native are used to display structured data in rows and columns, making it easier to present organized information. They are commonly used in apps for displaying reports, lists, and comparison data.

• Tables can be created using core components like View, Text, and FlatList to represent rows and columns.
• Each row is typically a View container, and each column is represented using Text components.
• Tables help improve data readability and organization in mobile applications.

Approach:

• We will create a simple table in React Native.
• The table will be built using the react-native-paper library.
• It will display a person’s name, age, and favorite food details.

If building complex layouts is challenging, the React Native Course can help. It covers essential design patterns and practical techniques for creating beautiful, responsive layouts.

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Start the server using the following:

npx react-native run-android

Step 4: Now go to your project and create a components folder. Inside components folder, create a file DataTable.js.

Project Structure

Implementation:

In DataTable.js, we have imported DataTable component from react-native-paper library.

• To Display column name, we will use DataTable.Header component.
• To Show title in table header, we have DataTable.Title component.
• To Display row inside a table, we will use DataTable.Row component.
• To show cell inside a table, we have DataTable.Cell component.

Filename: DataTable.js

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

const TableExample = () => {
  return (
    <DataTable style={styles.container}>
      <DataTable.Header style={styles.tableHeader}>
        <DataTable.Title>Name</DataTable.Title>
        <DataTable.Title>Favourite Food</DataTable.Title>
        <DataTable.Title>Age</DataTable.Title>
      </DataTable.Header>
      <DataTable.Row>
        <DataTable.Cell>Radhika</DataTable.Cell>
        <DataTable.Cell>Dosa</DataTable.Cell>
        <DataTable.Cell>23</DataTable.Cell>
      </DataTable.Row>

      <DataTable.Row>
        <DataTable.Cell>Krishna</DataTable.Cell>
        <DataTable.Cell>Uttapam</DataTable.Cell>
        <DataTable.Cell>26</DataTable.Cell>
      </DataTable.Row>
      <DataTable.Row>
        <DataTable.Cell>Vanshika</DataTable.Cell>
        <DataTable.Cell>Brownie</DataTable.Cell>
        <DataTable.Cell>20</DataTable.Cell>
      </DataTable.Row>
      <DataTable.Row>
        <DataTable.Cell>Teena</DataTable.Cell>
        <DataTable.Cell>Pizza</DataTable.Cell>
        <DataTable.Cell>24</DataTable.Cell>
      </DataTable.Row>
    </DataTable>
  );
};

export default TableExample;

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  tableHeader: {
    backgroundColor: '#DCDCDC',
  },
});

Filename: App.js

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';

import TableExample from './components/DataTable';

const App: () => Node = () => {
  return (
    <View>
      <TableExample />
    </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: