Provide a visual indication that a table column is sortable

[apollo13]

I searched all existing issues and am pretty sure this issue does not exist yet -- sorry if I missed something.

There is currently no visual indication whether a column is sortable or not without hovering it. Iconwise I could imagine using something like p-icon--sort-both but adjusted to p-icon--chevron-*.

As an example this is how it looks in patternfly:

As you can see there we are currently sorting the repository column and "branches"/"pull requests" are sortable.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15552.

This message was autogenerated

[danielmutis]

Thanks for submitting this issue @apollo13

From our working group: we agree with the need for an indicator for sortable columns in our table. We propose to solve this issue in a similar way to how Gov.uk does it.

To be considered:

• We will be doing this change at a later date since it's not an urgent problem. We are currently working on a new architecture for Vanilla, and this work will be done once that is completed.
• When the column name has an icon, e.g. an information icon with a tooltip, the arrows would be closer to the label than the info icon. This follows our spacing rules detailed here.

[apollo13]

Hi Daniel,

Thank you for your answer. Are there any details available somewhere about this new architecture (most importantly will this new architecture still support raw html/css or will it require react etc)? I am not a canonical employee so I understand if you can't share anything but I'd love to know which changes to expect.

On Wed, Oct 16, 2024, at 11:13, danielmutis wrote:

Thanks for submitting this issue @apollo13 https://github.com/apollo13

From our working group: we agree with the need for an indicator for sortable columns in our table. We propose to solve this issue in a similar way to how Gov.uk https://design-patterns.service.justice.gov.uk/components/sortable-table/#:~:text=Use%20the%20sortable%20table%20component,combination%20with%20the%20filter%20pattern does it.

To be considered:

• We will be doing this change at a later date since it's not an urgent problem. We are currently working on a new architecture for Vanilla, and this work will be done once that is completed. • When the column name has an icon, e.g. an information icon with a tooltip, the arrows would be closer to the label than the info icon. This follows our spacing rules detailed here https://docs.google.com/document/d/1GqH96hAymC3KQCZPhBdzWChxWsjy72szrRqoX9Ep-Pg/edit?tab=t.0#heading=h.1x8p6y7bqdlp. — Reply to this email directly, view it on GitHub https://github.com/canonical/vanilla-framework/issues/5365#issuecomment-2416203509, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAT5C4VXZZPFNMM7DO5M4DZ3YU5LAVCNFSM6AAAAABPIAIGZGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJWGIYDGNJQHE. You are receiving this because you were mentioned.Message ID: @.***>

[bartaz]

@apollo13 We are currently in the process of specifying, prototyping, and discussing the approach to design system (both in terms of design system fundamentals, and technicalities of the future technical architecture of the implementation). So it's a bit too early to share details. We plan for React to be a first class citizen and first supported platform, but we want to be open and flexible, and possibly support other web implementations leter, so having a shared (S)CSS core is definitely something we consider.

But it's too early to know what exact shape and scope it will have.

For now, current Vanilla codebase is not going anywhere. We are planning to maintain it and keep stable as long as it will be needed.