отображать HTML-таблицу в Meterial-UI - PullRequest
Новая
       10

отображать HTML-таблицу в Meterial-UI

0 голосов
/ 12 декабря 2018

Я отображаю список проблем в своем браузере с этим кодом материала-интерфейса: 

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

1 Ответ

0 голосов
/ 13 декабря 2018

Это решило мою проблему: 

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

Если есть лучший способ сделать это, я бы очень хотел это услышать.

...