Layout Grid Examples

Examples

Other Features

This implementation of grid allows the following focus movement behaviors to be declared in the HTML.

Whether to focus a cell or an element inside it when the cell is clicked or a navigation key is pressed:

The section of the grid pattern on Setting Focus and Navigating Inside Cells describes how to design the focus placement strategy.

Whether focus can wrap from the last column to the first column in the next row or from the first column to the last column in the previous row when Right Arrow and Left Arrow are pressed:

This wrapping is expected in all grids except for those presenting tabular, i.e., spreadsheet-like, data. The data grid examples demonstrate grids where focus movement does not wrap at the ends of rows.

Whether focus can wrap to the first row in the next column or the last row in the previous column when Down Arrow and Up Arrow are pressed:

The only condition where this wrapping is appropriate is when every cell in the grid belongs to a single logical set. In other words, if presentation of all elements in a single row is logically equivalent to presenting the same elements in an arbitrary number of rows and columns, then it is appropriate for Down Arrow and Up Arrow to behave as if all cells are in a single column. For instance, in example 1, all cells contain a navigation link. That set of six links could be presented in a single row, a single column, or divided into two rows of three or three rows of two; all these presentations would be logically equivalent. Conversely, in example 3, each logical row contains three cells, and it would be bizarre for the focus to move from the last search result link to the organization cell of the first search result when Down Arrow is pressed.

The example JavaScript allows the desired focus placement and wrapping behavior to be declared in the HTML content as follows.

1. If a cell has tabindex="-1", focus is placed on the cell. Otherwise, it is placed on a focusable element inside the cell.
2. To determine whether arrow key events should wrap focus movement, the example JavaScript looks for the following custom data attributes:
   1. data-wrap-cols="true": When this custom data attribute is on the grid, Right Arrow and Left Arrow move focus from column to column even across row boundaries to the column (cell) in the next or previous row. Setting it false will disable this type of wrapping.
   2. data-wrap-rows="true": When this custom data attribute is on the grid, Down Arrow and Up Arrow move focus from row to row even across column boundaries to the row (cell) in the next or previous column. Setting it false will disable this type of wrapping.

Keyboard Support

NOTE: The following table describes keyboard commands that move focus among grid cells. In the examples on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell. So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

• CSS:
  • layoutGrids.css
• JavaScript:
  • layoutGrids.js
  • dataGrid.js

HTML Source Code

Example 1: Simple List of Links

Example 2: Pill List For Components Like a List of Message Recipients

Example 3: Scrollable Search Results