From bc1421976e908752dd30cd9598fc4c1fb45c1ffb Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 31 Jul 2017 16:49:13 +0300 Subject: [PATCH 1/3] =?UTF-8?q?more=20datatable=CB=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/core/scss/partials/_reset.scss | 14 ++++--- .../scss/partials/plugins/_ngx-datatable.scss | 30 ++++++++++++++- .../datatable/ngx-datatable.component.html | 37 +++++++++++++++++-- .../datatable/ngx-datatable.component.ts | 12 ------ 4 files changed, 70 insertions(+), 23 deletions(-) diff --git a/src/app/core/scss/partials/_reset.scss b/src/app/core/scss/partials/_reset.scss index f3c8935c..1c42a8ac 100644 --- a/src/app/core/scss/partials/_reset.scss +++ b/src/app/core/scss/partials/_reset.scss @@ -30,7 +30,13 @@ html, body { // Reset non angular-material input's default browser/os styles *:not(md-input-container) { - > input, + > input { + border: none; + border-radius: 0; + padding: 0; + margin: 0; + } + > input[type="text"], > input[type="tel"], > input[type="email"], @@ -41,13 +47,9 @@ html, body { > input[type="submit"], > input[type="image"], > textarea { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; appearance: none; - -moz-appearance: none; - -webkit-appearance: none; border: none; + border-radius: 0; padding: 0; margin: 0; } diff --git a/src/app/core/scss/partials/plugins/_ngx-datatable.scss b/src/app/core/scss/partials/plugins/_ngx-datatable.scss index f219fcad..e3d8f384 100644 --- a/src/app/core/scss/partials/plugins/_ngx-datatable.scss +++ b/src/app/core/scss/partials/plugins/_ngx-datatable.scss @@ -12,18 +12,28 @@ } .datatable-header { + border: none; + min-height: 48px; .datatable-header-cell { display: inline-flex; align-items: center; line-height: 1; min-height: 48px; - padding: 0 24px; font-size: 13px; + padding: 0 24px; } } .datatable-body { + display: flex; + flex: 1 0 auto; + + .datatable-scroll { + display: flex; + flex-direction: column; + width: 100% !important; + } .datatable-row-left, .datatable-row-center, @@ -34,11 +44,16 @@ .datatable-row-wrapper { border-bottom: 1px solid rgba(0, 0, 0, 0.12); + &:first-child { + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + .datatable-body-cell { display: inline-flex; align-items: center; line-height: 1; min-height: 48px; + transition: none; padding: 0 24px; } } @@ -46,10 +61,21 @@ .datatable-footer { border: none; + min-height: 56px; .datatable-footer-inner { padding: 0 24px; + @include media-breakpoint('sm') { + flex-direction: column; + padding: 16px 0; + height: auto !important; + + .datatable-pager { + margin: 0 !important; + } + } + .page-count { padding: 0; } @@ -60,4 +86,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/main/components/datatable/ngx-datatable.component.html b/src/app/main/components/datatable/ngx-datatable.component.html index 0d4b207c..d0dca1ab 100644 --- a/src/app/main/components/datatable/ngx-datatable.component.html +++ b/src/app/main/components/datatable/ngx-datatable.component.html @@ -25,17 +25,48 @@
+

+ ngx-datatable is a Angular component for presenting large and complex data. + It has all the features you would expect from any other table but in a light package with no external + dependencies. The table was designed to be extremely flexible and light; it doesn't make any assumptions + about your data or how you: filter, sort or page it. +

+ + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/main/components/datatable/ngx-datatable.component.ts b/src/app/main/components/datatable/ngx-datatable.component.ts index 9049e13b..73b7f985 100644 --- a/src/app/main/components/datatable/ngx-datatable.component.ts +++ b/src/app/main/components/datatable/ngx-datatable.component.ts @@ -12,18 +12,6 @@ export class NgxDatatableComponent implements OnInit loadingIndicator = true; reorderable = true; - columns = [ - { - prop: 'name' - }, - { - prop: 'lastName' - }, - { - prop: 'company' - } - ]; - constructor(private http: Http) { From d8e964d063d923fc1f0840b76709d9c00ec3182b Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 31 Jul 2017 16:49:20 +0300 Subject: [PATCH 2/3] more datatable --- src/app/main/components/datatable/ngx-datatable.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/components/datatable/ngx-datatable.component.html b/src/app/main/components/datatable/ngx-datatable.component.html index d0dca1ab..ea8bde6f 100644 --- a/src/app/main/components/datatable/ngx-datatable.component.html +++ b/src/app/main/components/datatable/ngx-datatable.component.html @@ -42,7 +42,7 @@ [rowHeight]="'auto'" [scrollbarH]="true" [reorderable]="reorderable" - [selectionType]="'checkbox'" + [selectionType]="'checkbox' [limit]="10"> Date: Mon, 31 Jul 2017 16:50:29 +0300 Subject: [PATCH 3/3] fix --- src/app/main/components/datatable/ngx-datatable.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/components/datatable/ngx-datatable.component.html b/src/app/main/components/datatable/ngx-datatable.component.html index ea8bde6f..d0dca1ab 100644 --- a/src/app/main/components/datatable/ngx-datatable.component.html +++ b/src/app/main/components/datatable/ngx-datatable.component.html @@ -42,7 +42,7 @@ [rowHeight]="'auto'" [scrollbarH]="true" [reorderable]="reorderable" - [selectionType]="'checkbox' + [selectionType]="'checkbox'" [limit]="10">