Table Page Components

Table page components on a application page display lists of items and associated actions.

List Tables

To enable you to better visualize tables before generating them, the Web UI uses standard Wicket list views to populate HTML tables that are designed in the source HTML template pages. You can design the pages independent of the data population at runtime. Each table must include a number of components related to paging, headers, footers, and table items.

List Table Paging

All tables display standard paging options at the top of the table.

List Table Header

Each column in the list must have header text. Each column should be appropriately sized for the type of data it contains. Assign column sizes using the CSS classes that specify widths for the table header <th> tag.

<table>    
 <thead>    
 <th class = "selected"><wicket:message key = "selected" /></th>    
 ...   
</thead>

List table headers may contain a header that is styled as a link, which indicates the order of the list items in the table.

Best Practices for Table Design

Adding items – an option to add a new item to a list table must appear as a link in the table or page heading (CSS: additionalLink).

<h1 class = "friends">    
  Your Friends    
  <input class = "additionalLink last" type = "submit" name = "addFriend" d = "addFriend24" value = "Add a Friend">    
</h1>

Visibility of empty tables – if you have a table list without any items, SAP suggests that you show the table outline but not the table header and footer, if it is possible to do so.

No items in table – if there are no items in a table list, show an information message inside the table. If it is possible to do so, the message should indicate how users can add items to the table.