Data display has advanced from simple HTML to advanced JavaScript-based grid components. Learn about this evolution and how to build a modern grid today.

Displaying Data: HTML Tables

The language of the web, HTML, was originally conceived in 1980 (although not fully developed until 1990) as a document markup language, as its name states. One of the critical elements that need to be displayed in documents, of course, is tabular data. A core element of HTML is the table. Tables allow the user to easily specify rows and columns and makes sure that all the data lines up and is easy to view and understand. Tables allow basic control like alignment, cell color, padding, borders, etc. — enough to create a basic table. If you just want to display a simple, small table, then HTML tables are probably enough for you.

Figure 1: Basic HTML table

From Documents to Apps: Enter CSS JavaScript

The next major expansion came with the development of CSS (Cascading Style Sheets) in 1994, which added a wealth of style control and also allowed the separation of style and content. Linked documents were great, but the need to have some sort of functionality built in quickly arose. In 1995, JavaScript was developed as a way to make the growing web more dynamic. Web pages had more and more functionality added and what started out as documents evolved over time to become full-featured applications. Libraries making use of CSS and enhancing the basic functionality of JavaScript proliferated, with one of the most common today being Bootstrap. Bootstrap was originally developed by Twitter and was released as an open source library in 2011.

Making the Tables Pretty: Bootstrap Tables

Tables are useful, but not particularly interesting. One way to make an HTML table more useful and visually appealing is to use Bootstrap table additions. These allow the user to add a variety of graphical items to the table by specifying alternate striping, hover behavior, enhanced colors, more complex borders, etc. This makes the tables easier to view and more attractive, but they are still just basically dressed-up tables. Still, if you are using simple tables, then the Bootstrap table features are an easy way to enhance the look and feel of your data that is displayed in a table.

Figure 2: Bootstrap-styled table

Tables vs. Grids

One point of terminology that should be mentioned is that the terms grid and table are sometimes used interchangeably but are also often used to describe similar yet different things. A Bootstrap grid, for example, is used mostly for page element layouts. A Bootstrap grid can be used to display tabular data but has many limitations. These include its limitation of 12 columns, as well as its responsive handling of columns which is great for graphic elements and text blocks but not so helpful for table data. The Bootstrap table support is geared more at the display of tabular data than the Bootstrap grid. However, the most recent components aimed at displaying tabular data are generally called grids and not tables.

Turbocharging the Web-jQuery

Many libraries have been developed to enhance JavaScript, and one of the most popular today is jQuery. First released in 2006, jQuery provides features that help programmers control and interact with the web page (technically with the DOM, or Document Object Model) with full cross-browser compatibility. jQuery is widely used and forms the foundation of many other tools and libraries that are built with JavaScript. This helped speed the migration from static web pages to dynamic applications and allowed for the development of tools to make web-based apps rival the features of native applications.

Specialty Grids

With the rise of online apps implemented as single web pages, the need for more advanced data functionality grew. Grids (or Tables) made a quantum leap and now became available with features that compared to stand-alone spreadsheet tools like Excel. Users were familiar with the features available on Excel and other tools for the grouping, sorting, and organizing of data tables and they expected them to be available in the new web-based apps as well. UI components like the Grid component from the Kendo UI library delivered on these features and gave users a rich assortment of data manipulation features. These include functions like grouping, sorting, advanced data binding, exporting to popular formats like PDF and Excel, editing, and many many more.

Figure 3: Kendo UI Grid, sorting

In the example above (Figure 3) we see that the column Quantity has been sorted ascending, which we can tell from the data itself and also by the up arrow next to the Quantity header. In the example below (Figure 4), we see a filter form that has been opened by clicking on the funnel icon in the Item column. This dialog lets us define one or two filters of different types (equal, not equal, begins with, ends with, etc.) and then define a Boolean relationship (and, or) between the two. Once applied, this will filter the data that is displayed. There are many other advanced features available, and this is just an example of two of them.

Figure 4: Kendo UI Grid, filtering

Conclusion

As the use of the web proliferated, the options for data display evolved from basic document markup to interactive tools. The most popular format for data display is in tabular format. Basic table features are included in HTML, with enhancements added by libraries such as Bootstrap. But as new tools took advantage of libraries like jQuery, a whole new class of Table, or Grid, became available with UI components like the Grid from the Kendo UI library.

Not everyone is developing complex web-based apps, and for people who are really just displaying static information with small tables, basic HTML tables are fine, especially when dressed up by Bootstrap or other table features. For users that do need to provide users with a way of viewing and manipulating tabular data, modern grids are an easy way to drop in advanced functionality and eliminate the distinction between native apps and web-based apps.