Wireframe of datagrid with settings panel

Most complex UI projects end up with at least one datagrid (a.k.a. table). Here is a medium fidelity mockup to show my design thinking and recommended UX for datagrid functionality:

* Fixed table header
* Sort and filter
* Bulk actions and select all
* Search
* Settings panel
* Inline editing of inputs
* Quick view details panel
* Resizable columns
* Hover actions
* Expandable rows
* Modal for details
* Zebra stripe on alternate rows
* Pagination

In the settings panel, there is a good example of radio buttons versus drop downs for user inputs of 7 items or less.
One improvement I'm going to add is a visual summary of the datagrid as a hero graphic.

InVision prototype with some of the above functionality:
https://fireflysoftware.invisionapp.com/public/share/5EX1FMXHB

Posted on Jan 3, 2020

More by Tyler Lange ๐Ÿ 

View profile