Grid View Proposal

Grid View Proposal

Current Look

Proposal

• Pagination Integrated (Top, Bottom) + Chosing how many items to be displayed
• Live Filtering
  • Filter can be text input, select box or no filter at all

• Visual separation between what fields have links or editable text inside
• Highlight hovered row (providing contrast)
• Aligning methods (for better readability):
  • Characters - Left
  • Numbers - Right
  • Date - Right
  • Actions - Center
  • Images - Center
  • Status - Right

Interaction

Editing a field

• Hovering a field makes an "Edit" icon appears + associated title

• Selecting the field to be edit - a popup Dialog appears
• The dialog separates the primary action (Save) from the secondary action (Cancel) 
• Alternative: In place edit

Bigger Results and Column Filters

• The values that don't fit in a field will wrap to second row (vertical-align:top)
• The empty fields will stay blank (without "-, -- , emptyvalue" values)
• The column current sorted will be displayed apropiate 

• Date entries could be edited with a calendar popup selector