Multi-select Magic

Using dataTables.js In New Ways

At the beginning of 2019 we had an interesting design challenge. We needed to build out a multi-select configuration page but the feature requirements were rather complex. I made the choice to intentionally bias the design on the assumption we would need to use an existing plugin to meet the deadline. This is what we built.

Overview

Our users need to configure various settings on a system level. It's probably easiest to think of this in terms of applying optional business rules, or if you're familiar with it, GPO settings is a nice analogy. There is a fixed list of items that will dictate what kind of work needs to happen for the system for several different workflows. Once configured this information will make it's way out to several pages throughout the app to inform folks about what they need to focus on when doing their work.

Constraints

For a true multi select piece of technology we have two options on our app. Choices.js and dataTables.js. Choices is fine for simple selection. It has search which is good, but we want to deliver more data to aid in decision making than what it provides. Plus as the feature matures post roll-out, there are obvious enhancements that would add value to build out and Choices.js just doesn't offer a rich enough experience.

DataTables.js on the other hand offers us all of our functional needs but visualized in a format that leaves the user with a dull experience. Pagination to keep things in a reasonable workspace, search to quickly find the things you most likely want, item counts, page length and so on. It's a really nice plugin and I've said that about zero times in my career.

DataTables.js is the clear winner. I had no reason to believe I could do what I wanted but I knew, one way or another I could make dataTables look like something brand new without adding risk by writing something completely custom so my design was biased from the onset with this in mind.

Design the Damn Thing

There's two clear regions to the design that need to be visually unified. There is summary/review information and then there is the configuration area.

The summary area keeps a dynamically updated count of applied and pending changes. Our users are used to that kind of info but we took it a step further and programmatically operate them as filters to aid users in the review process before making their save selection.

For the configuration area, multi select is pretty straight forward but we wanted to create a richer experience that was more than just a table with a select column so we deliver structured data with clear visual hierarchy that doesn't feel like a table at all. In anticipation of our user's knowledge when hitting the page we emphasized the dataTables search functionality as the primary job of the configuration area.

That's it. De-load the generic dataTables CSS and you'll be pleased to find it has no opinion about how it should look. I simply sifted through the structure dataTables generates off the passed in data and hooked into their classes. Brand new CSS in hand and you wind up with something like this!