{"id":17725627,"url":"https://github.com/bacali95/ngx-json-table","last_synced_at":"2026-02-27T23:42:34.022Z","repository":{"id":97417425,"uuid":"252030896","full_name":"bacali95/ngx-json-table","owner":"bacali95","description":"Angular Json Data Table component.","archived":false,"fork":false,"pushed_at":"2025-03-02T07:42:35.000Z","size":4951,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T20:11:52.738Z","etag":null,"topics":["angular","editable-table","json-table","table"],"latest_commit_sha":null,"homepage":"https://bacali95.github.io/ngx-json-table/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bacali95.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-04-01T00:27:20.000Z","updated_at":"2025-03-04T04:04:26.000Z","dependencies_parsed_at":"2025-06-24T20:06:29.200Z","dependency_job_id":"f51a28ce-c451-4438-a4f7-d9fbc7f09ad0","html_url":"https://github.com/bacali95/ngx-json-table","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":0.2777777777777778,"last_synced_commit":"f14b8a37d75d2ff337639576726237c637ea101f"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/bacali95/ngx-json-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacali95%2Fngx-json-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacali95%2Fngx-json-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacali95%2Fngx-json-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacali95%2Fngx-json-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bacali95","download_url":"https://codeload.github.com/bacali95/ngx-json-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bacali95%2Fngx-json-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270191798,"owners_count":24542317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","editable-table","json-table","table"],"created_at":"2024-10-25T16:05:07.942Z","updated_at":"2026-02-27T23:42:29.002Z","avatar_url":"https://github.com/bacali95.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular JSON Table\n\n[![CI Status](https://github.com/bacali95/ngx-json-table/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bacali95/ngx-json-table/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/bacali95/ngx-json-table/graph/badge.svg?token=1SMJ9VD69B)](https://codecov.io/gh/bacali95/ngx-json-table)\n![NPM Version](https://img.shields.io/npm/v/ngx-json-table)\n\nngx-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.\n\n## Demo\n\n\u003ca target=\"_blank\" href=\"https://bacali95.github.io/ngx-json-table/\"\u003eLive Demo\u003c/a\u003e\n\n## Features\n\n- Display JSON objects and arrays in a structured HTML table\n- Inline add/edit/delete capabilities for both keys and values\n- Sorting functionality with customizable direction\n- Expandable/collapsible nested objects and arrays\n- JSON file import functionality\n- Multiple icon packages support (Basic, Font Awesome, Material Design)\n- Fully customizable table styling\n- Two-way data binding support\n- Type-safe with TypeScript\n\n## Installation\n\nInstall the library using npm or yarn:\n\n```bash\n# Using npm\nnpm install --save ngx-json-table\n\n# Using yarn\nyarn add ngx-json-table\n```\n\n## Basic Usage\n\n1. Import the NgxJsonTableModule in your application module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgxJsonTableModule } from 'ngx-json-table';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, NgxJsonTableModule],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n2. Use the component in your template:\n\n```html\n\u003c!-- Basic usage with default settings --\u003e\n\u003ctable ngx-json-table [data]=\"yourJsonData\"\u003e\u003c/table\u003e\n\n\u003c!-- With custom settings --\u003e\n\u003ctable ngx-json-table [data]=\"yourJsonData\" [settings]=\"tableSettings\"\u003e\u003c/table\u003e\n```\n\n3. Define your data and settings in your component:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { Settings, JsonValue } from 'ngx-json-table';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {\n  // Your JSON data\n  yourJsonData: JsonValue = {\n    product: 'NGX JSON Table',\n    version: 1.0,\n    features: ['Sorting', 'Editing', 'Nested objects'],\n    configuration: {\n      sortable: true,\n      editable: true,\n    },\n  };\n\n  // Optional settings\n  tableSettings: Settings = {\n    sortable: true,\n    sortDirection: 'asc',\n    expandAll: true,\n    loadFromFile: true,\n    options: {\n      add: true,\n      edit: {\n        key: true,\n        value: true,\n      },\n      delete: true,\n    },\n  };\n}\n```\n\n## Configuration Options\n\nThe `Settings` interface provides various options to customize your table:\n\n```typescript\nexport type Settings = {\n  // Customize the key column\n  key?: {\n    headerText?: string; // Default: \"Key\"\n    width?: string; // Default: \"40%\"\n  };\n\n  // Customize the value column\n  value?: {\n    headerText?: string; // Default: \"Value\"\n    width?: string; // Default: \"60%\"\n  };\n\n  // Enable/disable operations\n  options?: {\n    add?: boolean; // Enable adding new properties\n    edit?: {\n      key?: boolean; // Enable editing keys\n      value?: boolean; // Enable editing values\n    };\n    delete?: boolean; // Enable deleting properties\n  };\n\n  sortable?: boolean; // Enable sorting\n  sortDirection?: 'asc' | 'desc'; // Default sort direction\n  expandAll?: boolean; // Expand all nested objects by default\n  loadFromFile?: boolean; // Show button to load JSON from file\n\n  // Icon package to use\n  iconPackage?: 'basic' | 'font-awesome' | 'material-design';\n};\n```\n\n## Events\n\nThe component provides events to react to data changes:\n\n```html\n\u003ctable ngx-json-table [data]=\"data\" (dataChange)=\"onDataChange($event)\"\u003e\u003c/table\u003e\n```\n\n```typescript\nonDataChange(newData: JsonValue) {\n  console.log('Data changed:', newData);\n  // Update your application state or perform other actions\n}\n```\n\n## Icon Packages\n\nngx-json-table supports three icon packages out of the box:\n\n1. **Basic**: Default package using HTML entities (no external dependencies)\n2. **Font Awesome**: Requires Font Awesome to be installed\n3. **Material Design**: Requires Material Icons to be installed\n\nTo use a specific icon package:\n\n```typescript\ntableSettings: Settings = {\n  iconPackage: 'material-design',\n  // other settings...\n};\n```\n\n## Complete Example\n\nHere's a complete example with all features enabled:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { Settings, JsonValue } from 'ngx-json-table';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    \u003ctable\n      ngx-json-table\n      [data]=\"data\"\n      [settings]=\"settings\"\n      (dataChange)=\"onDataChange($event)\"\u003e\u003c/table\u003e\n  `,\n})\nexport class ExampleComponent {\n  settings: Settings = {\n    key: {\n      headerText: 'Property',\n      width: '30%',\n    },\n    value: {\n      headerText: 'Data',\n      width: '70%',\n    },\n    sortable: true,\n    sortDirection: 'asc',\n    expandAll: true,\n    loadFromFile: true,\n    iconPackage: 'font-awesome',\n    options: {\n      add: true,\n      edit: {\n        key: true,\n        value: true,\n      },\n      delete: true,\n    },\n  };\n\n  data: JsonValue = {\n    // Your JSON data here...\n  };\n\n  onDataChange(newData: JsonValue) {\n    console.log('Data updated:', newData);\n    this.data = newData;\n  }\n}\n```\n\n## Browser Support\n\nngx-json-table supports all major browsers and platforms, including:\n\n- Chrome, Firefox, Edge, Safari, Opera\n- Mobile browsers (iOS, Android)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\n[MIT](LICENSE.txt) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbacali95%2Fngx-json-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbacali95%2Fngx-json-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbacali95%2Fngx-json-table/lists"}