Vue-good-table: Pagination is buggy for a Grouped Table

[sobiero]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

What version are you using? 2.19.3
VueJs 2.6.11

What browser? Firefox Developer Edition v77.0b9

Expected Behavior

Pagination to work correctly.

Actual Behavior

1. When you change the 'per page' option to 10, 20, 50, All etc. , some records are truncated from the table and are not available even on 'prev' and 'next' pages.
2. Sometimes the group header is counted as part of the rows on page one, then on subsequent pages, it is not.
3. The show 'All' option is completely broken.

Steps to Reproduce the Problem

Please detail your steps here

1. Create a grouped table with more than 20 records
2. Load all the data to the table
3. Enable pagination
4. Play around with 'per page' option and the 'next' & 'prev' buttons

jsfiddle

Please see sandbox below
https://codesandbox.io/s/musing-chaplygin-mo6kg?file=/src/components/HelloWorld.vue

[opsydev]

I'm running into a similar problem. The pagination doesn't seem to take header rows into account.

Steps to Reproduce the Problem

1. Have a Grouped table. For ex. two groups with 5 rows each.
2. Enable pagination and set the default to 10 rows per page.
3. Load up the table.

The problem:

The pagination shows 1 - 10 of 10 with the prev and next button disabled. But there are only 8 items shown. With the Headers from the two groups using up the remaining two slots.

With no other page to go to the only way a user can actually see the two missing items is by changing the Per page count to something higher or lower.

I think the issue is how the totalRowCount is calculated in Table.vue

each(this.processedRows, (headerRow) => {
        total += headerRow.children ? headerRow.children.length : 0;
      });

This only counts the children and not the header itself.

I'm not sure if I'm missing anything here.

[opsydev]

Quick test changing these function to just add 1 seems to fix the issue
totalRowCount() { let total = 0; each(this.processedRows, (headerRow) => { total += headerRow.children ? headerRow.children.length + 1 : 1; }); return total; }, totalPageRowCount() { let total = 0; each(this.paginated, (headerRow) => { total += headerRow.children ? headerRow.children.length + 1 : 1; }); return total; },

[Sell24]

I was having this issue where the page data and page counts were off. I went through the code line by line and realized that I had missed adding the mode="remote" prop and everything works now. So just double-check you have that prop.

[sobiero]

I was having this issue where the page data and page counts were off. I went through the code line by line and realized that I had missed adding the mode="remote" prop and everything works now. So just double-check you have that prop.

@Sell24 I thought mode="remote" is only for when you want to use server-side pagination...

[Sell24]

@sobiero It is, but since you did not mention where you were getting your data I thought I would mention it since the same thing was happening to me

[saspallow]

I found the same problem. The rows per page are 10, But showing just 9 rows

https://jsfiddle.net/aeczntyu/1/

[yashpalchhajer]

Hi,

as I can see in this this repository history, this change is merged.
But can you suggest how can I fetch this change in my already install project's library.

Even I tried to uninstalled vue-good-table from project, and clear npm cache from machine and again re-installed vue-good-table.
but in src/components/Table.vue file this change did not reflected.

Can any one suggests can I fetch or re-install vue-good-table.

[sobiero]

Hi,

as I can see in this this repository history, this change is merged.
But can you suggest how can I fetch this change in my already install project's library.

Even I tried to uninstalled vue-good-table from project, and clear npm cache from machine and again re-installed vue-good-table.
but in src/components/Table.vue file this change did not reflected.

Can any one suggests can I fetch or re-install vue-good-table.

@yashpalchhajer Did you find a solution for this? This change does not seem to have been effected in master

[yashpalchhajer]

Hi,
as I can see in this this repository history, this change is merged.
But can you suggest how can I fetch this change in my already install project's library.
Even I tried to uninstalled vue-good-table from project, and clear npm cache from machine and again re-installed vue-good-table.
but in src/components/Table.vue file this change did not reflected.
Can any one suggests can I fetch or re-install vue-good-table.

@yashpalchhajer Did you find a solution for this? This change does not seem to have been effected in master

no still I did not found any way to use this change in my code.

[Sell24]

If you have reinstalled the package and it doesnt work then that means that the package with this change has not been released yet. So just merge the changes in your code yourself in your local code until the package is released or fork it and create your own version.