Creating a Web-based Spreadsheet with SlickGrid

One of the largest projects we currently have going on at HardinDD is the transition of the CRE Enterprise and Visual Manager dashboard platforms (which we work on in partner with the corporate real estate firm Fischer and Company in Dallas, TX) from Adobe Flex into a true web application. A core component of the dashboard system, which manages varying sizes of property record datasets for real estate companies, is an Excel spreadsheet-like view of property data which clients may use to edit, sort, or filter on property records.

To bring this functionality over to our new dashboard system, we used the JavaScript library SlickGrid, which is an open-source project hosted on GitHub. The base functionality of SlickGrid is pretty bare bones, which is great if you just need something lightweight and fast to display data in a grid format. However, beyond that are a number of plugins also written by the creator of the project that build on top of the most basic options, including tooltips, checkboxes, and selection of multiple rows (which make the experience even closer to working in a spreadsheet program), that can also be added into your grid.

Some of the most important features we needed for our spreadsheet view were the ability to sort on columns, reload the data displayed on the grid (without actually reloading the web page), and customize the order and size of columns. The SlickGrid API provides the ability to do all of these things and more, and they’re almost all fully customizable. For example, SlickGrid has a built in sorting capability on data currently in the view of the graph, but because we use a server-side paging script to load only a subset of records for large datasets, we chose to override this functionality. Instead, we use AJAX to load the paged records, reset the data displayed on the grid dynamically, and SlickGrid handles the rest, all in a matter of seconds. There’s also no limit to the number of grids you can display at once; we often have 3 to 10 tabbed grids available to click through on a single page.

Another cool feature of SlickGrid is formatters, which can be defined on columns to do things like change the color of cells, update values, or add other custom formatting. It’s all handled client-side in JavaScript as the grid is loaded, so you can make formatting decisions based on the row, cell, column, or even the value that’s displayed in that cell.

Though it has a bit of learning curve, once you’re familiar with the library, you’ll be amazed at how powerful and flexible this grid system is. There are a number of working examples available that demonstrate the use of SlickGrid, and the StackOverflow community is active in discussion and providing answers to questions about SlickGrid’s use. If you’re looking for a quick and elegant solution to creating a data grid for your website, we highly recommend giving SlickGrid a try.

Leave a Reply