Top 17 Tips for Effective Grids in Web Apps

we've assembled our top tips on grids in one place to help you get the most out of the grids in your web applications. check it out.

grids (or grid views or datagrids) are a simple and effective way to display tables of data on a page. lots of devs use them all the time, and they have a long history in web development. however, it's easy to use them poorly, resulting in a less than optimal user experience. as part of our mission to make the lives of developers easier, we've put together a list of tips that will help you achieve the full potential of the grids you use in your web applications.

tip #1: use the right data format

data comes in a wide variety of formats, including xml, yaml, json, csv, and more. each data format has its advantages and disadvantages. a robust grid should be able to bind to data in these formats. as a side note, the task of converting data from one format to another should be avoided since it can impose a performance penalty when binding data to a grid. therefore, it is best to bind a grid to the data in its original format if the grid supports it.

tip #2: support caching for offline applications

it's important to utilize caching of data that is bound to grids whenever possible. caching can reduce or eliminate the need to issue http requests and can greatly improve the overall performance and scalability of your web apps. most of the time, http caching will help as well, through the response headers returned by the web server when data is requested. however, there are scenarios in which it's useful to have grids support a local cache of data on the client itself. offline application support is one such scenario where local caching can greatly improve the overall user experience.

tip #3: enable data visualization

when working with a large amount of data in the grid, the task of fetching and processing this data can impose a significant runtime performance penalty due to limited browser resources. virtualization, a technique used to mitigate slowdown stemming from operating with huge volumes of data, will display the data in the grid as it's needed. it achieves this by displaying the items for the current page index and retrieving items on-demand. in the case of a grid being bound to data from a remote location, this includes automatically requesting data from the endpoint.

figure 1: grid bound to 10 million rows in less than a second (through virtualization)

tip #4: support multi-column sorting

the ability to sort data is a core feature of grids. it enables users to quickly organize data to discover patterns and gain insights. most grids provide primitive sorting mechanisms that operate against columns of data. ideally, a grid should also include features like sorting against non-string types such as numeric values and dates as well as sorting across multiple columns.

figure 2: sorting with multiple sort orders enabled

tip #5: leverage extensible paging

paging is another core feature of grids. it enables users to quickly navigate data through pages (or indexes). most grids provide this capability, but few go beyond the fundamentals of paging to include features like extensibility to support custom paging. when selecting a grid, it is important that paging is not only supported but that it works in conjunction with other features like sorting and filtering. for example, if i sort the contents of a grid then i should be able to navigate the sorted contents through its paging functionality.

figure 3: paging with indexes, an option for items per page, and textual feedback on page location

tip #6: utilize effective databinding to remote data

a grid is meaningless without data. and while binding a grid to data may be a typical exercise, it's often the task of retrieving the data that poses the greatest challenge. that's why it's important for a grid to support binding to both local and remote data sources. while most grids support binding to local data sources, like an in-memory object or collection of objects, few grids support conducting crud operations against remote data sources. that's because they impose challenging requirements such as network latency, data formats, security constraints and messaging protocols. when choosing a grid, it's important that it provides support for binding to remote endpoints that expose data.

tip #7: take advantage of push notifications

webpages are often viewed as static resources; after a webpage is requested, the data it contains does not change. this is not optimal for situations where updates to the data occur behind the scenes. ideally, these updates should propagate to the grids that display this data without the need for issuing new requests. fortunately, protocols such as signalr and websockets facilitate the ability for grids to receive real-time push notifications from endpoints. supporting protocols such as these in grids provides a vastly improved user experience and should be taken advantage of whenever possible.

tip #8: support the exporting of data to multiple formats

once a grid is loaded with data, users may wish to export the data to popular file formats like word or pdf. many grids don't provide this functionality out of the box. instead, it's a task that's left to the developer through third-party libraries. a grid should support exporting bound data to these popular file formats as well as simpler representations like json or xml.

figure 4: exporting data in a grid to pdf and excel

tip #9: support both batch-based and inline editing of data

