Create interactive tables with Tabulator

[Rss Bot 1]

Tables carry all kinds of advanced visual gimmicks intended to make them look better. Table rendering performance is more important than ever. Generating a few labels on the fly is not a problem, but doing so with complex tables containing images overloads systems.

Tables intended for the web are best generated with the Tabulator framework. Just like all the best web design tools it's designed to streamline your workflow. This JavaScript framework contains an advanced implementation of the virtual document object programming paradigm. This means it only creates a few widgets, which it recycles as the user scrolls through your list.

In addition, the framework also provides a wide range of convenience functions. Table sizes can be adjusted to the data which is currently being displayed. Element information can be obtained from a variety of sources including REST transfers. Developers interested in creating advanced table editing experiences can also rejoice.

The product supports filtering, sorting and lets users edit table data. An optional data validation process then prevents mistakes. Given that Tabulator is completely open source, there is little reason for programming your own table rendering engine.

Download the files that accompany this Tabulator tutorial here.

01. Load the files

Tabulator consists of a CSS stylesheet and some JavaScript. The framework’s developers have a tight relationship with the UnPKG content delivery network. Our example code fetches resources there, and furthermore declares a tag responsible for displaying the table.

02. Generate example data

Starting our demonstration with an Ajax loading process would make the code too long. Due to that, we limit ourselves to displaying static data. Create a script tag, which must be placed below the tag, and start out with an array of elements.

03. Initiate a code-behind class

When the array is ready, we can proceed to kicking o the rendering process. Table widgets are represented by an instance of the Tabulator class - our first task is the creation of one. Tabulator expects both field declaration and a reference to the data at hand.

04. Analyse the results

With just a few clicks, Tabulator can start sorting your data intelligently

Open the program and feast your eyes on the table shown in the figure accompanying this step. The framework provides intelligence for sorting. This is shown in the second figure, which was created by clicking the header off the table a few times to trigger sorting.

05. Change colours during program execution

Tabulator’s constructor offers a variety of parameters. While some of these parameters are limited to simply providing static data, we can also provide event handlers. rowFormatter gets invoked once for every row generated in the table. When run, the code will show the output shown in the figure accompanying this step.

06. Add example data

Demonstrating advanced features of the framework requires additional data. This can easily be fixed: simply return to the declaration of the table data field, and add a bunch of additional entries.

07. On cell click event handlers

Add event handlers on two levels: in addition to clicking handlers for the entity of the program, you can also target specific elements of the table. Both approaches have their merits: the code accompanying this step shows how global local event handlers are set up.

08. Analyse event parameters

Event handlers receive two objects with further information about the trigger. Our first test involves trying to ind out more about their contents. This is best accomplished by outputting them into the browser’s command line. Now run the example code in Firefox to see how the output presents itself.

09. Target specific cells

We can now motivate the user to pick a specific set. In principle, all we need to do is a string comparison. Tabulator makes this process a little bit more involved by not providing the value directly – instead, the object must be unwrapped before use.

10. Spruce up display

Tabulator can create advanced display elements from data. This is done via helper classes known as formatters. These do exactly as you might expect and format a table. The development team provides a few right out of the box.

11. Deploy a formatter

Widgets can display information automatically

Add its declaration to the column array. The framework will automatically detect the assignment, and will use the generated widgets to display information. In the case of our example, values are transformed into a series of stars.

12. Set some options

Default format settings can be worked around

Our array contains values ranging from 1 to 6. By default, the formatter is limited to five stars. We can work around this problem by setting an attribute to modify rendering behaviour.

13. Add a button

Demonstrating some of the advanced functions of the framework requires a button with which interaction can be triggered. Return to the mark-up part of the test harness, and add the button declaration as shown. Given that our table currently does not ill to expand the screen, the button will simply appear below the table.

14. Access the table instance

Accessing the table instance requires us to store it in a public variable. Given that we are programming purely on the browser, the window object is a good place for storing the value.

15. Apply a filter

Filters require three parameters

Apply filters via the setFilter method. It takes three parameters - first, the ID of the column to be used. Secondarily, the comparison operator is passed in, and finally, a comparison value. In the case of our example program, click the button to make three lines disappear.

16. Use various filter operations

That list of Tabulator operator functions in full

Tabulator provides a total of seven operators which can be used by passing in their string. The figure accompanying this step was taken from the product documentation. It provides a description of the operator’s function.

17. Create custom lines – I

Our final “big” task involves replacing the entire row with a bit of custom mark-up. For that, we must start out by setting up rowFormatter and providing it with a generator function.

18. Create custom lines - II

The second part of the routine involves creating the actual DOM snippet. Our code creates a TD tag containing the information for the current line and returns it to the framework after that.

19. Modify data at runtime

Tabulator is not limited to displaying static data. The code accompanying this step illustrates four ways how information can be changed during program execution. Keep in mind that changes to the actual array are not monitored — changing the values of the array does not lead to an automatic update.

20. Target framework elements

When Excel first let users apply styles, clarity improved. Being based on the concept of virtual DOM, the product generates a set of display widgets. They have a set of predefined IDs which are conveniently listed here.

21. Learn more

Tabulator’s documentation is structured in a slightly odd fashion. The gallery of examples found at here makes for a great first point of contact – click the Documentation links next to a header to be forwarded to a more detailed description of the API in question.

This article was originally published in issue 292 of creative web design magazine Web Designer. Buy issue 292.

Related articles:

• CSS art gets brilliantly ruined by old browsers
• Best pieces of user testing software
• Great UI designs

View the full article