- Datatables.net: It is a very powerful plugin for creating tables using jQuery. It comes with functionality like sorting, searching and pagination without any configuration. The data table can work with data coming from a variety of different sources like plain HTML, or a custom array before initialization, any server-side data or even data from coming from Ajax. One of the best functionality the I personally like is when there is no data from the source, it automatically shows “No data available” instead of breaking. Datatables library provides a lot of configuration and its simple API makes it work flawlessly. You have both the options, you can use their CDN or directly download the library and integrated into your code. Since data tables is an open-source library you can also modify the code as per your needs.
- Clusturize.js: So you have a large amount of data like 10,000 rows with X amount of columns. If you render this data in a normal <table> tag, you’ll notice that scrolling is not as smooth as it used to be when working with small data. Is this situation clusturize.js will help you. Clusturize.js actually loads only a certain amount of data or you can say the data which is visible in viewport and renders the remaining data when needed. This not only helps in making the scrolling smooth but also helps in increasing load time faster. But how does it work? So basically it converts the whole table into a container and only the visible part is generated in the container. It divides the content into small clusters and loads them when needed, that’s it is named as clusturize.js. So when someone scrolls in the container it automatically loads the remaining data which can fir the container. By default, it loads only 50 rows but it can be changed as per the requirements. Again like data tables, crulturize.js is also open source and hence you can modify the code. It also comes with CDN as well as full source code download.
- FooTable: Footable is another jQuery table plugin and its best part is it doesn’t use bootstrap. That means you don’t need to include bootstrap along with this plugin. It works on two principles first, is to hide certain columns at the breakpoint in the CSS while the second is to add rows that can easily become expandable to show the data which was hidden at the breakpoint. The different device has a different breakpoint, for example, mobile has by default 480px, the tablet has 1024 and so on. Hence on mobile devices, it hides some column while in the tablet, it’ll show all of them if it can fit under the breakpoint.
- React-virtualized: It is more a method to display a list than a table tag. React virtualized works on an array of objects rather than any other data type. It basically created a window in which there is a large list of `div`. Again it is also based on the same fact that the table should only render the visible part rather than loading the full list at once. Apart from the table, it has many other applications like comment section, grid display, scroll sync, collections etc. It also needs node js for installation.
In react-virtualized you also need to define the height and width of the window, and under this dimension, your data will be rendered. You can count this fact under advantage as well as disadvantage also. This is a bit difficult to understand but once you get used to it, react-virtualized becomes the most flexible plugin in the list. It’s alternative is react-window which is smaller or you can say a lightweight version of react-virtualized.
- Recline: It is a simple but amazingly powerful data visualization tool completely build on pure JS and HTML. It uses the combination of best libraries like SlickGrid, Flot and D3 to create a different type of views and allows you to display data in different ways. It takes JSON as input and processes them. This library consists of 3 parts which are Models, Backends and Views. Models are actually the data sets which acts as an input. Backends connect Models to the data source like Google Docs, any local CSV etc. While Views are the UI components where the data is rendered for example graphs, maps, tables, grids or timeline.
- Material Design Data Table: It is a bit different from the others and takes some efforts to understand ad implement. They mostly appear in desktop enterprise applications and mostly used to display raw data.
- Ngx-datatable: It is an Angular component to render large and complex data set. Ngx-datatable has most of the features that we have discussed so far in this list but in a light package. The table uses virtual DOM to render the data and has features like reordering, vertical as well as horizontal scrolling, sorting, searching etc. The rendered data can also be exported in CSV which makes it a different from the other libraries and also allows to filter columns. Ngx-data table also allows you to include external CSS as an extension to adapt the styling of the parent div or website. You can also use it as live data display, for example, live scoring etc. By default, it comes with a dark and light theme.
- Angular Datatables: As the name suggests it is the combination of Angular Js and datatables.net To use this table you need to have Node js and angular CLI installed. It also comes with functionalities like searching, sorting, pagination. The advantage with angular datatable is that you can use it on server-side as well. Their documentation show exactly what you need to do. Once you’re up and running just run a few sets of commands and you’re ready to start.
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
- Vuetable-2: Formerly vuetable, currently on version 2.0.0-beta 1. You can pass your own data stream or pass data coming from API. Vuetable also allows you to customize field data using the inbuilt formatting tool if required. To use Vuetable you need to install two dependencies as well that is vue.js and Axios. There are two modes in which you can work with vuetable the first one is API mode, as the name suggests when you’re working with API endpoints you can use this mode. The second mode is Data mode if you’re working with manual or existing data you can use this mode. There are many features that only API mode supports, for example, load data on the start, pass query parameters, append query parameters, sort the incoming data from API.
- jTable: It is a jQuery plugin which is used to create AJAX based CRUD tables. jTable automatically creates HTML based table from the data coming from the server using the capability of AJAX. It comes with the flexibility of CRUD, which means it can create a new record in the database when the user fills the form. In the same, it can delete, update the data as well. It also comes with predefined colour themes and you can also use your own CSS.
- Ember Table: This table is made for developers who needs a full-fledged, easy to customize, scalable as well as a flexible table for their application. Ember table also has the feature to display data in tree and children form.
- StreamTable.js: It can be said that StreamTable is another layer of the table on an existing table. It uses Mustache.js, HandleBars.js to render the data. So you want to render thousands of rows, what StreamTable does is that it loads 20-30 rows initially and renders rest of the data silently in the background and update the data. It helps to load the data faster and also serves it immediately for CRUD operations. Another important point to note that if a user stays on the same page for a longer time, it starts to delay the rendering and complete the user’s task like searching, pagination etc.
- FancyGrid: It is a lightly styled and simple table with functionalities like filtering, searching, sorting functionalities. You can use FancyGrid library to create tables as well as for visualization purpose also, for example, you can use it to create heat maps, graphs, charts and forms as well. You can also edit the data inline as well. FancyGrid also supports several themes like blue, bootstrap, dark, default, grey, extra-grey, dark and sand.
- Stackable.js: It is a mobile-focused library that uses jQuery and goals to make the table mobile-friendly by adjusting and optimizing the layout for smaller resolutions. There are not many options available in this library as it focuses more on device compatibility.
- Griddle: It is a highly customizable table to react. Like FancyGrid this library can also be used to display maps, display data as a list of cards, nested data etc. It uses state and selectors to render the table.