在Material-UI表中對齊TableHeader和TableBody數據

Question

我有此文件，該文件應免除從數據庫中提取的問題表。

該表確實顯示，但是所有問題dat都出現在ISSUE NUMBER列下，而不是每個數據項都出現在其正確的列名下。 輸出看起來像這樣：

如何編輯此表，以便所有數據都與正確的列名對齊？

下面是我的代碼：

const styles = theme => ({
  root: theme.mixins.gutters({
    padding: theme.spacing.unit,
    margin: theme.spacing.unit * 5
  }),
  title: {
    margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
    color: theme.palette.openTitle
  },
  bigAvatar: {
    width: 60,
    height: 60,
    margin: 10
  }
})

class Issues extends Component {
  state = {
    issues: [],
  }

  componentDidMount = () => {
    const jwt = auth.isAuthenticated()
    list({
      t: jwt.token
    }).then((data) => {
      if (data.error) {
        this.setState({ redirectToSignin: true })
      } else {
        this.setState({ issues: data })
      }
    })
  }

  render() {
    const { classes } = this.props
    const redirectToSignin = this.state.redirectToSignin
    if (redirectToSignin) {
      return <Redirect to='/signin' />
    }
    return (
      <Paper className={classes.root} elevation={4}>
        <Typography type="title" className={classes.title}>
          All Issues
            </Typography>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>ISSUE NUMBER</TableCell>
              <TableCell>ISSUE TITLE</TableCell>
              <TableCell>ISSUE URL</TableCell>
              <TableCell>PUBLIC/PRIVATE</TableCell>
              <TableCell>REPO</TableCell>
            </TableRow>
          </TableHead>
          <List dense>
            {this.state.issues.map((item, i) => {
              return <Link target="_blank" to={item.issue_url} key={i}>
                <ListItem button>
                  <ListItemText primary={<div>
                    <TableBody>
                      <TableRow>
                        <TableCell>{item.issue_number}</TableCell>
                        <TableCell>{item.issue_title}</TableCell>
                        <TableCell>{item.issue_url}</TableCell>
                        <TableCell>{item.issue_url.includes("github.com") ? 'Private'
                          : item.issue_url.includes("github.com") ? 'Public'
                            : "Stackoverflow"}</TableCell>
                        <TableCell>{item.issue_url.includes("sdk-go") ? 'sdk-go'
                          : item.issue_url.includes("sdk-java") ? 'sdk-java'
                            : item.issue_url.includes("sdk-js") ? 'sdk-js'
                              : item.issue_url.includes("sdk-python") ? 'sdk-python'
                                : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core'
                                  : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer'
                                    : item.issue_url.includes("issues/issues") ? 'issues/issues'
                                      : "Stackoverflow"}
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  </div>} />
                  <ListItemSecondaryAction>
                    <IconButton>
                      <ArrowForward />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
              </Link>
            })
            }
          </List>
        </Table>
      </Paper>
    )
  }
}

Issues.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(Issues)

如果我移動TableHead內部list標簽布局看起來稍微好一點，但TableBody數據不與排隊TableHeader數據：

<Table className={classes.table}>
        <List dense>
          <TableHead>
            <TableRow>
              <TableCell width="100" align="left">ISSUE NUMBER</TableCell>
              <TableCell align="left">ISSUE TITLE</TableCell>
              <TableCell align="left">ISSUE URL</TableCell>
              <TableCell align="left">PUBLIC/PRIVATE</TableCell>
              <TableCell align="left">REPO</TableCell>
            </TableRow>
          </TableHead>
          {this.state.issues.map((item, i) => {
            return <Link target="_blank" to={item.issue_url} key={i}>
                    <ListItem button>
                      <ListItemText primary={
                                                <TableBody>
                                                  <TableRow>
                                                    <TableCell width="100" align="left">{item.issue_number}</TableCell>
                                                    <TableCell align="left">{item.issue_url}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("github.com") ? 'Private' 
                                                                            : item.issue_url.includes("github.com") ? 'Public' 
                                                                            : "Stackoverflow"}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("sdk-go") ? 'sdk-go' 
                                                                            : item.issue_url.includes("sdk-java") ? 'sdk-java' 
                                                                            : item.issue_url.includes("sdk-js") ? 'sdk-js' 
                                                                            : item.issue_url.includes("sdk-python") ? 'sdk-python' 
                                                                            : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core' 
                                                                            : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer' 
                                                                            : item.issue_url.includes("issues/issues") ? 'issues/issues' 
                                                                            : "Stackoverflow"}
                                                    </TableCell>
                                                  </TableRow>
                                                </TableBody>
                                             }/>
                      <ListItemSecondaryAction>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton>
                      </ListItemSecondaryAction>
                    </ListItem>
                 </Link>
               })
             }
        </List>
        </Table>

Answer 1

默認情況下，material-ui使用'table'，'tr'，'th'等html元素。 這些元素之間不得包含非表元素。 就您而言，列表組件會創建破壞布局的元素。 我建議刪除列表組件，而不是在表格單元格中顯示箭頭。

這是有效的代碼示例：

<Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell align="left">ISSUE NUMBER</TableCell>
              <TableCell align="left">ISSUE TITLE</TableCell>
              <TableCell align="left">ISSUE URL</TableCell>
              <TableCell align="left">PUBLIC/PRIVATE</TableCell>
              <TableCell align="left">REPO</TableCell>
            </TableRow>
          </TableHead>
          {this.state.issues.map((item, i) => {
                 return                               <TableBody>
                                                  <TableRow key={i}>
                                                    <TableCell align="left">{item.issue_number}</TableCell>
                                                    <TableCell align="left">{item.issue_title}</TableCell>
                                                    <TableCell align="left">{item.issue_url}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("github.com") ? 'Private' 
                                                                            : item.issue_url.includes("github.com") ? 'Public' 
                                                                            : "Stackoverflow"}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("sdk-go") ? 'sdk-go' 
                                                                            : item.issue_url.includes("sdk-java") ? 'sdk-java' 
                                                                            : item.issue_url.includes("sdk-js") ? 'sdk-js' 
                                                                            : item.issue_url.includes("sdk-python") ? 'sdk-python' 
                                                                            : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core' 
                                                                            : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer' 
                                                                            : item.issue_url.includes("issues/issues") ? 'issues/issues' 
                                                                            : "Stackoverflow"}
                                                    </TableCell>
                                                    <TableCell>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton></TableCell>
                                                  </TableRow>
                                                </TableBody>
               })
             }
        </Table>