Vizlib Table v1.7.2

It's constantly improving, and becoming a winner!

Functionality is key, design matters, features are important, but nothing is more critical than fast responsiveness and a fantastic user experience.
Performance is paramount and at the heart of anything we do here at Vizlib. As a result, we have undertaken a six-week exercise over Christmas to completely refactor how our Vizlib Table works and added a couple of extra features while we were at it:

Vizlib Table v1.7.2

We introduced virtualisation, and a 400% improvement in performance

We are not talking about technical virtual machines or virtual reality. Technical Web Developers will gasp - in a case of an HTML/AngularJS Table, virtualisation is a method where you only display the rows and columns which can be viewed by your browser to significantly improve performance while displaying thousands of rows.

Some tables are very wide, many Qlik folks have apps with millions of rows. If you are rendering these tables on a web browser, it's impossible for you to view all cells all at once (okay unless you zoom out to 5%, but who would do that). To improve performance, responsiveness and the overall experience, virtualisation dynamically displays data cells and also hides them if they are no longer visible on your screen.

Seamless endless scrolling through a 100k record table:

More control on customizing headers + tooltip

Provide more context to your columns by colouring their headers individually. A good practice is to consistently use the same header colouring for the same metrics across the dashboard to help users quickly recognize them.

Take the below example:

  • Quantities are indicated in pruple
  • Sales metrics in green
  • Ratios in blue

Furthermore, we have introduced the ability to provide more context to your metrics by adding a custom tooltip:

Use Header tooltips to:

  • Explain your metrics
  • Add a link to documentation
  • Provide more information and context to the table.

As usual, the settings to add the tooltips can be found directly in the property panel:

Data Points on Mini-Charts

It's a challenge to add more context to an already compact mini-chart, but data points on the line charts do the trick. Use them to better visualize single data points (when using time-aware axis) or to beautify the line chart a bit more:

Static Data Point Colors:

On top of that, it would be great to see the mini-chart in comparison to eachother, and because of that, we have implemented the ability to add colour ranges for the data points.

Dynamic Data Point Coloring based on pre-defined ranges:

Here you can see that the top rows are mostly in their green areas, while the bottom ones are suffering from low sales. Cross-row context while maintaining its relative time-aware view.

Comprehensive Changelog:

Vizlib Table v1.7.2:

New Features:

  • New Premier League Example App
  • Vizlib Table now supports up to 100 measures (before we had a limit of 50).
  • Ability to change the background and text colour of individual headers, supported both for dimensions and measures
  • Ability to add a custom tooltip when hovering over the header. Particularly useful if you want to add some explanation or additional information on the metric/dimension. Supports HTML.
  • Improved performance of very wide Vizlib Tables using horizontal virtualisation.
  • Vertical Scroll is now always visible, even with horizontal scroll.
  • Significant performance improvements
  • Ability to set the row height by either specifying it or by letting it calculate automatically.
  • Data Points on Mini Line Chart are now supported including custom colouring based on intervals.
  • Load more data button has been replaced with a more user-friendly endless scrolling functionality.

Bug Fixes:

  • Right-padding in cells would sometimes disappear in mashups. This has been rectified.
  • Removed unintentional top & bottom padding within cells.
  • Improved the drag selection of multiple dimension values.
  • Bug fixed when using the Vizlib Table as a Master Key Item in Story mode
  • Wrapping of Header Cells has been fixed.
  • Sorting Arrows was sometimes misaligned.
  • Fixed data values in Bullet Chart to be inline with the cell
  • CSS styling issues with the header and body size.

(Vizlib Table Download Page)

If you have any questions or feedback don't hesitate to contact the Vizlib team at!