I'm looking to organize my data into a table with two separate sections, one on the left and one on the right. For example, if I have 20 rows of data, I want to display the first 10 rows on the left side with headers and the remaining 10 rows on the right side with the same header as shown in the image below. Additionally, I would like to implement pagination for both tables. How can I achieve this?
Any help would be greatly appreciated. Thank you in advance.
tableData = [{name:'abc',phone:1111},{name:'xyz',phone:1111},{name:'mno',phone:1111},{name:'pqr',phone:1111}]<div class="row">
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-4">
<app-pagination [size]=" (tableData).length " [items]="Items "></app-pagination>
</div>
</div>