Remove empty rows in data-table angular

Question

I am new to angular js. I am working on a project with listing table of data from API. For this, I am using the library. It works fine. But if there are 25 entries and when i set limit to 10 and go to the third page its showing table with 10 rows with 5 rows empty. I want to remove these empty rows. Please help.

myclass.html

<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
    <data-table id="persons-grid"
        headerTitle="Employees"
        [items]="items"
        [itemCount]="itemCount"
        (reload)="reloadItems($event)"

        (rowClick)="rowClick($event)"
        (rowDoubleClick)="rowDoubleClick($event)"
        [rowTooltip]="rowTooltip"
        >
        <data-table-column
            [property]="'name'"
            [header]="'Name'"
            [sortable]="true"
            [resizable]="true">
        </data-table-column>
        <data-table-column
            [property]="'date'"
            [header]="'Date'"
            [sortable]="true">
            <template #dataTableCell let-item="item">
                <span>{{item.date | date:'yyyy-MM-dd'}}</span>
            </template>
        </data-table-column>
        <data-table-column
            property="phoneNumber"
            header="Phone number"
            width="150px">
        </data-table-column>
        <data-table-column
            [property]="'jobTitle'"
            [header]="'Job title'"
            [visible]="false">
        </data-table-column>
        <data-table-column
            [property]="'active'"
            [header]="'Active'"
            [width]="100"
            [resizable]="true">
            <template #dataTableHeader let-item="item">
                <span style="color: rgb(232, 0, 0)">Active</span>
            </template>
            <template #dataTableCell let-item="item">
                <span style="color: grey">
                <span class="glyphicon glyphicon-ok" *ngIf="item.active"></span>
                <span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span>
                </span>
            </template>
        </data-table-column>
    </data-table>
</div>

Attaching the screen shot for the reference.

try adding [substituteRows]="false" in <data-table> tag and let me know if solves the issue — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 17, 2017 at 5:21
i will post an answer ,please mark it so that others gets benefited — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 17, 2017 at 6:26

Vikhyath Maiya · Accepted Answer · 2017-08-17 06:27:30Z

8

add [substituteRows]="false"

in tag.It will solve the issue.

answered Aug 17, 2017 at 6:27

Vikhyath Maiya

3,2123 gold badges39 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove empty rows in data-table angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related