Как отформатировать (настроить) таблицы данных в реакции

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>