The out-of-the-box design of webdrawer does not include common data table functionality. For instance, the column headers & labels can't be clicked. They also don't indicate if that column is being sorted.

The ubiquitous dataTable library could be imported into webdrawer and then applied to the results list. If done, the results list will appear as shown below.

With this users can now:

Change how many items are in the view
Search all rows and columns for a given value
Click any column header and sort the items by that column

Even cooler, if the user types into the search box then all non-matching rows will be hidden.

Although Webdrawer's out-of-the-box footer works perfectly well, I feel the dataTable library includes a better pagination. Also, by increasing the page size and enabling pagination here, more advanced features can be added (such as column formulas, signature lines, save as excel workbook). Once enabled the footer would appear like shown below.

It's super easy to incorporate this into your own implementation. Definitely test and tune your environment, as I'm just showing the broad brushstrokes. Contact me for more details about implementation or more advanced features. Otherwise here are the instructions.

First I opened the "Views/Shared" resultsList class file in Visual Studio. I located the table element which will contain all of the records. I then added an id attribute with "records" as the value.

Now that my table is named, I went into my initialize method (previously used to setup the map on the page) and added a invocation of the jquery dataTable plugin. I provided it the name and a configuration object that enabled pagination.

I then imported the dataTable jquery plugin via a public CDN, like so:

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />

That's it. Three lines of code. Crazy, isn't it? :)