Question

我是新来的反应者和数据表，目前正在从事我的最后一年的项目我已经检索了数据并设法将数据填充到数据表中，但是不知道如何格式化它。

如何格式化数据表：

代码：https://codesandbox.io/s/ry6910y4jn?fontsize=14

任何建议提示都会有所帮助，谢谢。

Answer 1

尝试通过运行以下代码片段来尝试一下。诀窍是使用rowspan。

也就是说，使用React渲染多行时，幼稚的方法可能类似于：

const renderMultiRow = (code, date, rice, wheat, jaggery) => {
  return (
   <React.Fragment>
     <tr>
       <td rowspan="2">{code}</td>
       <td rowspan="2">{date}</td>
       <td>Stock</td>
       <td>{rice.stock}</td>
       <td>{wheat.stock}</td>
       <td>{jaggery.stock}</td>
     </tr>
     <tr>
       <td>Daily Use</td>
       <td>{rice.use}</td>
       <td>{wheat.stock}</td>
       <td>{jaggery.stock}</td>
     </tr>
   <React.Fragment>
  )
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

<table>
  <thead>
    <th>Code</th>
    <th>Date</th>
    <th>Category</th>
    <th>Rice</th>
    <th>Wheat</th>
    <th>Jaggery</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1234</td>
      <td rowspan="2">2019-05-11</td>
      <td>Stock</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Daily Use</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">5678</td>
      <td rowspan="2">2019-05-12</td>
      <td>Stock</td>
      <td>30</td>
      <td>30</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Daily Use</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

如何在React中格式化（自定义）数据表

1 个答案: