Angular JSON Table is an Angular 2+ module to populate tables from the data provided
- Pagination
- Select and Delete rows
- Edit Rows
- Table header customizations
- Display only needed data than the whole JSON
Angular JOSN Table uses a number of open source projects to work properly:
- [Angular2+] - HTML enhanced for web apps!
Requires requires [Angular2+].
Install the module using npmm.
$ cd my--angular-project $ npm i angular-json-table --saveIn the app.module.ts Add DataTableModule to the imports.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { JSONTableModule } from 'angular-json-table'; // import the Module. @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, JSONTableModule // Add the JSONTableModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Consider if you are having a json as the following: note: its Importent to have an unique feild named id in the json data to use the Delete and Update features.
dataSource: any = [{ 'id': 20, 'someFeild1': 'asdfasdf', 'someFeild2': 'asdf', 'someFeild3': 'asdfasdfasfasdfa', }, .... { 'id': 81, 'someFeild1': 'aasdfsdf', 'someFeild2': 'asasdfdf', 'someFeild3': 'dfasfasdfa', }, ]In your custom.component.html add data-table to render the table from the JSON
<json-table [dataSource]="dataFromServer" [headers]="customHeaders" [update]="true/false" (deleteRow)="deleteByIdS($event)" (updateRow)="updateChanges($event)"></json-table>ie, in your custom.component.ts should be like:
// [headers] are used to define the table head and show what are the feilds required. customHeaders: any = { thead: ['CUSTOM NAME 1', 'SOME COOL NAME', 'ANOTHER NAME'], // the Column Name in table head. displayed: ['someFeild1', 'someFeild2', 'someFeild3'] // the data it should populate in table. }; // JSON data can be from any source just need an `id` in order to update and delete. dataFromServer: any = [{ 'id': 20, 'someFeild1': 'asdfasdf', 'someFeild2': 'asdf', 'someFeild3': 'asdfasdfasfasdfa', }, .... { 'id': 81, 'someFeild1': 'aasdfsdf', 'someFeild2': 'asasdfdf', 'someFeild3': 'dfasfasdfa', }, ]; deleteByIdS(ids){ console.log(id); // this function gives the ID of deleted rows.. as an array } updateChanges(row){ console.log(row); // This return the row which is updated with the id. }[dataSource] : The JSON data input
[headers] : The Headers need to render the Table
[update]: Booelan true to Enable data modification / false to disable.
(deleteRow) : Callback to delete the Row, with the array of [ids]
(updateRow) : Callback to get the Updated, with the row object with id
Run the angualr to test out the table implementation:
$ ng serveMIT
