20 Amazing Angular 4 Tables

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.

1. ng2 Table Demo

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.

Demo Code

2. Angular 2 Table Fluid Row Demo

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.

Documentation Code Demo

3. ng2 Table View

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.

Website Demo

4. ng2 Smart Table Library

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.

Documentation Code Demo

5. Angular 2 Data Table Bootstrap 4

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.

Code Demo

6. Angular2 Table Component

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.

Website Demo

7. Fancy Grid Angular 2 Example

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.

Demo

8. Best Angular Data Grid Table

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.

Website Demo Code

9. Angular 2 Super Table

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.

Documentation Code Demo

10. Vaadin Grid

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.

Code Demo

11. Polymer Iron Data Table or Grid

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.

Code Demo

12. Paper Datatable Implementation Example

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.

Code Demo

13. PrimeNG Datatable

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.

Demo

14. Easy Table in Angular2

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!

Code Demo

15. Kendo UI Angular Grid Component

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.

Demo

16. Angular 2 + 4 Tree Table

Angular 2 + 4 Tree Tableure

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.

Demo

17. Angular 2 Features Table++

angular-scheduler-spa

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.

Article Code

18. ngx-datatable

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.

Website Demo

19. W3C Angular 2 Table Example

W3C Angular 2 Table Example

The ng-repeat directive is perfect for displaying tables.

Demo

20. Angular 2 Flexigrid

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.

Website

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.

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *