Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: sortable table #391

Merged
merged 7 commits into from
Jul 25, 2024
Merged

feat: sortable table #391

merged 7 commits into from
Jul 25, 2024

Conversation

ppvg
Copy link
Member

@ppvg ppvg commented Oct 2, 2023

This PR proposes an improved sortable table and implements an interactive example. N.B.: the example implementation is purely demonstrative and not meant to be used by consumers of Manon, as sortable data is quite context-sensitive.

The approach in this PR turns out to match up with the ARIA APG Sortable Table Example.

Things yet to consider and possibly address in the docs:

  • Adding a negative margin-left to the <th> button to ensure its text aligns with table cell text.
  • Pagination, sorting across pages (how to communicate that effectively & accessibly).
  • Possibly using an aria-live region to announce e.g. "table sorted by column ascending/descending".

I've published an interactive demo of this approach here: https://sortable-table-demo.netlify.app/.

@ppvg ppvg marked this pull request as ready for review July 24, 2024 15:42
@ppvg ppvg requested a review from a team as a code owner July 24, 2024 15:42
@Rieven
Copy link
Contributor

Rieven commented Jul 24, 2024

I have tested it and found that it is also good to add <button type="button"> for when this button is in a form it does not submit the form while it should behave as an interactive button.

@ppvg
Copy link
Member Author

ppvg commented Jul 25, 2024

I have tested it and found that it is also good to add for when this button is in a form it does not submit the form while it should behave as an interactive button.

That's a good point! I don't think it's necessary to add it to the example HTML as it's context-dependent whether it's needed, but we can add it to the instructions. We'll go over these again soon so I'll leave it for now.

@ppvg ppvg merged commit c92d0ec into main Jul 25, 2024
7 checks passed
@ppvg ppvg deleted the feat/sortable-table branch July 25, 2024 11:34
jpbruinsslot added a commit that referenced this pull request Aug 5, 2024
* main: (70 commits)
  chore(deps-dev): bump prettier-plugin-svelte from 3.2.5 to 3.2.6 (#602)
  chore(deps-dev): bump vite from 5.3.3 to 5.3.4 (#601)
  chore: update table-sortable in icore_open_docs to match main docs (#605)
  feat: sortable table (#391)
  feat: iCore open theme, header navigation button (#604)
  fix: Adds link state styling iCore open theme (#603)
  ci: fix github-pages workflow (#600)
  fix: breadcrumb base path (#599)
  chore: update pnpm to v9 (#590)
  chore(deps-dev): bump prettier from 3.3.2 to 3.3.3 (#592)
  chore(deps-dev): bump rimraf from 5.0.8 to 6.0.1 (#594)
  fix: remove source code comment from docs Code component (#598)
  chore(deps-dev): bump stylelint from 16.3.1 to 16.7.0 (#595)
  chore(deps-dev): bump sass from 1.77.6 to 1.77.8 (#596)
  fix: remove broken links from icore docs (#589)
  chore(deps): bump highlight.js from 11.9.0 to 11.10.0 (#593)
  fix: Adds bold font reference (#588)
  fix: icore-open font-faces (#591)
  chore(deps-dev): bump svelte from 4.2.12 to 4.2.18 (#577)
  chore(deps-dev): bump vite from 5.2.11 to 5.3.3 (#576)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants