Tables are great for displaying a lot of information in a small space. For example, you might need to view data like the grades of thousands of students on an exam along with other details, or the prices, ratings, and available inventory for an e-commerce store.
Data grids are basically tables that also offer some extended functionality like filtering, sorting and searching through the data. Implementing all these features alone will take a lot of time. Fortunately, there are many free and open source JavaScript-based data grid libraries that you can use in your project.
In this article, I’ll give you a brief overview of five of these libraries. Let’s begin.
Grid AG
AG Grid bills itself as the best JavaScript library for creating data tables, and for good reason. The main highlights of the library include its excellent performance, no dependencies on third party libraries and seamless integration with all major JavaScript frameworks such as Angular, React and VueJS. This goes without saying, but you can also use the library with plain JavaScript as well.
Some useful library features include the ability to resize, reorder, and freeze columns. You also get support for pagination, sorting and row selection. Keyboard navigation and accessibility support have also been implemented in the library.
Besides customizing the look of the grid with multiple themes, you can also customize the cell content and perform in-place cell editing. The data from the grid can be exported in CSV format with the free version of the library.
This library also has an enterprise version that offers some additional features like lazy record loading and server-side operations on data. You also get support for tree view and hierarchical data. You can also export your data to Excel and get Excel-like pivot tables.
Extensive documentation will help you get started easily and create data grids with the framework of your choice.
Comfortable
The Handsontable JavaScript library lets you create data grids that look like spreadsheets. Get all the functionality of data grids with a spreadsheet-like user interface.
You don’t need to rely on any particular framework or library to use Handsontable, it works quite well with plain JavaScript. Prefer to use a framework? You can also because the library supports React, Vue and Angular.
You get some useful features like freezing, moving and resizing data grid rows or columns. Filtering, validating and exporting data to a file is also possible with its API. You can also perform multi-column sorting, non-contiguous selection, and cell merge operations. The library also allows you to undo or redo your trades.
There are many plugins available to add extra functionality to your grid. This includes things like autofill with drag-down and copy-down functionality. You can even perform Excel-like calculations by integrating HyperFormula, a powerful calculation engine developed by the Handsontable team.
You should check out the library demo and see if it has all the features you need.
ParamQuery grid
The jQuery-based ParamQuery Grid Library is a really good and open source library that you can use to integrate data grids into your website. The library is very efficient at what it does and can easily handle over 100,000 records.
Although it was developed as a jQuery plugin, the library can be easily used with frameworks such as Angular, React, Knockout and VueJS. You can also integrate it into your website with vanilla JavaScript.
You can also copy and paste data to and from Excel. Features like autofill and state management make working with data grids easier. The library comes with undo and redo functionality along with the history of changes. It also supports online editing with support for batch, line and multiline editing.
Data migration is not a problem because you will be able to export your data in a variety of formats such as Excel, HTML, JSON and CSV. You can also import data from various sources and formats such as HTML, arrays, XML and JSON to populate data grids.
Virtual scrolling and rendering allow you to have support for seemingly infinite rows and columns. You can also make your data grids pretty with the help of different themes. The library also offers internationalization features.
There are many other features in the library that I haven’t listed here. You should definitely have a look at the project homepage to find out more.
SlickGrid
SlickGrid is another free and open source grid library based on jQuery and jQuery UI. The original developer of the library worked on the project for some time, but then a fork of the library became active.
Newer versions of the library have dropped jQueryUI as a requirement and use a modern touch friendly library called SortableJS. You will still be able to use jQueryUI but it is now optional instead of being a requirement.
You can expect the library to have extremely fast rendering speed and adaptive virtual scrolling that can handle over a hundred thousand lines while still being responsive.
You can easily resize, reorder, show or hide columns in the grid. The library also supports forced fit and automatic resizing of columns. You can also easily create new lines and easily edit existing ones. The multi-field editor in the library comes with undo/redo support.
The library also supports background post-rendering to give a fresher look to your data grid. You should take a look at the examples posted in the repository wiki to see the full extent of its capabilities.
TanStack table
The TanStack Table Library is a modern and up-to-date library for creating powerful data tables and grids. This is actually a headless library, so it won’t come with any components, markup, or styles.
Being headless has its advantages and disadvantages. The library will be lightweight and portable with full control over the markup and styling of data grids. However, it will also require more work on your part to be fully functional.
This library also includes adapters for different libraries, tools and frameworks like React, Vue and Svelte. Therefore, you may also see it referring to React Table, Vue Table, and Svelte Table. All are powered by the same behind-the-scenes library.
You get many interesting and useful features with the library such as multi-column and multi-directional sorting, row selection and expansion, column visibility, sorting, locking and resizing. It also offers column and global filters with support for data grouping and aggregation.
Be sure to check out all the TanStack Table examples they have posted on their website.
Final thoughts
Implementing data grids alone will be a lot of work. In this post, I’ve listed some of the most popular, free, and open source JavaScript grid libraries that you can start using right away. You can also make your own changes to the source code of these projects to better suit your needs.
There are many other open source grid libraries you can find on GitHub. If the libraries listed here don’t offer what you’re looking for, try searching for some alternatives on GitHub. Some examples include framework specific solutions like React Datasheet and Angular UI Grid.
