У меня есть этот файл, который должен отображать таблицу проблем, которые извлекаются из базы данных.
Таблица отображается, но все данные о проблемах отображаются в столбце 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>
