Here are some pretty awesome Angular 4 Tables below which I have found to be the best of the best at the moment of writing this article. Tables are the essential building blocks of any great web application. Now we can build tables as Angular 4 components which can operate independently and it some cases you can just plug them it and they will work with your app.
As you know tables are not generally suited to mobile-centric designs and natively they don’t offer any functionality out of the box. In the case of mobile they basically just display data and that’s cool in most cases (as long as the styles are not broken and you can scroll the table rows easily).
However, with the web going all latest technologies and more modern web apps being build every day you might desire something more advanced from your tables functionality, such as responsive layouts, dynamic sorting, filtering of results, wildcard typeaheads, column sorting and other advanced features.
Featured: Handsontable
Handsontable is a JavaScript Spreadsheet component for web apps. It provides a spreadsheet experience you are already familiar with, so you can start working effectively from day one. It was created for developers, is high performance, and works with Angular.
It allows you to change, sort, and filter data, and gives you the ability to manually and programmatically change the order, size, and placement of columns and rows. While the grid component provides all the data grid operations on the front-end, it is also prepared to support back-end data operations through a wide range of callbacks.
Website Demos
1. ng2 Table Demo
Simple table extension with sorting, filtering, paging… for Angular2 apps. There are only simple table with 3 plugins/directives: filtering, paging, sorting. You don’t need special config variable for storing settings for all plugins as is used in demo example. It’s just showing usage sample.
The responsibility of the filtering issue falls on user. You should choose on which columns the filter would be applied. You could add any number of different filters. Filter string – it’s a string for matching values in raw data. Column name refers to the property name in raw data. The rest logic you could organize by yourself (the order of filters, data formats, etc). Even you could use filter for list of data columns.
2. Angular 2 Table Fluid Row Demo
ngx-datatable is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies. The table was designed to be extremely flexible and light; it doesn’t make any assumptions about your data or how you: filter, sort or page it. It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular >=4.0.0. This is the sister project of the angular-data-table that is designed for Angular 1.x.
3. ng2 Table View
Table component with sorting, filtering, paging, custom cell template, nested values bind … for Angular2. inspired by ng2-table. Make sure you have Nodejs as Best way to install NG2TableView is through npm.
4. ng2 Smart Table Library
Smart data table library with sorting, filtering, pagination & add/edit/delete functions. First thing you need to do is to import the ng2-smart-table directives into your component. The only required setting for the component to start working is a columns configuration. Features include: Local data source (Server/API DataSource is on its way), Filtering, Sorting, Pagination, Inline Add/Edit/Delete, Flexible event model.
5. Angular 2 Data Table Bootstrap 4
A simple Angular 2 data table, with built-in solutions for features including: pagination, sorting, row selection (single/multi), expandable rows, column, resizing, selecting visible columns. The component can be used not just with local data, but remote resources too: for example if the sorting and paging happen in the database. The templates use bootstrap CSS class names, so the component requires a bootstrap .css file to be present in the application using it. Check out the demo and its code for examples of how to use it.
6. Angular2 Table Component
In using TypeScript with Angular2, this provides an opportunity to strongly type some of the configuration parameters used by the table component.
7. Fancy Grid Angular 2 Example
FancyGrid have massive number of features like Paging, Sorting, Filtering, Validation, Ajax data, Files data, RESTful, flexible CRUD, Integration with charts, Form module, Theming, Touch Support, AngularJS directive and others.
8. Best Angular Data Grid Table
Examples of using ag-Grid with Angular and TypeScript. This is how to get started with ag-Grid and Angular as quickly as possible. You will start off with a simple application and section by section add Grid features to the application ending up with a fully fledged application, with ag-Grid and Angular at the heart of it. Please read the More Details section next to get a deeper understanding of how to use ag-Grid and Angular, as well as the options in installing dependencies and accessing the Enterprise Features.
9. Angular 2 Super Table
A feature-rich table component built with angular2. A table component with the following features: row virtualization, row sorting (stackable), cell formatting (text), custom cell component, column resizing and column-based filtering.
10. Vaadin Grid
Vaadin Grid is a fully featured datagrid for showing table data. It performs great even with huge data sets, fully supporting paging and lazy loading from any data source like a REST API. Grid allows you sort and filter data and customize how each cell gets rendered.
Vaadin Grid is a free, high quality data grid / data table element, built using Polymer. <vaadin-grid> is a free, high quality data grid / data table Polymer element, part of the Vaadin Core Elements. Running demos and tests in browser, Install polyserve: npm install -g polyserve, When in the vaadin-grid directory, run polyserve –open, browser will automatically open the component API documentation. You can also open demo or in-browser tests by adding demo or test to the URL.
11. Polymer Iron Data Table or Grid
iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer. iron-data-table displays a table or a grid of data. It builds on top of iron-list, which provides the foundation for features like virtual scrolling and templating. It contains an array of data-table-column elements, which are used to define a template for the cells on each row item. Rows use flex layout which enables cells to fit the available space. Cell elements are placed outside the shadow root of the iron-data-table which allows them to be styled by the user.
12. Paper Datatable Implementation Example
A material design implementation of a data table. Extremely simple to set up (simple demo), Pretty good styling support (demo), Pagination and external data sources (demo), Supporting both inline editing and in Material Design dialogs. Add new items on the fly (unpolished demo), Delightful details in sorting and partial selections. If you have ideas for more: let me know. Usable on mobile. Only tested on Chrome for Android, and it’s not great, but it doesn’t overflow or overlap anything.
13. PrimeNG Datatable
DataTable displays data in tabular format. DataTable requires a value as an array of objects and columns defined with p-column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable. Cars are loaded by a CarService that connects to a server to fetch the cars with a Promise.
14. Easy Table in Angular2
The easiest Angular2 table. This table always will be easy to add to every page. Beta version. Component may contains some issues, but feel free to add it to your page!
15. Kendo UI Angular Grid Component
The Kendo UI Angular Grid Component displays data in a tabular format and provides a full spectrum of configuration options. The Grid package is published on the Progress NPM Registry. To set up your access, follow the steps in the article on getting started.
16. Angular 2 + 4 Tree Table
Tree component currently supports Angular release version 2.x.x and 4.x.x. Filtering on the tree is not trivial, since the filtering process needs the keep the tree structure. For example, if one of the nodes is visible – we must display its parent, and grandparent etc. This is being taken care of by the treeModel ‘filterNodes’ function.
17. Angular 2 Features Table++
Angular CRUD ops, Modals, Animations, Pagination, DateTimePicker, Directives and much more. Step by step walkthrough to build Angular 2 SPAs using TypeScript using Visual Studio Code rich text editor for development.
18. ngx-datatable
The table was designed to be extremely flexible and light; it doesn’t make any assumptions about your data or how you: filter, sort or page it. That said, we wanted to keep the features strictly related to dealing with the data rather than implementing complex filtering/etc that is often very use-case specific.
The current features include: Handle large data sets ( Virtual DOM ), Expressive Header and Cell Templates, Horizontal & Vertical Scrolling, Column Reordering & Resizing, Client/Serve side Pagination & Sorting, Intelligent Column Width Algorithms ( Force-fill & Flex-grow ), Integrated Pager, Cell & Row Selection ( Single, Multi, Keyboard, Checkbox ), Fixed AND Fluid height, Left and Right Column Pinning, Row Detail View, Decoupled theme’ing , with included Google Material theme, Light codebase / No external dependencies.
19. W3C Angular 2 Table Example
The ng-repeat directive is perfect for displaying tables.
20. Angular 2 Flexigrid
Features like sorting, grouping and editing are built-in, while other bells and whistles are offered as optional extensions of FlexGrid. FlexGrid was first written in 1996 using C++ for Visual Basic (and even shipped as part of Visual Studio). It has since evolved and been refined in many platforms, the most recent being JavaScript. Lastly, we’re aligned with where Angular 2 is now.
Wrapping Up
These are just some of the Angular 4 plugins that you can use in your apps to improve your site functionality and appearance of your tables. Extra features such as filtering, searching, rows/column sorting, Ajax/JSON loading and more is available to make your users UX experience the best it can possibly be.
If there are any other table-based Angular 4 plugins that you use? We’d love to hear from you if you’ve used an awesome table plugin that’s not listed above.
Nice one. Is PrimeNG free and can it be used in commercial websites for free?
Great SEO, horrible content for actually helping people using angular 4
What about material.io . Can’t compare without including that
I think it’s new since you wrote this : https://material.angular.io/components/table/overview