Admin/Managing Data Tables

[HalynaBychek]

As an administrator, I want to view and manage data in structured tables with search, sorting, filtering, and pagination, so that I can efficiently navigate and operate within different sections of the admin panel.

Acceptance Criteria

1. Table Functionality 1.1. The table page is designed for desktop screen sizes ranging from 1920 px to 1025 px. 1.2. The table page is static (no dynamic resizing beyond the defined screen sizes). 1.3. If the table content exceeds the screen height, a vertical scrollbar appears. 1.4. No horizontal scrollbar should be displayed due to content overflow. The system must ensure a responsive design with adaptive column widths. 1.5. Search, sorting, and filtering options work together dynamically, ensuring accurate results without interfering with each other. 1.6. When the administrator leaves and re-enters the table page or clicks the reset button, the table resets to its default state, which includes: -The table page 1 is displayed (pagination resets). -Default sorting order is applied. -Default filtering settings are applied. -Search input is cleared. 1.7. The administrator can add a new item by clicking the "Add [Item]" | "Додати [Елемент]" button above the table. 1.8. The table supports keyboard navigation for accessibility and efficiency. The administrator can navigate between table elements using: -[Tab] – moves focus between interactive elements: search, filters, table headers, and pagination. -[Shift + Tab] – moves focus in reverse order. -[Arrow Up / Down] – moves focus between table rows. -[Arrow Left / Right] – moves focus between columns in the same row. -[Enter] – selects an interactive element. -[Esc] – closes dropdowns or clears input fields.

2. Sorting Functionality 2.1. Sorting is available for all applicable columns except the Action column. 2.2. Sortable columns have a sorting indicator (arrow icon) - default, ascending, descending. 2.3. Clicking a column header switches between sorting orders: -Default order – sorted by the last modification date of items. -Ascending order (A → Z, Oldest → Newest, Smallest → Largest). -Descending order (Z → A, Newest → Oldest, Largest → Smallest). 2.4. The table retains the selected sorting order when navigating between table pages. 2.5. The table follows the default order if no sorting is applied. 2.6. Sorting can be triggered using the keyboard: -The administrator can navigate to column headers using the [Tab] key. -Pressing [Enter] on a sortable column toggles the sorting order. -[Shift + Tab] allows reverse navigation between columns.

3. Search Functionality 3.1. A search bar is available in every table section of the admin panel. It is located above the corresponding data table. 3.2. Search ignores letter case and supports partial matches. 3.3. The field accepts input up to 100 characters. 3.4. Search results are updated dynamically as the user types three or more characters. 3.5. The search field has an "X" button to clear the input and reset the table view. 3.6. If no matching results are found, the system displays a "No results found" | “Дані відсутні” message. 3.7. The search field supports keyboard input and can be focused using the [Tab] key. 3.8. Pressing [Enter] in the search field triggers the search, while [Esc] clears the input.

4. Filtering Functionality 4.1. Filters (dropdowns, toggles, checkboxes) are located above the table and are clearly labeled. 4.2. The table dynamically updates based on the selected filters. 4.3. Multiple filters can be applied simultaneously, refining the displayed results. 4.4. The system visually highlights active filters to indicate applied selections. 4.5. The filtering field has an "X" button to clear the input and reset the table view. 4.6. If no records match the selected filters, the system displays a "No results found" | “Дані відсутні” message. 4.7. Filters can be navigated and selected using keyboard input. -Dropdowns open with [Enter]. -Navigate through options using [Arrow Up / Down]. -Select an option using [Enter]. -Close the dropdown without selection using [Esc].

5. Pagination 5.1. Pagination Component -Pagination is displayed at the bottom of the table. -By default, the table loads Page 1 and displays 10 rows per page. -The total number of pages and items is shown ("Page 1 of 10 | 100 items total"). -If the number of pages exceeds 6, an ellipsis ("...") is displayed to condense page numbers. -The current page is visually highlighted in the pagination controls. -Users can select the number of rows per page: 10, 25, 50. 5.2. Navigating Between Pages -The administrator can move between pages using the previous "<" and the next ">" buttons. -If on Page 1, the previous button is disabled. -If on the last page, the next button is disabled. -The administrator can jump to a specific page using numbered page buttons. 5.3. Pagination Behavior with Search & Filters -When search or filters are applied, pagination updates dynamically based on the filtered results. -If a filter reduces the total number of pages, the current page adjusts to the nearest available page. -If an item is deleted from the last page, the system redirects to the previous page if the current one becomes empty. 5.4. The pagination controls support keyboard input: -Navigate between pagination buttons using [Tab]. -Move between pages using [Arrow Left / Right]. -Select a page using [Enter]. -Jump to the first or last page using [Home / End].