Is it possible to create a duplicate of a table with same continuous items?

user_16481300 0
Viewed 31

I want to create two tables, that contain the same array, but the second table contains the continuous items of the first table.

I am using Angular v.11 and Clarity for the projects. The table is build with:

<clr-dg-row *clrDgItems="let employee of employees" [clrDgItem]="employee">
    <clr-dg-cell>{{ employee.employeeId }}</clr-dg-cell>
</clr-dg-row>

[Example] First table has 5 rows of different fruits, second array has 5 rows of the next fruits in the array.

You are then able to click next slide on the bottom of the table, to get 10 next fruits.
That said, fruits 11-20 are going to show for the user.

Picture down below:

Two Tables with continuous items

angular arrays html json javascript
1 Answers

You could do something like this:

//First table
*clrDgItems="let employee of employees.filter((_,i) => return i <= firstTableMaxIndex)"

//Secondtable
*clrDgItems="let employee of employees.filter((_,i) => return i > firstTableMaxIndex && i <= secondTableMaxIndex)"

And then when you paginate a table you can change the values of firstTableMaxIndex and secondTableMaxIndex. For the reactivity to work as expected with paginating however, you'll need to use a custom pipe instead of filtering the array inline as above.

user_102055800
Related