grids are effective at displaying large amounts of data. however, to be useful, they should allow users to modify the data contained within them. grids should support the creation of new data, the modifying of existing data and the deletion of entire rows. for a better user experience, grids should support operations either through inline form inputs or external dialogs. furthermore, the edits made to grids that are bound to remote data sources should support propagating updates either as a batch operation or as single operations performed one at a time on a row-by-row basis.

figure 5: inline editing of data in a grid

tipo #10: provide type-aware filtering

a grid can be a highly effective tool for analyzing data. however, grids can become overpopulated, making it more difficult for users to gain insights from the data being displayed. that's why it's important for grids to apply filters on the data. this capability should be provided for individual columns by type-aware operators like "greater than" or "less than" for numeric values and by boolean expressions for string-based values. furthermore, these type-aware filters must work in conjunction with features such as paging and sorting in order to be effective for users.

figure 6: type-aware filtering on grid columns

tip #11: leverage templates for data layout and appearance

templates provide the ability to control the layout and appearance of data contained in grids. for example, they can be defined to control the overall output of rows and columns. they can also be defined for peripheral elements like an embedded pager or toolbar. templates are sometimes overlooked by developers when choosing a grid because they appear simple. however, they are a powerful extensibility mechanism that should be prioritized when evaluating grids.

figure 7: custom template used in a grid

tip #12: utilize frozen columns for data navigation

it's not unusual for the data bound to a grid to exceed the boundaries defined to contain it. this happens frequently with data that has a large number of rows. in the case where the data has a large number of columns, it's useful for grids to support frozen columns. these are columns that remain displayed in the grid when the user moves from side-to-side when navigating the data horizontally. it's a feature that's useful when correlating values against the data that's found in these frozen columns.

figure 8: frozen columns displayed in grid (note the scrollbar at the bottom)

tip #13: utilize themes

themes are important because they provide a consistent experience for the user. it is important that grids provide the ability to customize their appearance and behavior. grids should provide a set of themes that match popular user experiences like google's material design. furthermore, these themes should be documented and easily modified to suit a range of requirements. when targeting grids, it is important that you utilize the themes provided. they also provide the added advantage of being able to swap them out for alternatives should the need arise.

figure 9: grid theme support (example: progress sass themebuilder)

tip #14: support response design

responsive design is facilitated through media queries and layout grids via css. however, in the case of grids that are used to display data, more work is needed in order to support a design that's responsive. the web isn't just isolated to the desktop browser anymore, it's available on a wide range of devices with different resolutions. a grid must be able to support a responsive design out of the box in order to provide a good user experience. it is important to think about the common scenarios for grids used to display data. most grids support responsive design by hiding the right-most column for each display breakpoint that's encountered for the variety of screen resolutions that exist. this is a good solution for most general cases. however, it may be worth preserving the visibility of these columns, especially if they contain important values such as a total sum. these scenarios must be considered carefully.

figure 10 left: grid with 1280-pixel width, right: grid with 566-pixel width

tip #15: use embedded data visualizations

data can be hard to understand, that's why we use charts and graphs to visualize it. this helps spot trends and gain insights. in many circumstances, it's useful to have a visualization in close proximity to the data in a grid. a grid should support this capability through sparklines and/or embedded charts.

figure 11: grid with embedded charts

tip #16: support detail templates

the structure of data is often hierarchical. therefore, it should be represented as such in grids. providing a detail template for data helps users to gain more insight by allowing them to drill into related rows. grids should provide the ability to support hierarchical data and enable users to see the related items when expanded inside the display itself.

figure 12: grid with details provided through a tab strip

tip #17: use aggregates to provide insights into data

aggregates are calculations based on the grouped data that they contain. they are often found at the bottom of grid groups or columns. they are useful because they provide insights into grouped data without the need for additional columns. an effective use of aggregates in grids provides these summaries whenever they are available to be displayed.

figure 13: grid with aggregates provided for grouped data

wrapping up

as you can see, grids provide a powerful control for encapsulating data. use them effectively and you can provide users with lots of insights into data. we hope these tips help ensure that you get the most out of the grids you use in your web applications.