如何在不使用表格格式化的情况下呈现获取的数据？

Posted 2023-03-06

【中文标题】如何在不使用表格格式化的情况下呈现获取的数据？

【英文标题】：How can I render my fetched data without using tables to format it?

【发布时间】：2020-02-23 15:56:38

【问题描述】：

所以我正在尝试对齐我获取的 JSON 数据。

我需要的是使数据与每个属性标题对齐，而不使用下图所示的表格。

有一张桌子我可以做到，但没有我似乎找不到办法。

我的表格示例：

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

【问题讨论】：

为什么要渲染没有表格的表格？看起来像是语义上的事情。

另外，如果您坚持不使用表格，如果您将表格分解为多个单元格，那么我敢肯定（与一些非常简单的 CSS）你可以弄清楚如何以明显的表格格式呈现数据。虽然就像@FedericoklezCulloca 所说，如果它是一个数据表，只需将其呈现为一个表

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

我同意@FedericoklezCulloca 的观点，但是如果您仍然认为自己不想使用表格，请使用 flexbox 构建自己的表格，只需 google 'flexbox tables'

您可以使用 css 的显示表格和表格单元格属性来完成，但这需要更多的代码，而不是简单地使用 html 表格

【参考方案1】：

我发现我可以使用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>
   )