{"id":13637438,"url":"https://github.com/fredguile/ng2-md-datatable","last_synced_at":"2025-08-19T13:10:31.497Z","repository":{"id":96517952,"uuid":"73910898","full_name":"fredguile/ng2-md-datatable","owner":"fredguile","description":"Angular 5+ DataTable component for using with Material Design 2","archived":false,"fork":false,"pushed_at":"2021-04-13T03:03:30.000Z","size":769,"stargazers_count":38,"open_issues_count":4,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-24T02:07:36.094Z","etag":null,"topics":["angular2","archived","datatable","deprecated","material-design","ng2-md-datatable","obsolete","pagination-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng2-md-datatable","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/fredguile.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-16T10:52:08.000Z","updated_at":"2023-05-24T06:18:55.000Z","dependencies_parsed_at":"2023-05-22T17:45:37.689Z","dependency_job_id":null,"html_url":"https://github.com/fredguile/ng2-md-datatable","commit_stats":{"total_commits":113,"total_committers":8,"mean_commits":14.125,"dds":"0.23893805309734517","last_synced_commit":"40b909a1c30636e1b31e0a7644634465105c7703"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredguile%2Fng2-md-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredguile%2Fng2-md-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredguile%2Fng2-md-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredguile%2Fng2-md-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fredguile","download_url":"https://codeload.github.com/fredguile/ng2-md-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546080,"owners_count":21448260,"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":["angular2","archived","datatable","deprecated","material-design","ng2-md-datatable","obsolete","pagination-component"],"created_at":"2024-08-02T00:01:17.407Z","updated_at":"2025-04-24T02:07:44.608Z","avatar_url":"https://github.com/fredguile.png","language":"TypeScript","funding_links":[],"categories":["Angular"],"sub_categories":["Components"],"readme":"# **DEPRECATED** - ng2-md-datatable\n\n**[this project is no longer actively maintained - please use [CDK Tables](https://material.angular.io/cdk/table/overview)]**\n\n[![npm](https://img.shields.io/npm/v/ng2-md-datatable.svg)]()\n[![CircleCI](https://circleci.com/gh/fredguile/ng2-md-datatable.svg?style=svg)](https://circleci.com/gh/fredguile/ng2-md-datatable)\n[![downloads](https://img.shields.io/npm/dm/ng2-md-datatable.svg)]()\n\n[Angular 2](https://github.com/angular/angular) with [Material 2](https://github.com/angular/material2) is awesome, but it's still lacking a `DataTable` component (as of November 2016).\n\nAs I urgently needed one for a project, I decided to make my own `DataTable` component and share it on GitHub. This may be useful for you (or not).\n\n**Update 08/2017:** You may want to use [the official Material DataTable here](https://material.angular.io/components/table/overview). But if this one still speaks more to you, no problem I'll keep it up to date with the latest Angular 5+/Material5+ versions.\n\n## Features\n- Pagination Component\n- Column sorting (ascending/descending)\n- Row selection (using checkboxes)\n- You can use it with @ngrx/store (that's how I use it)\n\n## Working with\n- Angular 5\n- Material 5\n\n## Installation\nTo use ng2-md-datatable in your project install it via [npm](https://www.npmjs.com/package/ng2-md-datatable):\n```\nnpm install --save ng2-md-datatable\n```\n\nThen include it in your application's main module:\n\n```ts\nimport { MatDataTableModule } from 'ng2-md-datatable';\n\n@NgModule({\n  imports: [\n    ...\n    MatDataTableModule,\n    ...\n```\n\n## Usage\nYour datatable would look like this in a Angular 2 template:\n\n```\n\u003cng2-md-datatable selectable=\"true\"\u003e\n  \u003cng2-md-datatable-header\u003e\n    \u003cng2-md-datatable-column sortableValue=\"article\"\u003eArticle\u003c/ng2-md-datatable-column\u003e\n    \u003cng2-md-datatable-column sortableValue=\"product\"\u003eProduct\u003c/ng2-md-datatable-column\u003e\n    \u003cng2-md-datatable-column sortableValue=\"quantity\" numeric\u003eQuantity\u003c/ng2-md-datatable-column\u003e\n  \u003c/ng2-md-datatable-header\u003e\n  \u003ctbody\u003e\n    \u003cng2-md-datatable-row selectableValue=\"K003-0350-001\"\u003e\n      \u003ctd\u003eK003-0350-001\u003c/td\u003e\n      \u003ctd\u003eYirgacheffe Kaffee, 350g ganze Bohne\u003c/td\u003e\n      \u003ctd class=\"numeric\"\u003e232\u003c/td\u003e\n    \u003c/ng2-md-datatable-row\u003e\n    \u003cng2-md-datatable-row selectableValue=\"K003-0350-002\"\u003e\n      \u003ctd\u003eK003-0350-002\u003c/td\u003e\n      \u003ctd\u003eYirgacheffe Kaffee, 350g gemahlen\u003c/td\u003e\n      \u003ctd class=\"numeric\"\u003e124\u003c/td\u003e\n    \u003c/ng2-md-datatable-row\u003e\n    \u003cng2-md-datatable-row selectableValue=\"K003-0350-003\"\u003e\n      \u003ctd\u003eK003-0350-003\u003c/td\u003e\n      \u003ctd\u003eYirgacheffe Kaffee, 1kg ganze Bohne\u003c/td\u003e\n      \u003ctd class=\"numeric\"\u003e464\u003c/td\u003e\n    \u003c/ng2-md-datatable-row\u003e\n    \u003cng2-md-datatable-row selectableValue=\"K003-0350-004\"\u003e\n      \u003ctd\u003eK003-0350-003\u003c/td\u003e\n      \u003ctd\u003eYirgacheffe Kaffee, 1kg gemahlen\u003c/td\u003e\n      \u003ctd class=\"numeric\"\u003e243\u003c/td\u003e\n    \u003c/ng2-md-datatable-row\u003e\n  \u003c/tbody\u003e\n\u003c/ng2-md-datatable\u003e\n```\n\nHere's the pagination component:\n\n```\n\u003cng2-md-datatable-pagination\n  [currentPage]=\"1\"\n  [itemsPerPage]=\"5\"\n  [itemsCount]=\"700\"\n  [itemsPerPageChoices]=\"[5,10,20,50]\"\n  [itemsPerPageFirstChoice]=\"10\"\n\n  [needShowFirstArrow]=\"true\"\n  [needShowLastArrow]=\"true\"\n  ofText=\"of\"\n  rowsPerPageText=\"Rows per page:\"\n  \u003e\n\u003c/ng2-md-datatable-pagination\u003e\n```\n\nAs you might have noticed, these two components are not initially linked, it is up to you to bind them to your datasource and react to events they fire.\n\n## Events\n\nYou should subscribe to these event emitters:\n\n**src/components/datatable.component.ts**\n```ts\n@Output() selectionChange: EventEmitter\u003cDatatableSelectionEvent\u003e;\n@Output() sortChange: EventEmitter\u003cDatatableSortEvent\u003e;\n```\n\n**src/components/datatable-pagination.component.ts**\n```ts\n@Output() paginationChange: EventEmitter\u003cDatatablePaginationEvent\u003e;\n```\n\nPlease read **src/common/events/*.ts** for details about the payload of each event.\n\n## Theming\n\nTo add `ng2-md-datatable` to your Material 2 theming file:\n\n```scss\n@import '~ng2-md-datatable/datatable-theme';\n...\n@include mat-datatable-theme($theme);\n```\n\nThis is based on the [current guide](https://github.com/angular/material2/blob/master/guides/theming.md) for theming components with Material RC.\n\n## Live Demo\n\nTo see `ng2-md-datatable` in action, head to `/demo-app` and:\n\n- you need `Angular-CLI` v1.0 or later (`npm install -g @angular/cli`)\n- from the `demo-app` folder, run `npm install`\n- then start `ng serve` or `ng serve --aot`\n\nDon't mind about the use of Observables here (and about the Shuffle button), I just wanted to test if the datatable behaved correctly with Angular async rendering.\n\n## Plunkr\n\nOr you can open this Plunkr: \u003chttps://plnkr.co/edit/QQgr9b9HZLGjN1iDJqiy?p=preview\u003e \n\nIt's pretty much the same code than then `demo-app`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredguile%2Fng2-md-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffredguile%2Fng2-md-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredguile%2Fng2-md-datatable/lists"}