more datatableˆ

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;
     }

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 @@
             }
         }
     }
-}
+}

src/app/main/components/datatable/ngx-datatable.component.html

@@ -25,17 +25,48 @@
     <!-- CONTENT -->
     <div class="content p-24">
 
+        <p class="mb-32">
+            <b>ngx-datatable</b> 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.
+        </p>
+
         <ngx-datatable
             class="material"
             [rows]="rows"
             [loadingIndicator]="loadingIndicator"
-            [columns]="columns"
             [columnMode]="'force'"
-            [headerHeight]="50"
-            [footerHeight]="50"
+            [headerHeight]="48"
+            [footerHeight]="56"
             [rowHeight]="'auto'"
+            [scrollbarH]="true"
             [reorderable]="reorderable"
+            [selectionType]="'checkbox'"
             [limit]="10">
+
+            <ngx-datatable-column [width]="48"
+                                  [canAutoResize]="false"
+                                  [sortable]="false">
+                <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
+                             let-selectFn="selectFn">
+                    <md-checkbox [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)"></md-checkbox>
+                </ng-template>
+
+                <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
+                             let-onCheckboxChangeFn="onCheckboxChangeFn">
+                    <md-checkbox [checked]="isSelected" (change)="onCheckboxChangeFn($event)"></md-checkbox>
+                </ng-template>
+            </ngx-datatable-column>
+
+            <ngx-datatable-column name="Name" prop="name">
+            </ngx-datatable-column>
+
+            <ngx-datatable-column name="Last Name" prop="lastName">
+            </ngx-datatable-column>
+
+            <ngx-datatable-column name="Company" prop="company">
+            </ngx-datatable-column>
         </ngx-datatable>
 
     </div>

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)
     {