{"id":22355440,"url":"https://github.com/paaragon/ngxtable","last_synced_at":"2026-04-14T06:33:19.314Z","repository":{"id":39541655,"uuid":"186986894","full_name":"paaragon/NgxTable","owner":"paaragon","description":"Table component for angular","archived":false,"fork":false,"pushed_at":"2023-01-07T05:32:11.000Z","size":6345,"stargazers_count":1,"open_issues_count":27,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T17:29:02.325Z","etag":null,"topics":["angular7","component","directive","dynamic-table","font-awesome","javascript","table","typescript","validation"],"latest_commit_sha":null,"homepage":null,"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/paaragon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-16T08:36:00.000Z","updated_at":"2023-09-07T11:25:02.000Z","dependencies_parsed_at":"2023-02-06T12:46:34.063Z","dependency_job_id":null,"html_url":"https://github.com/paaragon/NgxTable","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paaragon%2FNgxTable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paaragon%2FNgxTable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paaragon%2FNgxTable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paaragon%2FNgxTable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paaragon","download_url":"https://codeload.github.com/paaragon/NgxTable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245659050,"owners_count":20651525,"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","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":["angular7","component","directive","dynamic-table","font-awesome","javascript","table","typescript","validation"],"created_at":"2024-12-04T14:06:31.957Z","updated_at":"2025-10-11T12:34:20.596Z","avatar_url":"https://github.com/paaragon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxTable\n\n![build status](https://api.travis-ci.org/paaragon/NgxTable.svg?branch=master)\n[![Maintainability](https://api.codeclimate.com/v1/badges/cba69b0a419e34a804da/maintainability)](https://codeclimate.com/github/paaragon/NgxTable/maintainability)\n\nThis library offers an Angular component that allows you to display your data in a table.\n\n## DEMO\n\n[Try it out!](https://paaragon.github.io/NgxTable/)\n\n![demo gif](https://raw.githubusercontent.com/paaragon/NgxTable/master/doc-assets/ngx-table.gif)\n\nThis table handles different events that can be implemented by the developers that use it.\n\nThe events are the following:\n\n- [Sort](https://github.com/paaragon/NgxTable/wiki/Sort)\n- [Filter](https://github.com/paaragon/NgxTable/wiki/Filter)\n- [Create](https://github.com/paaragon/NgxTable/wiki/Create)\n- [Edit](https://github.com/paaragon/NgxTable/wiki/Edit)\n- [Delete](https://github.com/paaragon/NgxTable/wiki/Delete)\n- [Pagination](https://github.com/paaragon/NgxTable/wiki/Pagination)\n\nOther features:\n\n- Field validation\n- Filter operators\n- Autocomplete\n\n## Instalation\n\n`npm install --save @paaragon/ngx-table`\n\n## Dependencies\n\n- Font awesome:\n\n`npm i font-awesome`\n\nOn your `angular.json`\n\n```json\n\"styles\": [\n  \"node_modules/font-awesome/css/font-awesome.min.css\"\n],\n```\n\n## Include\n\n```typescript\n// ...\nimport { NgxTableModule } from '@paaragon/ngx-table';\n\n@NgModule({\n  // ...\n  imports: [\n    // ...\n    NgxTableModule,\n  ],\n  // ...\n})\nexport class AppModule { }\n```\n\n## Usage\n\nYour component.ts\n\n```typescript\nconst exampleData: any[] = [\n    { name: 'Delbert', lastname: 'Keeling', birthdate: new Date(1990, 1, 21), company: 'Gislason, Braun and Kerluke', salary: 30432 },\n    { name: 'Karine', lastname: 'Rice', birthdate: new Date(1982, 3, 1), company: 'Thiel - Connelly', salary: 29188 },\n    { name: 'Rachelle', lastname: 'Flatley', birthdate: new Date(1985, 10, 16), company: 'Bradtke, Donnelly and Gottlieb', salary: 27026 },\n    { name: 'Gardner', lastname: 'Lindgren', birthdate: new Date(1982, 9, 20), company: 'Crist - Klein', salary: 52676 }\n];\n```\n\nYoue component.html\n```html\n\u003cngx-table [data]=\"exampleData\"\u003e\u003c/ngx-table\u003e\n```\n\n### Events\n\n#### Sort\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" (sort)=\"onSort($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonSort(sort: NgxTableSort) {\n // your sort logic\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableSort {\n    field: string;\n    direction: 1 | -1;\n}\n```\n\n[Sort documentation](https://github.com/paaragon/NgxTable/wiki/Sort)\n\n#### Filter\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" (filter)=\"onFilter($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonFilter(filterObj: NgxTableFilter ) {\n // your filter logic\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableFilter {\n    [key: string]: { operator: NgxTableOperator, value: string };\n}\n```\n\n[Filter documentation](https://github.com/paaragon/NgxTable/wiki/Filter)\n\n#### Create\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" (create)=\"onCreate($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonCreate(newObj: NgxTableNew) {\n // your create logic\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableNew {\n    [key: string]: any;\n}\n```\n\n[Create documentation](https://github.com/paaragon/NgxTable/wiki/https://github.com/paaragon/NgxTable/wiki/Create)\n\n#### Edit\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" (edit)=\"onEdit($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonSort(sort: NgxTableEdition) {\n // your edition logic\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableEdition {\n    index: number;\n    row: any;\n}\n```\n\n[Edit documentation](https://github.com/paaragon/NgxTable/wiki/Edit)\n\n#### Delete\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" (delete)=\"onDelete($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonDelete(delObj: NgxTableDelete) {\n // your delete logic\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableDelete {\n    numrow: number;\n    row: any;\n}\n```\n\n[Delete documentation](https://github.com/paaragon/NgxTable/wiki/Delete)\n\n#### Pagination\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" [totalElements]=\"totalelements\" (page)=\"onPage($event)\"\u003e\u003c/ngx-table\u003e\n```\n\nYour component.ts\n```typescript\nonPage(page: number) {\n    // your pagination logic here\n}\n```\n\nEvent argument interface\n```typescript\ninterface NgxTableDelete {\n    numrow: number;\n    row: any;\n}\n```\n\n*TODO - Create and link wiki page*\n\n## Config\n\nYou can provide a config object to customize your table.\n\nYour component.html\n```html\n\u003cngx-table [data]=\"exampleData\" [config]=\"config\"\u003e\u003c/ngx-table\u003e\n```\n\nConfig interface\n\n```typescript\ninterface NgxTableConfig {\n    placeholders?: NgxTablePlaceholders;\n    sort?: {\n        enable?: boolean\n    };\n    filter?: {\n        enable: boolean,\n        debounceTime?: number,\n        validations?: {\n            [key: string]: {\n                regex: string,\n                errorMsg?: string\n            }\n        },\n        lock?: string[],\n        operators?: NgxTableOperator[]\n    };\n    create?: {\n        enable: boolean,\n        validations?: {\n            [key: string]: {\n                regex: string,\n                errorMsg?: string,\n                optional?: boolean\n            }\n        },\n        lock?: string[]\n    };\n    delete?: {\n        enable: boolean\n    };\n    edit?: {\n        enable: boolean,\n        longContent?: number,\n        lock?: string[],\n        validations?: {\n            [key: string]: {\n                regex: string,\n                errorMsg?: string,\n                optional?: boolean\n            }\n        },\n    };\n    paginator?: {\n        enable: boolean,\n        elementsPerPage?: number,\n        visiblePages?: number\n    };\n    click?: {\n        enable: boolean\n    };\n}\n```\n\n[Config documentation](https://github.com/paaragon/NgxTable/wiki/Config)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaaragon%2Fngxtable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaaragon%2Fngxtable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaaragon%2Fngxtable/lists"}