carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
599 stars 177 forks source link

[CvDataTable] pagination + selected items #1078

Open rafaelmaiach opened 3 years ago

rafaelmaiach commented 3 years ago

[CvDataTable]: bug on pagination + selected items

Detailed description

Changing pages makes the selected items lose track.

Describe in detail the issue you're having.

Enables the batch action, as the CvDataTableRow key, I chose the key to be row[0] that is my table unique information. I select all the values on the displayed data and change to another page and go back to the previous page. The selected values are not marked as checked anymore. PS: this one can be a bug on my implementation. I'll leave some screenshots if it's from my side and someone can help me with the problem.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

CvDataTable + CvPagination + CvCheckbox

What did you expect to happen? What happened instead? What would you like to see changed?

Pagination and Select items working

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

"@carbon/vue": "2.34.1" "carbon-components": "10.24.0"

Additional information

image

rafaelmaiach commented 3 years ago

A workaround I made on my side:

image

Before adding to my code, I tested directly on the carbon component by:

1) change the @change on cv-pagination to run a method `onPagination`
2) On the new method onPagination, I emitted the `pagination` event, to keep working as before, but I've also added a new line.
3) This new line is the following code:
this.$nextTick(() => {
   this.updateRowsSelected()
});

Btw, I needed to add it on onSearch as well to work with searches

image

melnaeem commented 2 years ago

A workaround I made on my side:

image

Before adding to my code, I tested directly on the carbon component by:

1) change the @change on cv-pagination to run a method `onPagination`
2) On the new method onPagination, I emitted the `pagination` event, to keep working as before, but I've also added a new line.
3) This new line is the following code:
this.$nextTick(() => {
   this.updateRowsSelected()
});

Btw, I needed to add it on onSearch as well to work with searches

image

This saved my day, thank you

github-actions[bot] commented 3 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.