Setting up a table layout in React Native

user_3059274 0
Viewed 95695

I'm transitioning a React project into React Native and need help setting up a grid layout in React Native. I want to set up a 5-col by x-row (number of rows may vary) view. I've played around with the react-native-tableview-simple package, but I can't specify the span of a cell. I've also tried the react-native-flexbox-grid package, which I'm able to set up columns, but I'm still not able to set the span-width of a specific cell. I wonder if there's anything I can use.

For reference, I would like my table to look something along the lines like this:

     |Col 1|Col 2|Col 3|Col 4|Col 5|
     |------------------------------
Row 1|     Text        | Yes |  No | 
     |------------------------------
Row 2|     Text        | Yes |  No | 
     |------------------------------
Row 3|     Text        |  Dropdown |
react-native
4 Answers

After looking here for answers I discovered a really great library that behaves much like Bootstrap tables. I have found layout with React Native very challenging but this library delivers predictable layout results.

React Native Easy Grid

I agree that basic flex tables should be built in to React Native but until they are this library worked great for me.

user_4383220

Though it is an old post but I was looking for something similar asked in the question,

I have brainstormed and havoked the internet for the solution and the best solution I got was to import the react-native-table-component package to my project and prepare a decent table layout for my application to display data. There might be many more souls figuring out a way to do this and may I recommend this link to all your answers:This link is the npm package installer link which have explanation to all the code and have examples

user_110450820

Using functional components:

(Specify the number of rows and columns in the array)

Create a Row component

function Row({ column }) {  
  return (
    <View style={styles.rowStyle}>
      {column.map((data) => (
        <Cell data={data} />
      ))}
    </View>
 );
}

Create a Cell component

function Cell({ data }) {
  return (
    <View style={styles.cellStyle}>
      <Text>{data}</Text>
    </View>
  );
}

Create a Grid component

function Grid() {
  const data = [
    [15, 14, 13, 12],
    [11, 10, 9, 8],
    [7, 6, 5, 4],
    [0, 1, 2, 3],
  ];
  return (
    <View style={styles.gridContainer}>
      {data.map((column) => (
        <Row column={column} />
      ))}
    </View>
  );
}

Style the components:

const styles = StyleSheet.create({
  gridContainer: {
      width: 220,
  },
  rowStyle: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
  cellStyle: {
    flex: 1,
    margin: 10,
  },
});
user_63640120
Related