CODEWITHSUNDEEP
react-native
Alfario Eka Putra
Alfario Eka Putra

Reputation: 31

react native Table GridView

how to build table gridview in react native like in picture or in code snippet

enter image description here

<table border=1>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Upvotes: 3

Views: 5607

Answers (2)

Shubhnik Singh
Shubhnik Singh

Reputation: 1329

import React from "react";
import { registerComponent } from "react-native-playground";
import { StatusBar, StyleSheet, Text, View } from "react-native";

class App extends React.Component {
render() {
    return (
        <View>
            <View
                style={{
                    height: 50,
                    flexDirection: "row",
                    flex: 1,
                    borderWidth: 1,
                    padding: 2,
                    justifyContent: "space-around"
                }}
            >
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Jill</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Smith</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>50</Text>
                </View>
            </View>
            <View
                style={{
                    height: 50,
                    flexDirection: "row",
                    flex: 1,
                    borderWidth: 1,
                    padding: 2,
                    justifyContent: "space-around"
                }}
            >
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Eve</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Jackson</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>94</Text>
                </View>
            </View>
            <View
                style={{
                    height: 50,
                    flexDirection: "row",
                    flex: 1,
                    borderWidth: 1,
                    padding: 2,
                    justifyContent: "space-around"
                }}
            >
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>First Name</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Last Name</Text>
                </View>
                <View
                    style={{
                        flex: 1,
                        borderWidth: 1,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                >
                    <Text>Age</Text>
                </View>
            </View>
        </View>
    );
}
}
registerComponent(App);

Here's the working code https://rnplay.org/apps/e3MZAw

Upvotes: 0

binchik
binchik

Reputation: 919

You can use ListView component, the first row would be your header (renderHeader), others are rows (renderRow).

Both row and header would be the same component containing a parent View with flexDirection: 'row' with 4 Text components. Each Text component would have a flex: 1 if you want them to be of the same widths.

Upvotes: 2

Related Questions