Как я могу обработать полученные данные, не используя таблицы для их форматирования? - PullRequest
Новая
       20

Как я могу обработать полученные данные, не используя таблицы для их форматирования?

0 голосов
/ 28 октября 2019

Итак, я пытаюсь выровнять свои извлеченные данные JSON.

Мне нужно выровнять данные по каждому заголовку атрибута без использования таблицы, как на рисунке ниже.

СТаблица Я могу это сделать, но без я не могу найти способ.

enter image description here

Мой пример таблицы: 

export default function UserDetails({ data }) {

 const classes = useStyles()

   return (
    <div>
      <h1>User Details</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">Name</TableCell>
            <TableCell align="left">description</TableCell>
            <TableCell align="left">email</TableCell>
            <TableCell align="left">group</TableCell>
            <TableCell align="left">sn</TableCell>
            <TableCell align="left">uid</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            {Object.entries(data).map(([key, value])=> (
              <TableCell align="left" key={key}> {value}</TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>


    </div>
   )
}

1 Ответ

0 голосов
/ 28 октября 2019

Я обнаружил, что могу использовать ListItem с @material-ui для достижения того же результата. Это было то, что я искал. С помощью некоторых CSS я могу сделать так, чтобы элементы отображались по горизонтали.

Вот код: 

import { makeStyles } from "@material-ui/core/styles"
import ListItem from "@material-ui/core/ListItem"
import List from "@material-ui/core/List"
import ListItemText from "@material-ui/core/ListItemText"
import Divider from "@material-ui/core/Divider"

const useStyles = makeStyles(theme => ({
  root: {
    display  : "flex",
    alignItems : "center",

  },
}))

export default function UserDetails({ data }) {

 const classes = useStyles()

   return (

    <div >
      <h1>User Details</h1>
        <List className={classes.root}>
            <ListItem > Cn </ListItem>
            <ListItem > Description</ListItem>
            <ListItem > Mail </ListItem>
            <ListItem > Ou </ListItem>
            <ListItem > Sn </ListItem>
            <ListItem > Uid </ListItem>
        </List>
    <Divider />
        <List className={classes.root}>
            {Object.entries(data).map(([key, value])=> (
            <ListItem align = "left ">{value} </ListItem>
             ))}
        </List>
    </div>
   )
}
...