How to format (customize) data tables in react - reactjs

Question

I am new to react and datatables and currently working on my final year project
I have retrieved the data and managed to populate data into datatable but don't know how to format it.
How to format datatable like this:
image
Code: https://codesandbox.io/s/ry6910y4jn?fontsize=14
Any suggestion hint would be helpful, thanks in advance.

Answer 1

Try giving this a shot by running the snippet below. The trick is to use rowspan.
That said, using React to render your multi-row, a naive approach might look something like:
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>