{"id":17700517,"url":"https://github.com/benwinding/ngx-auto-table","last_synced_at":"2025-05-13T10:40:34.286Z","repository":{"id":42041370,"uuid":"177693960","full_name":"benwinding/ngx-auto-table","owner":"benwinding","description":"A simple to use data table for Angular","archived":false,"fork":false,"pushed_at":"2022-07-05T00:43:20.000Z","size":18852,"stargazers_count":3,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T13:04:47.294Z","etag":null,"topics":["angular","datatable","table"],"latest_commit_sha":null,"homepage":"https://benwinding.github.io/ngx-auto-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/benwinding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T01:40:53.000Z","updated_at":"2023-05-31T10:08:50.000Z","dependencies_parsed_at":"2022-09-15T21:31:32.250Z","dependency_job_id":null,"html_url":"https://github.com/benwinding/ngx-auto-table","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fngx-auto-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fngx-auto-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fngx-auto-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fngx-auto-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benwinding","download_url":"https://codeload.github.com/benwinding/ngx-auto-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253924689,"owners_count":21985160,"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":["angular","datatable","table"],"created_at":"2024-10-24T17:42:26.443Z","updated_at":"2025-05-13T10:40:34.264Z","avatar_url":"https://github.com/benwinding.png","language":"TypeScript","readme":"# ngx-auto-table\n\n\u003c!-- [START badges] --\u003e\n[![NPM Version](https://img.shields.io/npm/v/ngx-auto-table.svg)](https://www.npmjs.com/package/ngx-auto-table) \n[![License](https://img.shields.io/npm/l/ngx-auto-table.svg)](https://github.com/benwinding/ngx-auto-table/blob/master/LICENSE) \n[![Downloads/week](https://img.shields.io/npm/dm/ngx-auto-table.svg)](https://www.npmjs.com/package/ngx-auto-table) \n[![Github Issues](https://img.shields.io/github/issues/benwinding/ngx-auto-table.svg)](https://github.com/benwinding/ngx-auto-table)\n\u003c!-- [END badges] --\u003e\n\nA simple to use data table for Angular. (Wrapper around the Material Table)\n\n## [Demo](https://benwinding.github.io/ngx-auto-table/index.html)\n\n### Features include\n- Default filtering and sorting of all data\n- Uses RXJS observables\n- Uses angular material theme and icons under the hood\n- Row and Bulk actions, easily configurable\n- Typed Data passed into the configuration\n- Custom ng-templates for each column\n- All configuration options [can be found here.](https://github.com/benwinding/ngx-auto-table/blob/master/projects/ngx-auto-table/src/lib/models.ts#L37) \n\n#### Install\n`yarn add ngx-auto-table`\n\nThen add to your imports\n\n``` typescript\nimport { AutoTableModule } from 'ngx-auto-table';\n\nimports: [\n  ...\n  AutoTableModule,\n  ...\n]\n```\n\nThen add this to your tsconfig:\n\n``` json\n  \"compilerOptions\": {\n    ...\n    \"paths\": {\n      \"@angular/*\": [\"node_modules/@angular/*\"]\n    }\n```\n#### Usage\n- Add the table to the HTML template\n``` html\n\u003cngx-auto-table \n  [config]=\"config\" \n  [columnDefinitions]=\"{\n    name: {},\n    age: {}\n  }\"\n\u003e\n\u003c/ngx-auto-table\u003e\n```\n- Add config object to the typescript\n``` typescript\nconfig: AutoTableConfig\u003cUser\u003e;\n\nngOnInit() {\n  this.config = {\n    data$: people$\n  };\n}\n```\n#### Sorting/Ordering\n``` typescript\nthis.config = {\n  data$: people$,\n  // Initially sort by the \"name\" column\n  initialSort: 'name';\n  // Initially sort in Descending order\n  initialSortDir: \"desc\";\n};\n```\n\n#### Row Operations\n``` typescript\nthis.config = {\n  data$: people$,\n  actions: [\n    {\n      label: 'Delete',\n      icon: 'delete', // material icon set\n      onClick: (p: User) =\u003e {\n        // Do stuff\n      }\n    }\n  ]\n};\n```\n\n#### Bulk Row Operations\n``` typescript\nthis.config = {\n  data$: people$,\n  actionsBulk: [\n    {\n      label: 'Delete',\n      icon: 'delete', // material icon set\n      onClick: (p: User) =\u003e {\n        // Do stuff\n      }\n    }\n  ]\n};\n```\n\n#### Custom Templates\n``` html\n\u003cngx-auto-table \n  [config]=\"config\" \n  [columnDefinitions]=\"{\n    name: {},\n    age: {},\n    email: {template: emailTemplate}\n  }\"\n\u003e\n  \u003cng-template #emailTemplate let-row\u003e\n    \u003ca [href]=\"'mailto:'+row.email\"\u003e{{ row.email }} \u003c/a\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-auto-table\u003e\n```\n\n#### Basic Example Component\nTo use the table in a component, simply add it to the template and feed it an obseravble in the Typescript file.\n\n``` typescript\nimport { Component, OnInit } from '@angular/core';\nimport { AutoTableConfig } from 'ngx-auto-table/dist/public_api';\nimport { of, Observable } from 'rxjs';\n\ninterface User {\n  name: string;\n  age: number;\n}\n\nconst sampleUsers: User[] = [\n  { name: 'Frank', age: 22 },\n  { name: 'Albert', age: 34 },\n  { name: 'Jasper', age: 29 },\n  { name: 'Hugo', age: 23 }\n];\n\n@Component({\n  selector: 'app-auto-table-test',\n  template: `\n    \u003cdiv\u003e\n      \u003cngx-auto-table [config]=\"config\" [columnDefinitions]=\"{\n        name: {},\n        age: {}\n      }\"\u003e\n      \u003c/ngx-auto-table\u003e\n    \u003c/div\u003e\n  `\n})\nexport class AutoTableTestComponent implements OnInit {\n  config: AutoTableConfig\u003cUser\u003e;\n\n  ngOnInit() {\n    const people$: Observable\u003cUser[]\u003e = of(sampleUsers);\n    this.config = {\n      data$: people$\n    };\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Fngx-auto-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenwinding%2Fngx-auto-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Fngx-auto-table/lists"}