Skip to content

Grid Paging Specification

Danail Marinov edited this page Jul 3, 2019 · 20 revisions

Grid Paging Specification

Contents

  1. Revision History
  2. Overview
  3. User Stories
  4. Functionality
    1. End User Experience
    2. Developer Experience
    3. Globalization/Localization
    4. User Interface
    5. Navigation
    6. API
  5. ARIA support
  6. Assumptions and Limitations
  7. Test Scenarios
  8. References
Version User Date Notes
0.1 Danail Marinov July 3, 2019 Initial draft
  • Stefan Ivanov | Date:
  • Simeon Simeonoff | Date:
  • Konstantin Dinev | Date:

The Grid Paging Component is used to:

  • inform the user on which Grid page he is currently on
  • allow navigation to the previous/next and first/last pages of the Grid content
  • to inform the user how many records are being displayed per page and to let him select number of records to be displayed per page
  • As an end user:
  • I want to see how many records are currently being displayed per page
  • I want to be able to select the number of records displayed per page
  • I want to see on which Grid page I am currently on
  • I want to know what is the total number of pages according to the number of records displayed
  • I want to be able to navigate to the first/last Grid page through a button icon
  • I want to be able to navigate to the next/previous Grid page through a button icon
  • As a developer:
  • I want to be able to set the number of records shown per page
  • I want to be able to set Grid Paging display density
  • I want to be able to enable/disable Pager buttons and Dropdown
  • I want to be able to apply theme on the Paging according to the Grid theme

The Grid Paging is attached to the Grid bottom and

4.2 Display density for Comfortable, Cozy and Compact.

Zeplin file: zpl://project?pid=5ce53acf5f66941e1fafe414 https://zpl.io/V0LY9Xm

Comfortable

Comfortable

Cozy

Cozy

Compact

Compact

4.3 No results found when searching in the ESF list:

No-results

Acceptance criteria

Specify only if applicable

Assumptions Limitation Notes

Automation

  • Clicking 'Ascending' - sorts the grid properly, clicking 'Descending' - sorts the grid correctly and deselects 'Descending' button.
  • After opening filter dialog on a sorted column, the correct button should be toggled.
  • Clicking 'Move left/right' should correctly move the column.
  • Clicking 'Pin/Unpin' column should correctly pin/unpin the column.
  • Clicking 'Hide column' should hide the column.
  • After entering value in first input, the grid shouldn't be filtered, 'And' operator should be selected and clear button should become inactive.
  • If two values with And operator are entered, there shouldn’t be a selection in the list.
  • If two values with Or operator are entered and one of them has operator different from ‘equals’, there shouldn’t be a selection in the list.
  • If two values with Or operator are entered and they are in the list below, they should be selected.
  • Changing And/Or operator should reflect in the selection of the list.
  • Changing operator should reflect in the selection of the list.
  • If three or more values are selected and we enter a new one in the input, the selection should be cleared and the grid should be filtered.
  • Deselecting all values and then selecting two should populate the inputs.
  • Selecting ‘all filters’ item should clear the filter.
  • When dialog is closed and the filter has been changed the filter icon should be updated.
  • Selecting 'Contains', 'Does not contain', etc, from the menu should open another filter dialog and populates the correct operator.

Manual

  • Applying filter through API should correctly update filter dialog.
  • Clearing filter through API clears UI too.

Filtering Row

Per-column Filtering

Clone this wiki locally