如何在列中显示表格

问题描述

我想知道是否有一些选项可以在 Y 轴上显示表格中的数据

<table >
                   
     <tr>
       <th>Week</th>
       <th>Day</th>
       <th>Lecture</th>
       <th>Exercise</th>
       <th>Date</th>
       <th>Name</th>
       <th>Time Finished</th>
        {this.props.global_grades.map((data)=> data.students.map((student,index)=> <th key={index}>{student.first_name}</th> ))}
     </tr>
                        
<tr>
   {this.props.global_grades.map((data)=> data.lectures.map((lecture,index)=> <td key={index}>{lecture.week} </td>))}
</tr>

</table>

此代码将显示行中的所有内容，但例如我需要像列一样显示第二行数据来自作为 json 的 react reducer，我必须遍历它。你有什么想法我该怎么做吗？

解决方法

您可以转换数组并使用交换索引处的值构建一个新数组。

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);

或者您可以按如下方式转置您的“矩阵”

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

更新https://jsfiddle.net/69z2wepo/85529/

html html-table yaxis