search

carbon-design-system / carbon-components-vue

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

Sorting Issue with CvDataTable in Carbon Design System + Vue 3 #1560

Closed hgwrtsdev closed 5 months ago

hgwrtsdev commented 7 months ago

Hi Carbon Design System team,

Description: I am urgently reaching out regarding a critical issue with the CvDataTable component in the Carbon Design System + Vue 3. The sorting functionality, expected to be triggered when clicking on the column headers, is malfunctioning. Despite the sorting icons transitioning, the data remains unsorted.

Steps to Reproduce:

  1. Visit the official documentation/demo for Carbon Design System + Vue 3: https://vue.carbondesignsystem.com/.
  2. Navigate to the CvDataTable section.
  3. Click on the column headers to trigger sorting.

Expected Behavior: The data in the CvDataTable should be sorted based on the selected column.

Actual Behavior: The sorting icons transition, but the data does not get sorted.

Environment: Carbon Components version: ^10.58.10 @carbon/vue version: ^3.0.9 Vue version: ^3.2.13

Additional Context: This sorting functionality is crucial for our project, and we rely heavily on the CvDataTable component. Unfortunately, downgrading to version 2+ is not a viable solution due to compatibility issues with other dependencies.

I appreciate your attention to this matter, and I understand the importance of ensuring a smooth experience with Carbon Design System components. Please let me know if any additional information is needed or if I can assist in any way. Or if anyone has the same problem, how did you solve it?

davidnixon commented 6 months ago

@hgwrtsdev Just saw this today. So sorry for delay. Its true that the story does not sort the items in the table so I can see that is confusing. Clicking on the header does issue a sort event to which the user of the component (you) is expected to respond. See note here: https://vue.carbondesignsystem.com/?path=/docs/component-cvdatatable--default-story

Sorting, filtering and pagination are the responsibility of the component user. This component raises events to facilitate this.

I'm going to update the story a bit to make this clear.

Example event from clicking the "Name" header.

image

davidnixon commented 5 months ago

done. https://vue.carbondesignsystem.com/?path=/story/component-cvdatatable--default-story