在material-ui中显示html表格答案

【问题标题】：display html table in meterial-ui在material-ui中显示html表格
【发布时间】：2018-12-13 05:40:25
【问题描述】：

我在浏览器中使用这个材料-ui 代码显示问题列表：

<Paper className={classes.root} elevation={4}>
    <Typography type="title" className={classes.title}>
      All Issues
    </Typography>
    <List dense>
     {this.state.issues.map((item, i) => {
      return <Link target="_blank" to={item.issue_url} key={i}>
                <ListItem button>
                  <ListItemText primary={<div>
                                          <table>
                                            <tr>
                                              <td width="40">{item.issue_state}</td>
                                              <td width="40">{item.issue_number}</td>
                                              <td width="600">{item.issue_title}</td>
                                            </tr>
                                          </table>
                                         </div>}/>
                  <ListItemSecondaryAction>
                  <IconButton>
                      <ArrowForward/>
                  </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
             </Link>
           })
         }
    </List>
  </Paper>

如您所见，它还有一个标准的 HTML 表格。我的第一个问题是是否有更好的方法来做到这一点？可以用material-ui在列表中创建表结构吗？

第二个问题是如何在表格顶部添加一行列名？我尝试了tr/td 的几种组合，但最接近我想要的是在每个列表项上方都有一个标题行。

【问题讨论】：

表格标题使用th标签。你可以看看standard, accessible table markup。
你的第一个问题让我很困惑。 material-ui.com/demos/tables
抱歉，我的意思是我可以在列表中创建它，还是可以使用列表来显示我想要的数据？
还是不清楚。您可以将一个组件嵌入到另一个组件中，并将数据作为属性传递。

标签： javascript reactjs html-table material-ui

【解决方案1】：

这解决了我的问题：

<Paper className={classes.root} elevation={4}>
    <Typography type="title" className={classes.title}>
      All Issues
    </Typography>
    <Table className={classes.table}>
      <TableRow>
        <TableCell width="40">ISSUE STATE</TableCell>
        <TableCell width="40">ISSUE NUMBER</TableCell>
        <TableCell width="600">ISSUE TITLE</TableCell>
      </TableRow>
    </Table>
    <List dense>
     {this.state.issues.map((item, i) => {
      return <Link target="_blank" to={item.issue_url} key={i}>
                <ListItem button>
                  <ListItemText primary={<div>
                                          <Table className={classes.table}>
                                            <TableRow>
                                              <TableCell width="40">{item.issue_state}</TableCell>
                                              <TableCell width="40">{item.issue_number}</TableCell>
                                              <TableCell width="600">{item.issue_title}</TableCell>
                                            </TableRow>
                                          </Table>
                                         </div>}/>
                  <ListItemSecondaryAction>
                  <IconButton>
                      <ArrowForward/>
                  </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
             </Link>
           })
         }
    </List>
  </Paper>

如果有更好的方法来做到这一点，我很想听听。

【讨论】：