This example adds Icon and Detail views to the previous example. To switch views use the view icon buttons in the toolbar. Icon and detail views are similar to the corresponding functionality in Interactive Reports. The icon view configuration is somewhat simplified. It is not necessary to specify the number of columns because the columns adjust based on available width. It also has better accessibility. With detail view and a custom icon view you are responsible for all the markup and CSS styles. The CSS rules can be added to a theme or application css file or included inline on the page. The main difference between icon view and detail view is that icon view supports selection and keyboard navigation.

For icon view a simple css based icon column is added to the SQL query that chooses an icon based on if the employee is a manager or president or not. For both icon and grid views the name is made a link. The fact that a column's link text can include markup is leveraged to include the icon in the name column as part of the link. Normally no Link Text is needed. This example isn't really intended for editing (there is no DA to refresh the grid). The link to page 400 is just to show how links can be used in icon view. See Add Toolbar Button for an editing using a dialog example. This example uses a non-custom icon view. An important requirement of icon view is that each item in the view must have the same width and height and the item content must not overflow. The width and height are set with CSS rules on element with class a-IconList-item.

The detail view uses table markup with styles that make it use the browser auto table layout. This may not be a common use case, since the grid view also shows the data in a table, but it points out an important difference between Interactive Reports, which uses auto table layout, and Interactive Grid, which uses fixed table layout. Auto table layout lets the browser give space to columns that need it. Fixed table layout is more efficient and lets us put the user in control of the column widths as well as supporting frozen columns and scroll paging.

See also the pagination examples that borrow some Universal Theme list styles for icon and detail views