refactor: create a separate directive to style ngx-datatable

pull/4216/head
Arman Ozak 5 years ago
parent dc59842515
commit cd34500aa5

@ -20,7 +20,7 @@
</div>
<div class="card-body">
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
<ngx-datatable-column
[name]="'AbpIdentity::Actions' | abpLocalization"
[maxWidth]="150"

@ -30,7 +30,7 @@
</div>
</div>
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
<ngx-datatable-column
[name]="'AbpIdentity::Actions' | abpLocalization"
[maxWidth]="150"

@ -31,7 +31,7 @@
</div>
</div>
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
<ngx-datatable-column
[name]="'AbpTenantManagement::Actions' | abpLocalization"
[maxWidth]="150"

@ -1,3 +1,4 @@
export * from './loading.directive';
export * from './ngx-datatable-default.directive';
export * from './ngx-datatable-list.directive';
export * from './table-sort.directive';

@ -0,0 +1,23 @@
import { Directive, Host, HostBinding, Input } from '@angular/core';
import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
@Directive({
// tslint:disable-next-line
selector: 'ngx-datatable[default]',
exportAs: 'ngxDatatableDefault',
})
export class NgxDatatableDefaultDirective {
@Input() class = 'material bordered';
@HostBinding('class')
get classes(): string {
return `ngx-datatable ${this.class}`;
}
constructor(@Host() private table: DatatableComponent) {
this.table.columnMode = ColumnMode.force;
this.table.footerHeight = 50;
this.table.headerHeight = 50;
this.table.rowHeight = 'auto';
}
}

@ -3,40 +3,28 @@ import {
ChangeDetectorRef,
Directive,
Host,
HostBinding,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
} from '@angular/core';
import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
import { DatatableComponent } from '@swimlane/ngx-datatable';
import { Subscription } from 'rxjs';
@Directive({
exportAs: 'abpList',
selector: 'ngx-datatable[abpList]',
// tslint:disable-next-line
selector: 'ngx-datatable[list]',
exportAs: 'ngxDatatableList',
})
export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
private subscription = new Subscription();
/* tslint:disable-next-line:no-input-rename */
@Input('abpList') list: ListService;
@Input() class = 'material bordered';
@HostBinding('class')
get classes(): string {
return `ngx-datatable ${this.class}`;
}
@Input() list: ListService;
constructor(@Host() private cdRef: ChangeDetectorRef, @Host() private table: DatatableComponent) {
this.table.columnMode = ColumnMode.force;
this.table.externalPaging = true;
this.table.externalSorting = true;
this.table.footerHeight = 50;
this.table.headerHeight = 50;
this.table.rowHeight = 'auto';
}
ngOnChanges({ list }: SimpleChanges) {

@ -21,6 +21,7 @@ import { TableComponent } from './components/table/table.component';
import { ToastContainerComponent } from './components/toast-container/toast-container.component';
import { ToastComponent } from './components/toast/toast.component';
import { LoadingDirective } from './directives/loading.directive';
import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
import { TableSortDirective } from './directives/table-sort.directive';
import { ErrorHandler } from './handlers/error.handler';
@ -64,6 +65,7 @@ export function ngxDatatableMessageFactory(store: Store) {
ToastComponent,
ToastContainerComponent,
SortOrderIconComponent,
NgxDatatableDefaultDirective,
NgxDatatableListDirective,
LoadingDirective,
TableSortDirective,
@ -83,6 +85,7 @@ export function ngxDatatableMessageFactory(store: Store) {
ToastComponent,
ToastContainerComponent,
SortOrderIconComponent,
NgxDatatableDefaultDirective,
NgxDatatableListDirective,
LoadingDirective,
TableSortDirective,

Loading…
Cancel
Save