Data Grid Examples

About This Example

Following are three example implementations of the Grid Pattern that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information. Each of the following three grids presents a set of financial transactions. The first is a simple grid with minimum ARIA markup and keyboard support. The second and third implementations add advanced features, such as content editing, sort, scroll, and show/hide.

Similar examples include:

• Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
• Advanced Data Grid Example: Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.

Examples

Example 1: Minimal Data Grid

Transactions January 1 through January 6

Notes

1. Data cells can be focused using standard navigation keys, including directional arrows, Home, End, Control + Home, and Control + End.
2. The Page Down and Page Up keys are not supported since such scroll-like functions are not useful with so few rows.
3. The links can be activated with the keyboard when focused.
4. Since the header cells do not provide any functionality, they are not focusable. Screen reader users are still aware of their presence because row and column headers are announced by screen readers during navigation. And, they are also navigable when using a screen reader's reading or browsing mode.

Example 2: Sortable Data Grid With Editable Cells

Transactions January 1 through January 7

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $1,000,000.00 | $1,000,000.00 | | 02-Jan-16 | Debit | Down Town Grocery | Groceries

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $250.00 | $999,750.00 | | 03-Jan-16 | Debit | Hot Coffee | Dining Out

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $9.00 | $999,741.00 | | 04-Jan-16 | Debit | The Filling Station | Auto

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $88.00 | $999,653.00 | | 05-Jan-16 | Debit | Tinker's Hardware | Household

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $3,421.00 | $996,232.00 | | 06-Jan-16 | Debit | Cutey's Salon | Beauty

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $700.00 | $995,532.00 | | 07-Jan-16 | Debit | My Chocolate Shop | Dining Out

• Income
• Groceries
• Dining Out
• Auto
• Household
• Beauty

| $41.00 | $995,491.00 |

Notes

1. The navigation keys and functions are the same as example 1 except that the column headers are focusable because the date and amount columns provide sort functionality.
2. A description may be edited by activating the cell.
3. A category may be changed by using the category popup menu.

Example 3: Scrollable Data Grid With Column Hiding

Transactions for January 1 through January 15

Hide Type and Category

Notes

1. In addition to the navigation keys supported in examples 1 and 2, Page Down and Page Up scroll the grid.
2. As navigating up or down scrolls the visible set of rows, the aria-rowindex value of the row containing the focus informs the screen reader of the number of that row within the total set of rows.
3. Activating the "Hide Type and Category" button hides the type and category columns.
4. The aria-colindex value on a cell informs screen readers of the position of that cell within the row. When one or more columns are hidden, screen reader users can be aware of the hidden columns because those column numbers are not present as users navigate across a row.

Keyboard Support

• Moves focus one cell to the right.
• If focus is on the right-most cell in the row, focus does not move.

| | Left Arrow |

• Moves focus one cell to the left.
• If focus is on the left-most cell in the row, focus does not move.

| | Down Arrow |

• Moves focus one cell down.
• If focus is on the bottom cell in the column, focus does not move.

| | Up Arrow |

• Moves focus one cell Up.
• If focus is on the top cell in the column, focus does not move.

| | Page Down |

• In example 3, moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.
• If focus is in the last row, focus does not move.

| | Page Up |

• In example 3, moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.
• If focus is in the first row of the grid, focus does not move.

| | Home | moves focus to the first cell in the row that contains focus. | | End | moves focus to the last cell in the row that contains focus. | | Control + Home | moves focus to the first cell in the first row. | | Control + End | moves focus to the last cell in the last row. |

Role, Property, State, and Tabindex Attributes

• Identifies the element that serves as the grid widget container.
• The grid element is not focusable because it implements the practice described in the section on Managing Focus Within Components Using a Roving tabindex.
• Since the grid role is applied to a table element, the row , rowheader, colheader, and gridcell roles do not need to be specified because they are implied by tr, th, and td tags.

| | | aria-labelledby="ID_REF" | table | Refers to the heading element that labels the grid. | | | aria-rowcount="16" | table |

• In example 3, specified because a total of 16 rows are available, but fewer than 16 rows are visible.
• In this case, to demonstrate this feature, some rows are hidden using display:none, which excludes them from the browser's accessibility tree.
• a more common scenario for using aria-rowcount is when not all data is loaded into the DOM at one time.

| | | aria-colcount="6" | table |

• In example 3, specified because a total of 6 columns are available, but when columns are hidden, fewer than 6 columns are visible.
• Similar to how aria-rowcount overrides the browser calculation of the total number of rows, the browser uses this value for the total number of columns so it can report the correct number when columns are hidden.

| | | aria-rowindex="INDEX_VALUE" | tr |

• Used in example 3 because not all rows are present in the accessibility tree.
• Overrides the browser calculation of the row number.
• Has a value from 1 to 16.
• Note that it is 1-based, not 0-based.

| | | aria-sort="ascending" | th | In example 2, applied when a column is sorted in ascending order. | | | aria-sort="descending" | th | In example 2, applied when a column is sorted in descending order. | | | aria-sort="none" | th | In example 2, applied when a column is sortable but not sorted. | | | aria-colindex="INDEX_VALUE" | th and td |

• Used in example 3 because when the column hiding feature is used, not all columns are present in the accessibility tree.
• Overrides the browser calculation of the column number.
• Has a value from 1 to 6.
• Note that it is 1-based, not 0-based.

|

JavaScript and CSS Source Code

• CSS:

  • dataGrids.css
  • menuButton.css

• JavaScript:

  • dataGrid.js
  • dataGrids.js
  • menuButton.js
  • utils.js

HTML Source Code

Example 1: Minimal Data Grid

To copy the following HTML code, please open it in CodePen.

Example 2: Sortable Data Grid With Editable Cells

To copy the following HTML code, please open it in CodePen.

Example 3: Scrollable Data Grid With Column Hiding

To copy the following HTML code, please open it in CodePen.