Head of PR at Flatlogic Templates (flatlogic.com)
Thus there are several reasons why table design is so complex:
- difficulty with layout,
- data integration,
- interaction with other components,
- and development time.
Before we introduce the best libraries, let’s go through the evaluation criteria. We divided our evaluation criteria into 4 blocks.
Documentation. It is vital for whatever you’re using to be well-documented in order to learn how to build or reconstruct it (we have taken these criteria from our previous articles about date-pickers).
Customization. A great library should come with options that can be updated to add or remove certain functionality.
Compatibility. Who wants to visit a site with a datepicker that only works in recent versions of Chrome and Webkit browsers?
UX. Ask yourself whether the plugin will be convenient for the needs of your user? Does it fit your product style? This is one of the most important criteria for evaluating datepicker libraries. The looks and quality of the docs are not that important, compared to how the library will deal with your task.
We also want to note that before choosing a table you should ask a few questions to determine the right product for yourself. All these questions will help you to choose a suitable product for your application.
Is the table suitable for design?Will the table be easy to integrate with the data?Will it be easy to maintain in the future?Who will be the user?What is the use case?
Dynatable is an incredibly powerful and in-depth table plugin, it is very developer-focused, letting you control how the table is rendered, how filtering and searches. This solution overall is highly customizable.
Dynatable allows its users for single or multi-column, smart sorting out of the box and you also can click header once for ascending, again for descending, and again to stop sorting by that column.
Stackable.js is a jQuery plugin for stacking tables on small screens. It stacks each row entry one on top of the other with key/value elements listed side by side for simplicity. There are only a few options and the documentation is limited, but its whole purpose is to transform your standard table elements into something more mobile-friendly. But if you’re looking for a more complex solution, you might be best to try a few others on our list.
DataTables is an extensive plugin used to provide additional functionality for your tables such as sorting, filtering, pagination, and custom theming.
The plugin offers a comprehensive amount of documentation so you can control how your table will look, feel, and operate. The wide range of features and customization makes this a very developer-focused extension.
Another aspect of the plugin is that they offer premium support. The support is provided via their forum which you get access to by purchasing one of their licenses.
- custom filtering,
- column sorting,
- searching a string,
- individual column filtering,
- server-side processing,
- export buttons,
- column reorder,
- and responsive extension.
Price and License: MIT, Free
PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under the MIT License. Thus PrimeNG Table is an Angular component for presenting large and complex data.
- dynamic columns,
- row expansion,
- column grouping,
- row grouping,
- data export,
- and column reordering.
Ngx-datatable is an Angular component for presenting large and complex data. It was built for modern browsers using TypeScript, CSS3, and HTML5 and Angular 8.0.0. This is the sister project of the angular-data-table that is designed for Angular 1.x.
- handle large data sets (virtual DOM),
- expressive header and cell templates,
- horizontal & vertical scrolling,
- column reordering & resizing,
- client/server side pagination & sorting,
- row detail view,
- material theme,
- and no external dependencies.
React-table is one of the most popular react libraries for creating tables. It has more than 10k stars on Github, receives frequent updates, and supports Hooks. The react-table library is very lightweight and offers all the basic features necessary for any simple table. It also has comprehensive documentation with a lot of examples. The product is used by such companies as Intuit, Amazon, Google.
- lightweight (5kb – 14kb+ depending on features used and tree-shaking),
- headless (100% customizable, Bring-your-own-UI),
- sorting (multi and stable),
- and pivoting & aggregation.
Please note that the table isn’t suitable for creating large tables as Google Sheets, because of performance issues. The best case for this table is a simple table with a limited amount of data.
Griddle is a customizable architecture. It ships with some basic conventions and functionality but gives you the ability to customize just about anything (components, methods, etc). To encourage customization reuse, Griddle now has plugin support. Plugins are packaged Griddle customizations that can be reused or shared. However, the library seems to be abandoned. The latest commit was in July 2019.
Price and License: MIT, Free
React-virtualized is heavily optimized for performance when the dataset is large. This library is not exactly a table library; it is React components for efficiently rendering large lists and tabular data. You should consider using this product when you want to manage a large set of data. The documentation is comprehensive and the community around this tool is very mature, it has more than 18k stars on Github.
Vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in an HTML table with swappable/extensible pagination sub-component. You can also add buttons to each row and hook an event to it.
- Work with data from API endpoint or existing data array/object.
- Define fields to map your JSON data structure for display.
- Customize your field data display with formatter if needed.
- Advanced field customization can be done via scoped slot and field component.
- Optional detail row to display additional data for each row.
Vuetify Table Component
If you already plan to use a component framework for developing applications you should consider one that supports datatables and Vuetify can be a great solution. It’s a Material Design Framework, providing you with a lot of ready-to-use components.
Vuetify’s datatables are flexible and support sorting, searching, inline-editing, pagination. The documentation has a lot of examples, thus the development would be easy and fast. There is also a big community that can help to solve issues.
- selectable rows,
- loading state,
- filterable columns,
- paginate and sort server-side,
- and CRUD actions.
Clusterize.js as a vanilla JS tiny plugin to display large data sets easily. It weighs only 2.3KB gzipped but unfortunately doesn’t provide any advanced features. Its main purpose is to make tables with a huge number of rows run smoothly on a web page. The main idea is not to pollute DOM with all used tags. Instead of that – it splits the list to clusters, then shows elements for the current scroll position and adds extra rows to the top and bottom of the list to emulate the full height of the table so that browser shows scrollbar as for full list. This library works with modern browsers and supports all major mobile devices.
This tool is good for use cases when you don’t need to build a web app, but you need to develop just a page with table visualization.
- adjustable column widths,
- freeze data,
- and downloading data directly from the table.
Tabulator has good documentation. Its website outlines all of the features it can provide, with easy-to-understand docs that work together with the multiple inline examples.
The product is highly customizable. You might want to group rows in your table together under a header, create simple tooltips to explain your data on hover, paginate through your row content, or leverage several other great features to help improve user experience.
The developers of Tabulator are fairly active on GitHub, with updates every few months and a heap of commits and bug fixes over the year.
The Bootstrap table plugin is a feature-rich and lightweight table plugin that provides you all the features you need to perform minimal development time. One of the most important things of the plugin is that you make the table fully responsive in a very short time. The plugin is maintained by thousands of contributors and it has thousands of commits.
The plugin is historically great at providing support for its users because of the very large community and active contributors.
- responsive web design,
- scrollable table with fixed headers,
- fully configurable,
- via data attributes,
- get data in JSON format using AJAX,
- simple column sorting with a click,
- powerful pagination,
- and localization.
This library includes more than 25+ features like paging, sorting, filtering, validation, Ajax data, files data, REStful, touch support, Angular JS directive, and much more.
FancyGrid is a plugin-free library and it has no dependency. FancyGrid also includes a number of samples, professional support, elegant API, and of course detailed documentation for easy use.
The only big disadvantage of the library is the lack of mobile support, which is strange in the 2020 year.
If you are looking for the table builder for a complex project AG is a perfect fit, but it is probably an overkill for a small project. Also, it has been optimized for performance, if you have to handle big data sets.
ag-Grid supports real-time updates and can handle hundreds of updates per second.
The library comes in two versions: Community and Enterprise. The Community version is covered by the MIT license and includes only basic features. The Enterprise license with all the available functionality has three options: Single Application Developer ($750 per developer), Multiple Application Developer ($1,200 per developer), and Deployment License ($750 per Production Environment).
Main features in basic version:
- Aligned grids.
- Cell editing.
- Column filter, column groups, column moving, column pinning, column – resizing.
- CSV export.
- Real-time updating data.
Conclusion: it is a perfect product for enterprise applications but overkill for small projects.
It provides easy data binding, data validation, filtering, sorting, and CRUD operations. It is easy to use, and as customizable as possible. Handsontable is available for most popular frameworks, including Angular, React, Vue and it includes a TypeScript definition file. You can extend the product with custom plugins and edit the source code to adjust it to your product. Plus you get access to a comprehensive API, useful tutorials, and both community and commercial support. Handsontable performs great in all modern browsers and has backward compatibility for IE9-11.
Handsontable provides three types of licenses: Non-commercial free license, Developer ($790 per developer), Enterprise (custom price) licenses.
- sorting data,
- data validation,
- freezing rows/columns,
- merging cells,
- adding comments to cells,
- and internationalization.
Most of the solutions presented have the same functionality, thus you will need to choose by criteria such as technology, design, documentation. Choose the one which best satisfies your application needs. But the products presented above will make your life easier and better when you build a web application.
If you think that we did not include any product or incorrectly describe something, please contact us, we will be glad to receive feedback.
Create your free account to unlock your custom reading experience.