How can i format my data like this in table - html

Question

I have a dynamic data where they have the same floornumber, so i wanna do is every data have a same number will be under a row on their floor. I want to make every row theirs a row, and then under all of that is their units. Is their any library for that? Thanks
const data = [
{floornumber: 1, unitname: '101', unitype: 'basic'},
{floornumber: 1, unitname: '102', unitype: 'basic'},
{floornumber: 1, unitname: '103', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'}
]
<table>
<thead>
<th>
Floor
</th>
<th>
Unit Name
</th>
<th>
Unit Type
</th>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>blank</td>
<td>101</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>102</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>103</td>
<td>Basic</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>blank</td>
<td>203</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>203</td>
<td>Basic</td>
</tr>
</tbody>
</table>

Answer 1

I don't think there is a library for this because it is a very unique way to present the data.
You must make sure, your data is sorted by floor number. Then I would read the first line and create row set a:
<tr>
<td>1</td>
</tr>
<tr>
<td>blank</td>
<td>101</td>
<td>Basic</td>
</tr>
loop through your data and create row set b:
<tr>
<td>blank</td>
<td>102</td>
<td>Basic</td>
</tr>
until the floor number changes. In this case create row set a again and so on until you are at the end of the data.