Table: onClick header and sort stories

[etienneburdet]

Summary

The goal for this PR is to add a sort system, by making the header clickable and adding a sort direction indicator

(Internal for Opendatasoft only) Associated Shortcut ticket: sc-48046.

Changes

I simply added a on:click and an icon in the header. Same as for pagination, we way want to deal with api calls so it doesn't really make sense to implement sort function. The UI is then just a controlled/stateless interface.

Sorties kinda exemplify what the result could be (sort function of the "api" is stupid on only really works on numbers).

Changelog

Table now have a sort mechanism.

Open discussion

The current implementation lacks definitive icons. But maybe we could accept any icon as prop? This opens a lot of questions however (security with SVG, format compitibility etc.), but might not be that hard.

Review checklist

• Description is complete
• Commits respect the Conventional Commits Specification
• 2 reviewers (1 if trivial)
• Tests coverage has improved
• Code is ready for a release on NPM

[KevinFabre-ods]

Personally, I can see UI and UX improvements, but I won't ask to do it in this PR.
Because, at some point, the design team will ask to change it based on a design (hopefully).

So I focused my review only on the technical level

[KevinFabre-ods]

We now have design for the headers 🎊
https://app.zeplin.io/project/662a9454cdce0eb321bef34d/screen/664fad0242a557cce9bfb0e2

[etienneburdet]

I implemented the design, seems to work easily enough 👌 I just renamed Header.svelte into Headers.svelte, because at some point I contemplated a HeaderCell.svelte component. It's not necessary yet, but might happen and technically it's a row of headers so I kept the plural.

Also CI complains about a missing nx dep. I don't why, build-ci runs fine on my machine. Updating nx seems to do the trick 🤷

[KevinFabre-ods]

Looks good !

Just a comment about aria label for the sort button

Also, what your opinion about the answer I gave you for this discussion #233 (comment) ?