Ngx-datatable: Is it possible to Get Current page Data in ngx data table?

[vivek-ealumalai]

Hi All,

is there a way to get all the visible rows in current page.
say for example i have 10 pages with 10 rows in each page.
on click of a button i need to see all rows visible in the current page

Thanks in advance!
Vivek

[TangTing528]

Hi, you can get the data on current page by table.bodyComponent.rowIndexes. It will return a map with data on current page.

@ViewChild(DatatableComponent) table: DatatableComponent;
Array.from(this.table.bodyComponent.rowIndexes.keys()) will return the data as array.

Hope it will help you.

[vivek-ealumalai]

Yeah it worked thanks

[dp1127]

Yes it works Thank you @TangTing528

[LuisMoralesMx]

This is not working for me with version 17.0.0. The following code returns a WeakMap:
this.table.bodyComponent.rowIndexes.keys()

And when trying to convert it into an array it throws an exception, any idea how solve this problem?

I need to display the sum of the visible rows of a column, but that code does not seem to work for me.

As you can see in the attached screenshot, it returns a WeakMap and keys() is undefined.

Thanks!

EDIT. 06/01/2020.

Just found out the visible row data is available in array format easy to manipulate at:
this.table.bodyComponent.temp

Cheers.

[giovannidias1]

have any way to get the sorted data from the entire table?

[TangTing528]

have any way to get the sorted data from the entire table?

this.table.bodyComponent.rows

[giovannidias1]

@TangTing528 my viewChild just return undefined @ViewChild('table') table: DatatableComponent;

      <ngx-datatable
        class="bootstrap"
        [rows]="usersFiltered"
        [headerHeight]="40"
        [footerHeight]="40"
        [limit]="50"
        [columnMode]="ColumnMode.flex"
        rowHeight="auto"
        #table <--- this
      >
            [...]

[TangTing528]

Could you mock up the component in StackBlitz?

@TangTing528 my viewChild just return undefined @ViewChild('table') table: DatatableComponent;

      <ngx-datatable
        class="bootstrap"
        [rows]="usersFiltered"
        [headerHeight]="40"
        [footerHeight]="40"
        [limit]="50"
        [columnMode]="ColumnMode.flex"
        rowHeight="auto"
        #table <--- this
      >
            [...]

[giovannidias1]

Could you mock up the component in StackBlitz?

@TangTing528 my viewChild just return undefined @ViewChild('table') table: DatatableComponent;

      <ngx-datatable
        class="bootstrap"
        [rows]="usersFiltered"
        [headerHeight]="40"
        [footerHeight]="40"
        [limit]="50"
        [columnMode]="ColumnMode.flex"
        rowHeight="auto"
        #table <--- this
      >
            [...]

@TangTing528 here: https://stackblitz.com/edit/angular-ivy-toqxlq

[TangTing528]

Could you mock up the component in StackBlitz?

@TangTing528 my viewChild just return undefined @ViewChild('table') table: DatatableComponent;

      <ngx-datatable
        class="bootstrap"
        [rows]="usersFiltered"
        [headerHeight]="40"
        [footerHeight]="40"
        [limit]="50"
        [columnMode]="ColumnMode.flex"
        rowHeight="auto"
        #table <--- this
      >
            [...]

@TangTing528 here: https://stackblitz.com/edit/angular-ivy-toqxlq

Table was not ready in ngOnInit. Need to wait view ready.
Try:
ngAfterViewInit(): void {
console.log(this.table.bodyComponent.rows);
}