ngx-json-table is a flexible Angular component designed to display and edit JSON objects as HTML tables. The library provides powerful features for data manipulation, including inline adding, editing, and deleting of JSON properties and values.
- Display JSON objects and arrays in a structured HTML table
- Inline add/edit/delete capabilities for both keys and values
- Sorting functionality with customizable direction
- Expandable/collapsible nested objects and arrays
- JSON file import functionality
- Multiple icon packages support (Basic, Font Awesome, Material Design)
- Fully customizable table styling
- Two-way data binding support
- Type-safe with TypeScript
Install the library using npm or yarn:
# Using npm npm install --save ngx-json-table # Using yarn yarn add ngx-json-table- Import the NgxJsonTableModule in your application module:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxJsonTableModule } from 'ngx-json-table'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, NgxJsonTableModule], bootstrap: [AppComponent], }) export class AppModule {}- Use the component in your template:
<!-- Basic usage with default settings --> <table ngx-json-table [data]="yourJsonData"></table> <!-- With custom settings --> <table ngx-json-table [data]="yourJsonData" [settings]="tableSettings"></table>- Define your data and settings in your component:
import { Component } from '@angular/core'; import { Settings, JsonValue } from 'ngx-json-table'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { // Your JSON data yourJsonData: JsonValue = { product: 'NGX JSON Table', version: 1.0, features: ['Sorting', 'Editing', 'Nested objects'], configuration: { sortable: true, editable: true, }, }; // Optional settings tableSettings: Settings = { sortable: true, sortDirection: 'asc', expandAll: true, loadFromFile: true, options: { add: true, edit: { key: true, value: true, }, delete: true, }, }; }The Settings interface provides various options to customize your table:
export type Settings = { // Customize the key column key?: { headerText?: string; // Default: "Key" width?: string; // Default: "40%" }; // Customize the value column value?: { headerText?: string; // Default: "Value" width?: string; // Default: "60%" }; // Enable/disable operations options?: { add?: boolean; // Enable adding new properties edit?: { key?: boolean; // Enable editing keys value?: boolean; // Enable editing values }; delete?: boolean; // Enable deleting properties }; sortable?: boolean; // Enable sorting sortDirection?: 'asc' | 'desc'; // Default sort direction expandAll?: boolean; // Expand all nested objects by default loadFromFile?: boolean; // Show button to load JSON from file // Icon package to use iconPackage?: 'basic' | 'font-awesome' | 'material-design'; };The component provides events to react to data changes:
<table ngx-json-table [data]="data" (dataChange)="onDataChange($event)"></table>onDataChange(newData: JsonValue) { console.log('Data changed:', newData); // Update your application state or perform other actions }ngx-json-table supports three icon packages out of the box:
- Basic: Default package using HTML entities (no external dependencies)
- Font Awesome: Requires Font Awesome to be installed
- Material Design: Requires Material Icons to be installed
To use a specific icon package:
tableSettings: Settings = { iconPackage: 'material-design', // other settings... };Here's a complete example with all features enabled:
import { Component } from '@angular/core'; import { Settings, JsonValue } from 'ngx-json-table'; @Component({ selector: 'app-example', template: ` <table ngx-json-table [data]="data" [settings]="settings" (dataChange)="onDataChange($event)"></table> `, }) export class ExampleComponent { settings: Settings = { key: { headerText: 'Property', width: '30%', }, value: { headerText: 'Data', width: '70%', }, sortable: true, sortDirection: 'asc', expandAll: true, loadFromFile: true, iconPackage: 'font-awesome', options: { add: true, edit: { key: true, value: true, }, delete: true, }, }; data: JsonValue = { // Your JSON data here... }; onDataChange(newData: JsonValue) { console.log('Data updated:', newData); this.data = newData; } }ngx-json-table supports all major browsers and platforms, including:
- Chrome, Firefox, Edge, Safari, Opera
- Mobile browsers (iOS, Android)
Contributions are welcome! Please feel free to submit a Pull Request.
MIT license.