feat(table): add column width property, fix #134, fix #201 (#313)

Author: ktriek

src/app/pages/documentation/documentation.component.html

@@ -80,6 +80,14 @@ <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true
         Column class
       </td>
     </tr>
+    <tr>
+      <td>width</td>
+      <td><span class="highlight">string</span></td>
+      <td>''</td>
+      <td>
+        Column width, example: <span class="highlight">'20px'</span>, <span class="highlight">'20%'</span>
+      </td>
+    </tr>
     <tr>
       <td>editable</td>
       <td><span class="highlight">boolean</span></td>

src/app/shared/components/basic-example/basic-example.component.ts

@@ -12,9 +12,11 @@ export class BasicExampleComponent {
     columns: {
       id: {
         title: 'ID',
+        width: '60px',
       },
       name: {
         title: 'Full Name',
+        width: '40%',
       },
       username: {
         title: 'User Name',

src/ng2-smart-table/components/thead/rows/thead-titles-row.component.ts

@@ -12,7 +12,8 @@ import { Grid } from '../../../lib/grid';
                                    (click)="selectAllRows.emit($event)">
     </th>
     <th ng2-st-actions-title *ngIf="grid.showActionColumn('left')" [grid]="grid"></th>
-    <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}" [ngClass]="column.class">
+    <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}" [ngClass]="column.class"
+      [style.width]="column.width" >
       <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
     </th>
     <th ng2-st-actions-title *ngIf="grid.showActionColumn('right')" [grid]="grid"></th>

src/ng2-smart-table/lib/data-set/column.ts

@@ -5,6 +5,7 @@ export class Column {
   title: string = '';
   type: string = '';
   class: string = '';
+  width: string = '';
   isSortable: boolean = false;
   isEditable: boolean = true;
   isFilterable: boolean = false;
@@ -48,6 +49,7 @@ export class Column {
   protected process() {
     this.title = this.settings['title'];
     this.class = this.settings['class'];
+    this.width = this.settings['width'];
     this.type = this.prepareType();
     this.editor = this.settings['editor'];
     this.filter = this.settings['filter'];