From cdb2803b48a2337aad2584b00d706f6de6452600 Mon Sep 17 00:00:00 2001 From: Kyrylo Pylypenko Date: Mon, 3 Feb 2025 16:05:15 -0500 Subject: [PATCH 1/4] Sortable Paginated Table --- content/body/sortable-pagination-table.php | 222 ++++++++++++------ content/bottom/sortable-pagination-table.php | 19 +- .../content/sortable-pagination-table.svg | 48 ++++ js/modules/es4/sortable-tables.js | 46 +--- js/modules/sortable-tables.js | 46 +--- templates/data/meta-info.json | 1 + 6 files changed, 230 insertions(+), 152 deletions(-) create mode 100644 images/icons/content/sortable-pagination-table.svg diff --git a/content/body/sortable-pagination-table.php b/content/body/sortable-pagination-table.php index a4a4f146..eb092016 100644 --- a/content/body/sortable-pagination-table.php +++ b/content/body/sortable-pagination-table.php @@ -1,59 +1,59 @@ - - false, - "comment" => "You may want to read inform", + "isForNewBuilds" => true, + "comment" => + 'If you are going to use this in a new webpage, please review our Sticky Table Header Example and decide which solution is better for your use-case.', ]); ?> true, - "comment" => - 'There are NPM modules for both the Sortable Table and the Pagination Table Enable Scripts used in this demo.', + "isForNewBuilds" => false, ]); ?> + true]); ?> +

+ If you have a lot of data in a table that you want to present to the user in small, bite-sized chunks, you may want to + use a pagination UI element to do this. The solution presented below is accessible and works for keyboard and screen + reader users. +

+

+ That said, it is a bit of work for a keyboard and screen reader use to any pagination UI, even if it is + accessible. It may be easier for users to navigate a table with a + sticky header + instead. Before you implement this solution (or if you are trying to make an existing pagination component + accessible), weigh the pros and cons between this and the Sticky Header solution. +

-

Sortable Paginated Table

+

Sortable Paginated Table Example

-
-