Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sortable prop issue on cv-data-table

See original GitHub issue

Detailed description

Setting sortable to false is revealing the sortable table headers

What browser are you working in? Chrome and Firefox (latest)

What version of the Carbon Design System are you using?

"@carbon/vue": "^2.37.1" "carbon-components": "^10.32.0" "nuxt": "^2.14.12"

Screen capture of what I’m seeing:

https://user-images.githubusercontent.com/6276074/113893927-bac6cc80-9784-11eb-8588-daabf71680ee.mov

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

TimonLukascommented, Apr 8, 2021

Ah, sorry, I get it now! No, I don’t think this is supposed to happen, at least the React implementation doesn’t show this behavior.

@lee-chase I think we could fix this by removing the aria-sort prop on all headers that are not sortable. This is also how the React version is implemented.

1reaction

TimonLukascommented, Apr 7, 2021

Glad to hear that it works now!

[aria-sort] is used as the selector because if sortable === true the table headings are placed into buttons, which have their own styles for centering the text, or at least I think so based on a quick look.

To me this behavior seems correct, I’m afraid I didn’t understand what issue you’re referring to at the end. Could you describe the issue using the CvDataTable story? Thank you!

Top Results From Across the Web

Default ordering (sorting) - DataTables example

The order parameter is an array of arrays where the first value of the inner array is the column to order on, and...

Issue with #Jquery #DataTable column sorting and hiding ...

We are using Jquery DataTables. We have implemented server side column sorting. so when you sort a column, the data table sends the...

DataTable Sorting - Webix

When you click on the header, DataTable starts to display a special control indicating which column the table is currently sorted by and...

Creating a React sortable table - LogRocket Blog

Let's get another data table and render it using the same Table component. To start, create a tableData2.json file in the src folder....

DataView.Sort Property (System.Data) - Microsoft Learn

A string that contains the column name followed by "ASC" (ascending) or "DESC" (descending). Columns are sorted ascending by default. Multiple columns can...