PrimeNG 5.2.0-RC1 Released with TurboTable

PrimeNG 5.2.0-RC1 Released with TurboTable

It is PrimeTime!!! PrimeTek is excited to announce the first release candidate for PrimeNG 5.2 featuring an all-new lightning fast Table component aka TurboTable, KeyFilter, ScrollPanel, Card along with over 50 enhancements to the suite.

TurboTable

Existing p-dataTable of PrimeNG is quite rich in terms of features however performance had always been an issue. We’ve tried all we could however it has not met our expectations as a result we’ve decided to create a new component called p-table with a template driven approach that is lightning fast, fully customizable, provides far richer control to the page author over the representation. PrimeNG has been started back in early 2016 and we’ve used all our Angular experience to create the new TurboTable, every single line of code has been written with performance and flexibility in mind. Performance gain is significant, p-dataTable can render 5000 rows of 8 columns in 10 seconds whereas TurboTable does it in less than 0.5 seconds. The difference gets even bigger when you add more rows or columns to the mix.

p-dataTable is now deprecated in favor of new p-table and will be removed in a future release, it will still function and we suggest replacing your p-dataTable with p-table. We need your feedback to improve the TurboTable even further.

See the TurboTable in action at live demo.

KeyFilter

KeyFilter is a new addition to the suite that restricts user input based on a regular expression, it is extremely handy for validations.

ScrollPanel

ScrollBars differ from OS to OS leading to UI differences, we’ve implemented our own ScrollPanel that provides the same performance of a native scrollbar but with styling options.

Card

Card is yet another addition to the suite to offer a flexible container component.

CSS Refactor

We’ve reorganised the CSS of component to be used standalone so they don’t share anything in common, this means we’ll try using built-in style apis of Angular to load them. If this is done, you don’t need to include primeng.css file to your apps since components will load their css themselves. primeng.css is 25kb when minimised and gzipped, still it is always a good idea to save a few KBs.

Imports

Importing a single module from PrimeNG is usually done by;

However this will load the whole suite, so even you only need button, your bundle will have Schedule component as well. In order to prevent this and still offer an easy way of imports, we’re deprecating primeng/primeng in favor of single module imports.

This will load only button. Please note that in a future release we’ll remove ‘primeng/primeng’. Documentation of each component have been updated to indicate how a module should be loaded.

Tests

We’ve also started putting more effort in enhancing our test suite to achieve at least 90% code coverage.

Angular 5.2

PrimeNG has first class support for Angular 5.2, live showcase runs on 5.2 in AOT mode.

Full Changelog

Here is the full changelog for detailed information.

Download

PrimeNG is an open source library under MIT license and distributed freely at NPM.

Premium Templates

While we’re waiting on feedback for RC, we’ll start updating our premium templates to 5.2, currently Table and Menu components expected to have styling issues since their styles are not up to date in premium themes. We plan to release the initial batch of updates next week.

Roadmap

5.2 final is due next week, then once the premium themes are updated, we’ll start working on 5.3 that will bring the new TreeTable based not the TurboTable architecture to provide various features the TurboTable already has.

Always bet on Prime!