datagrid with pagination disappears within tab-content

[symeonmattes]

Describe the bug

I'm using clr-tabs, clr-tab, clr-datagrid, clr-dg-pagination to create a datagird inside a clr-tab. When the clr-datagrid is not the active tab on load, on activation doesn't not render.

However if it's on first tab it works fine

How to reproduce

Not working Tab2 datagrid Not working datagrid. Just press Tab2->Tab1->Tab2 again

Working Tab2 datagrid as active tab Working Datagrid. Just press Tab1->Tab2 again (You might need to refresh the page)

Expected behavior

On Tab change datagrid and pagination should work as expected

Versions

Clarity project:

• [ 5.4.0] Clarity Core
• [ 5.4.0] Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• [ X] v5.x

Framework:

• [X ] Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 12

Device:

• Type: [HP i7]
• OS: [Windows]
• Browser [chrome]
• Version [ 91.0.4472.164 ]

[hippee-lee]

This can be accomplished by using the de-sugared syntax of the *clrIfActive structural directive.

  <clr-tab>
    <button type="button" clrTabLink>Tab2</button>
    <ng-template [(clrIfActive)]="showDatagrid">
      <clr-tab-content>
        Content Tab2
        <clr-datagrid>
          <clr-dg-column>User ID</clr-dg-column>
          <clr-dg-column>First Name</clr-dg-column>
          <clr-dg-column>Last Name</clr-dg-column>
          <clr-dg-column>Email</clr-dg-column>
          <clr-dg-row *clrDgItems="let user of users">
            <clr-dg-cell>{{user.id}}</clr-dg-cell>
            <clr-dg-cell>{{user.first_name}}</clr-dg-cell>
            <clr-dg-cell>{{user.last_name}}</clr-dg-cell>
            <clr-dg-cell>{{user.email}}</clr-dg-cell>
          </clr-dg-row>
          <clr-dg-footer>
            {{users.length}} users
            <clr-dg-pagination></clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </clr-tab-content>
    </ng-template>
  </clr-tab>

Here is an example.

I am going to convert this into a discussion, it isn't an issue with Clarity and it may be helpful to others with the same question.

[BojoDimov]

Hello,
Can you please explain why is this happening? I have a similar issue where if the datagrid is not visible when created its height will be set to 0px. After that when it should become visible, it isn't. For me, this is an issue, and we workaround it using height: 100% !important.

[hippee-lee]

If the datagrid isn't visible, the internal height calculation will always be 0. For the original tabs question above, the use of *clrIfActive is the only case we support.

For usage outside of datagrid *ngIf is the recommended way to control when it gets rendered so that height can be calculated internally at the correct time.

[symeonmattes]

I have already tried it with clrActive but it doesn't keep pagination. If I go to page 3 and change tab and return back it starts from page 1 again

[symeonmattes]

Actually there are properties to define the start-page and page-size but you need to keep somewhere the state

<clr-dg-pagination #pagination [clrDgPageSize]="(pgProps$|async).size" [clrDgPage]="(pgProps$|async).start" (clrDgPageChange)="onPgChange(pagination)">
			<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
			{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} items
</clr-dg-pagination>

[hippee-lee]

You are correct. clrIfActive destroys the DOM and the Datagrid will be re-created each time tab 2 is activated. The application needs to keep track of the pagination and bind to the pagination with the correct state if it needs to remember where the user was.