Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredguile/ng2-md-datatable
Angular 5+ DataTable component for using with Material Design 2
https://github.com/fredguile/ng2-md-datatable
angular2 archived datatable deprecated material-design ng2-md-datatable obsolete pagination-component
Last synced: about 2 months ago
JSON representation
Angular 5+ DataTable component for using with Material Design 2
- Host: GitHub
- URL: https://github.com/fredguile/ng2-md-datatable
- Owner: fredguile
- License: mit
- Created: 2016-11-16T10:52:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-13T03:03:30.000Z (over 3 years ago)
- Last Synced: 2024-06-29T17:46:58.318Z (3 months ago)
- Topics: angular2, archived, datatable, deprecated, material-design, ng2-md-datatable, obsolete, pagination-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng2-md-datatable
- Size: 751 KB
- Stars: 38
- Watchers: 6
- Forks: 13
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-design - ng2-md-datatable - Another Angular 2 Maaterial Data Table (Angular / Components)
README
# **DEPRECATED** - ng2-md-datatable
**[this project is no longer actively maintained - please use [CDK Tables](https://material.angular.io/cdk/table/overview)]**
[]()
[](https://circleci.com/gh/fredguile/ng2-md-datatable)
[]()
[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).
As 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).
**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.
## Features
- Pagination Component
- Column sorting (ascending/descending)
- Row selection (using checkboxes)
- You can use it with @ngrx/store (that's how I use it)
## Working with
- Angular 5
- Material 5
## Installation
To use ng2-md-datatable in your project install it via [npm](https://www.npmjs.com/package/ng2-md-datatable):
```
npm install --save ng2-md-datatable
```
Then include it in your application's main module:
```ts
import { MatDataTableModule } from 'ng2-md-datatable';
@NgModule({
imports: [
...
MatDataTableModule,
...
```
## Usage
Your datatable would look like this in a Angular 2 template:
```
Article
Product
Quantity
K003-0350-001
Yirgacheffe Kaffee, 350g ganze Bohne
232
K003-0350-002
Yirgacheffe Kaffee, 350g gemahlen
124
K003-0350-003
Yirgacheffe Kaffee, 1kg ganze Bohne
464
K003-0350-003
Yirgacheffe Kaffee, 1kg gemahlen
243
```
Here's the pagination component:
```
```
As 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.
## Events
You should subscribe to these event emitters:
**src/components/datatable.component.ts**
```ts
@Output() selectionChange: EventEmitter;
@Output() sortChange: EventEmitter;
```
**src/components/datatable-pagination.component.ts**
```ts
@Output() paginationChange: EventEmitter;
```
Please read **src/common/events/*.ts** for details about the payload of each event.
## Theming
To add `ng2-md-datatable` to your Material 2 theming file:
```scss
@import '~ng2-md-datatable/datatable-theme';
...
@include mat-datatable-theme($theme);
```
This is based on the [current guide](https://github.com/angular/material2/blob/master/guides/theming.md) for theming components with Material RC.
## Live Demo
To see `ng2-md-datatable` in action, head to `/demo-app` and:
- you need `Angular-CLI` v1.0 or later (`npm install -g @angular/cli`)
- from the `demo-app` folder, run `npm install`
- then start `ng serve` or `ng serve --aot`
Don'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.
## Plunkr
Or you can open this Plunkr:
It's pretty much the same code than then `demo-app`.