How to make an array to output vertically in a table within a React Component?

Question

I have the following array of data:

var arr = [ [ 2, 3, 4, 5, 6, 7 ],
  [ 8, 9, 10, 11, 12, 13 ],
  [ 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25 ],
  [ 26, 27, 28, 29, 30, 31 ]];

I can output the data into a horizontal view, but would like to create a vertical one instead.

var Hello = React.createClass({
  tablerows: function() {
    return this.props.arr.map(rows => {
        var row = rows.map(cell => <td>{cell}</td>); 
        return(
        <tr>{row}</tr>
        );
    });
  },
  render: function() {
    return <table>{this.tablerows()}</table>;
  }
});

example: https://jsfiddle.net/69z2wepo/30476/

Nina Scholz · Accepted Answer · 2017-09-08 12:14:06Z

3

You could transform the array and build a new one with take the value at swapped indices.

var array = [ [ 2, 3, 4, 5, 6, 7 ], [ 8, 9, 10, 11, 12, 13 ], [ 14, 15, 16, 17, 18, 19 ], [ 20, 21, 22, 23, 24, 25 ], [ 26, 27, 28, 29, 30, 31 ]],
    result = array.reduce((r, a, i) =>
        (a.forEach((b, j) => (r[j] = r[j] || [])[i] = b), r), []);
    
console.log(result);

edited Sep 8, 2017 at 12:14

answered Sep 8, 2017 at 12:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Rajesh Dixit · Accepted Answer · 2017-09-08 12:28:23Z

2

You can transpose your "matrix" as follow

let arr = this.props.arr;
let transArr = arr[0].map( (_, c)  => arr.map(r => r[c]));
return transArr.map(rows => { ... })

Sample Code:

var arr = [ [ 2, 3, 4, 5, 6, 7 ],
  [ 8, 9, 10, 11, 12, 13 ],
  [ 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25 ],
  [ 26, 27, 28, 29, 30, 31 ],
  [ 32, 33, 34, 35, 36, 37 ],
  [ 38, 39, 40, 41, 42, 43 ],
  [ 44, 45, 46, 47, 48, 49 ],
  [ 50, 51, 52, 53, 54, 55 ],
  [ 56, 57, 58, 59, 60, 61 ],
  [ 62, 63, 64, 65, 66, 67 ],
  [ 68, 69, 70, 71, 72, 73 ],
  [ 74, 75, 76, 77, 78, 79 ],
  [ 80, 81, 82, 83, 84, 85 ],
  [ 86, 87, 88, 89, 90, 91 ],
  [ 92, 93, 94, 95, 96, 97 ],
  [ 98, 99, 100, 101, 102, 103 ],
  [ 104, 105, 106, 107, 108, 109 ] ];

var Hello = React.createClass({
  tablerows: function() {
    let arr = this.props.arr;
    let transArr = arr[0].map( (_, c)  => arr.map(r => r[c]));
  	return transArr.map(rows => {
    	var row = rows.map(cell => <td>{cell}</td>); 
    	return(
      	<tr>{row}</tr>
    	);
  	});
  },
  render: function() {
    return <table>{this.tablerows()}</table>;
  }
});

ReactDOM.render(
  <Hello arr={arr} />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Updated jsfiddle

edited Sep 8, 2017 at 12:28

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Sep 8, 2017 at 12:11

An Nguyen

1,47810 silver badges21 bronze badges

4 Comments

Rajesh Dixit Over a year ago

You can use stack snippet. Notice <> icon. Check Babel checkbox.

An Nguyen Over a year ago

@Rajesh: Thank you. I am personally don't like that stack snippet, it is harder to indent while using Tab. Is it mandatory for short code block ?

Rajesh Dixit Over a year ago

Nope. Its just that readers can test your code. If you don't like, you can either collapse it or you can share links of other sites with your code. Its just a good to have thing. If you don't think my edit is not required, feel free to revert it

An Nguyen Over a year ago

Good to know that, will try to remember next time :). And actually, your edit is very good for others to test the code, thank you.

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can try something like this:

Logic:

Loop over arr and get the max length, so you know the max number of columns.
Use this loop to create rows.
Now create another loop, where you will create td and use index from parent loop to fetch item.

var arr = [ [ 2, 3, 4, 5, 6, 7 ],
  [ 8, 9, 10, 11, 12, 13 ],
  [ 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25 ],
  [ 26, 27, 28, 29, 30, 31 ]];
  
var Hello = React.createClass({
  tablerows: function() {
    const max = Math.max.apply(null, this.props.arr.map(x => x.length));
    return Array.from({length: max}, function(item, index){
      return <tr>
        {
          arr.map(x => <td>{x[index]}</td>)
        }
      </tr>
    })
  },
  render: function() {
    return <table>{this.tablerows()}</table>;
  }
});

ReactDOM.render(<Hello arr={arr}/>, document.querySelector('.content'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class='content'></div>

Collectives™ on Stack Overflow

How to make an array to output vertically in a table within a React Component?

3 Answers 3

Comments

4 Comments

Logic:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Logic:

Comments

Your Answer

Sign up or log in

Post as a guest

Related