Feature go-table wrapContent

mobi · Aug 18, 2021 · 8525af8 · 8525af8
1 parent 1492e8c
commit 8525af8
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 3 deletions.
diff --git a/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts b/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts
@@ -11,6 +11,7 @@ export class GoTableColumnComponent extends GoTableChildColumnComponent {
   @Input() sortable?: boolean;
   @Input() title: string;
   @Input() width: number;
+  @Input() wrapContent: boolean = null;
 
   @ContentChild('goTableHead') goTableHead: TemplateRef<any>;
 

diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.html b/projects/go-lib/src/lib/components/go-table/go-table.component.html
@@ -118,7 +118,10 @@ <h3 class="go-heading-3 go-heading--no-margin go-table-header__title" *ngIf="tab
             <!-- Body - Columns -->
             <td *ngFor="let col of columns"
                 class="go-table__body-column"
-                [ngClass]="{ 'go-table__body-row--expanded': item.showDetails }"
+                [ngClass]="{
+                  'go-table__body-row--expanded': item.showDetails,
+                  'go-table__body-column--no-wrap': col.wrapContent === null ? !wrapContent : !col.wrapContent
+                }"
                 [ngStyle]="{ 'vertical-align': col.alignment, 'min-width': col.width + 'px' }"
                 [@tableRowBorderAnim]="item.showDetails ? 'open' : 'close'">
               <ng-container *ngIf="!col.goTableCell; else columnCellOutlet">

diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.scss b/projects/go-lib/src/lib/components/go-table/go-table.component.scss
@@ -135,6 +135,10 @@ $go-table-body-row-expanded-border: rgba(240, 240, 240, 0);
       }
     }
 
+    &--no-wrap {
+      white-space: nowrap;
+    }
+
     &--selectable {
       padding: calc(#{$go-table-cell-vertical-padding} / 2) $go-table-cell-horizontal-padding;
       text-align: center;

diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.ts
@@ -68,6 +68,7 @@ export class GoTableComponent implements OnInit, OnChanges, OnDestroy, AfterView
   @Input() stickyHeader: boolean = false;
   @Input() tableConfig: GoTableConfig;
   @Input() tableTitle: string;
+  @Input() wrapContent: boolean = true;
 
   /**
    * This event is emitted when a row's selection changes

diff --git a/...i-kit/components/table-docs/components/table-column-docs/table-column-docs.component.html b/...i-kit/components/table-docs/components/table-column-docs/table-column-docs.component.html
@@ -68,13 +68,21 @@ <h4 class="go-heading-4">title</h4>
         </p>
       </div>
 
-      <div class="go-column go-column--100 go-column--no-padding">
+      <div class="go-column go-column--100">
         <h4 class="go-heading-4">width</h4>
         <p class="go-body-copy go-body-copy--no-margin">
           This binding sets the minimum possible width for column. The value must be in pixels.
         </p>
       </div>
 
+      <div class="go-column go-column--100 go-column--no-padding">
+        <h4 class="go-heading-4">wrapContent</h4>
+        <p class="go-body-copy go-body-copy--no-margin">
+          This binding overrides the <code class="code-block--inline">wrapContent</code> binding on the <code class="code-block--inline">go-table</code>
+          component. By default it is unset and will not override the parent table's binding.
+        </p>
+      </div>
+
     </div>
   </go-card>
 
@@ -99,7 +107,7 @@ <h4 class="go-heading-4">example.ts</h4>
     <go-table-column field="email" width="50"></go-table-column>
     <go-table-column field="gender"></go-table-column>
     <go-table-column field="ip_address" title="IP Address"></go-table-column>
-    <go-table-column field="last_login" title="Last Login"></go-table-column>
+    <go-table-column field="last_login" title="Last Login" [wrapContent]="false"></go-table-column>
     <go-table-column field="alive"></go-table-column>
     <go-table-column field="login_attempts" title="Login Attempts"></go-table-column>
   </go-table>

diff --git a/.../ui-kit/components/table-docs/components/table-column-docs/table-column-docs.component.ts b/.../ui-kit/components/table-docs/components/table-column-docs/table-column-docs.component.ts
@@ -20,6 +20,7 @@ export class TableColumnDocsComponent {
   @Input() sortable?:  boolean = true;
   @Input() title:      string;
   @Input() width:      number;
+  @Input() wrapContent: boolean = null;
   `;
 
   fieldExample: string = `
@@ -45,6 +46,9 @@ export class TableColumnDocsComponent {
     <go-table-column field="email" width="50"></go-table-column>
     <go-table-column field="gender"></go-table-column>
     <go-table-column field="ip_address" title="IP Address"></go-table-column>
+    <go-table-column field="last_login" title="Last Login" [wrapContent]="false"></go-table-column>
+    <go-table-column field="alive"></go-table-column>
+    <go-table-column field="login_attempts" title="Login Attempts"></go-table-column>
   </go-table>
   `;
 

diff --git a/...ures/ui-kit/components/table-docs/components/table-overview/table-overview.component.html b/...ures/ui-kit/components/table-docs/components/table-overview/table-overview.component.html
@@ -66,6 +66,13 @@ <h4 class="go-heading-4">stickyHeader</h4>
         </p>
       </div>
 
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">stickyHeader</h4>
+        <p class="go-body-copy go-body-copy--no-margin">
+          This property enables sticky column headers on the table, this is optional and defaults to false.
+        </p>
+      </div>
+
       <div class="go-column go-column--100">
         <h4 class="go-heading-4">tableConfig</h4>
         <p class="go-body-copy">
@@ -85,6 +92,15 @@ <h4 class="go-heading-4">tableTitle</h4>
         </p>
       </div>
 
+      <div class="go-column go-column--100 go-column--no-padding">
+        <h4 class="go-heading-4">wrapContent</h4>
+        <p class="go-body-copy go-body-copy--no-margin">
+          This binding handles how the content of the table cells wrap. By default, content is wrapped. Note that the 
+          <code class="code-block--inline">go-table-column</code> component also has this binding and will override the parent table's
+          value for that individual column.
+        </p>
+      </div>
+
     </div>
   </go-card>
 

diff --git a/...atures/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts b/...atures/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts
@@ -30,6 +30,7 @@ export class TableOverviewComponent {
   @Input() stickyHeader: boolean = false;
   @Input() tableConfig: GoTableConfig;
   @Input() tableTitle: string;
+  @Input() wrapContent: boolean = true;
   `;
 
   tableConfigClass: string = `