Evolution of a datagrid // Prototype

html (pug.js) // PostCSS // js // Gulp

I worked with a small team of UX designers to re-design Infor’s Order Collaboration tool. We took an incremental approach, working toward an ambitious technical vision in small steps, validating our ideas along the way. The end result was a working prototype that could be used for user testing and ultimately implementation by our product team. The key challenge for me was to create these examples without the use of any 3rd party libraries.

Step 1 // Sticky column

This simple first step was an effort to show how a sticky column could be implemented with table based markup.

Step 2 // Expanding + sticky rows

Next, I needed to combined expandable rows with sticky rows.

Step 3 // Expanding + sticky rows & columns

After successfully combining expandable rows and sticky rows it was time to add the sticky side column back in.

Step 4 // Final Prototype

And lastly, I needed to create the final prototype which included several other interactions.