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

More by Tyler Lange 🐠

View profile