ngx-json-table
v2.0.0
Published
Show and edit a JSON object using HTML table.
Downloads
17
Readme
Angular JSON Table
ngx-json-table component made to represent JSON object as a simple HTML table.
Demo
Live Demo
Installation
The library is available as npm package, so all you need to do is to run the following command:
npm install --save ngx-json-table
This command will create a record in your package.json
file and install the package into the npm modules folder.
Minimal Setup Example
First thing you need to do is to import the ngx-json-table directives into your component.
import { Ng2JsonTableModule } from 'ngx-json-table';
Then register it by adding to the list of directives of your module:
// ...
@NgModule({
imports: [
// ...
Ng2JsonTableModule,
// ...
],
declarations: [ ... ]
})
// ...
Now, we need to configure the table and add it into the template. There is no required setting for the component to start working (Settings documentation): So let's put the ngx-json-table component inside of the template:
// ...
@Component({
template: `
<ngx-json-table></ngx-json-table>
`
})
// ...
Still it seems like something is missing... Right, there is no data in the table by default. To add some, let's create any valid JSON object.
data: any = {
product: 'NGX JSON Table',
version: 1.0,
releaseDate: '2014-06-25T00:00:00.000Z',
demo: true,
person: {
id: 12345,
name: 'John Doe',
phones: {
home: '800-123-4567',
mobile: '877-123-1234'
},
email: ['[email protected]', '[email protected]'],
dateOfBirth: '1980-01-02T00:00:00.000Z',
registered: true,
emergencyContacts: [
{
name: 'Jane Doe',
phone: '888-555-1212',
relationship: 'spouse'
},
{
name: 'Justin Doe',
phone: '877-123-1212',
relationship: 'parent'
}
]
}
};
And pass the data to the table:
// ...
@Component({
template: `
<ngx-json-table [data]="data"></ngx-json-table>
`
})
// ...
Now you have some data in the table.
Further Documentation
Installation, customization and other useful articles: https://bacali95.github.io/ngx-json-table/
Features
- Inline Add/Edit/Delete
- Sorting
License
MIT license.