https://github.com/sivsivsree/angular-json-table
Angular component to populate JSON to table in angular.
https://github.com/sivsivsree/angular-json-table
angular angular-module hacktoberfest json-table
Last synced: 2 months ago
JSON representation
Angular component to populate JSON to table in angular.
- Host: GitHub
- URL: https://github.com/sivsivsree/angular-json-table
- Owner: sivsivsree
- Created: 2018-12-07T14:17:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-04T10:37:56.000Z (over 3 years ago)
- Last Synced: 2025-10-11T20:38:39.087Z (6 months ago)
- Topics: angular, angular-module, hacktoberfest, json-table
- Language: TypeScript
- Homepage:
- Size: 377 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular JSON table module
Angular JSON Table is an Angular 4+ module to populate tables from the JSON data provided
[](https://badge.fury.io/js/angular-json-table)
# Features!
- Pagination
- Select and Delete rows
- Edit Rows
- Table header customizations
- Display only needed data than the whole JSON
### Installation
Requires requires *Angular2+*.
Install the module using npm.
```sh
$ cd my-angular2-project # Go to the project you are working on.
# Install the module using the following.
$ npm i angular-json-table --save
```
In the *app.module.ts*
Add ```JSONTableModule``` to the ```imports```.
```ts
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 { }
```
### Usage
In your ```custom.component.html``` add ```data-table``` to render the table from the JSON
```html
```
ie, in your ```custom.component.ts``` should be like:
```ts
// [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(row){
console.log(row); // Returns the row which is selected by clicking.
}
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.
}
```
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.
```js
[{
'id': 20,
'someFeild1': 'asdfasdf',
'someFeild2': 'asdf',
'someFeild3': 'asdfasdfasfasdfa',
},
....
{
'id': 81,
'someFeild1': 'aasdfsdf',
'someFeild2': 'asasdfdf',
'someFeild3': 'dfasfasdfa',
},
]
```
### Properties
##### Inputs
```[dataSource] ``` : The JSON data input
```[headers]``` : The Headers need to render the Table
```[update]```: Booelan ```true``` to Enable data modification / ```false``` to disable.
```[update]```: Booelan ```true``` to Enable row deletion / ```false``` to disable.
##### Output
```(selectRow)``` : Callback when a row is selected , returns the row object with ```id```
```(deleteRow)``` : Callback to delete the Row, with the array of `[ids]`
```(updateRow)``` : Callback to get the Updated, with the row object with ```id```
#### Run
Run the angular to test out the table implementation:
```sh
$ ng serve
```
License
----
MIT
[](https://sivsivsree.github.io)