fix(tree-table): Fixes overflow when info-group contains long texts

dynatrace-oss · Sep 8, 2020 · c9f1413 · c9f1413
1 parent e85bcb0
commit c9f1413
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/apps/dev/src/tree-table/tree-table-demo.component.ts b/apps/dev/src/tree-table/tree-table-demo.component.ts
@@ -27,7 +27,8 @@ import {
 
 const TESTDATA: ThreadNode[] = [
   {
-    name: 'hz.hzInstance_1_cluster.thread',
+    name:
+      'hz.hzInstance_1_cluster.threadhz.hzInstance_1_cluster.threadhz.hzInstance_1_cluster.threadhz.hzInstance_1_cluster.thread',
     icon: 'airplane',
     threadlevel: 'S0',
     totalTimeConsumption: 150,
@@ -49,7 +50,7 @@ const TESTDATA: ThreadNode[] = [
     children: [
       {
         name:
-          'hz.hzInstance_1_cluster.thread_1_hz.hzInstance_1_cluster.thread-1',
+          'hz.hzInstance_1_cluster.thread_1_hz.hzInstance_1_cluster.thread-1hz.hzInstance_1_cluster.thread_1_hz.hzInstance_1_cluster.thread-1hz.hzInstance_1_cluster.thread_1_hz.hzInstance_1_cluster.thread-1',
         icon: 'airplane',
         threadlevel: 'S1',
         totalTimeConsumption: 150,

diff --git a/libs/barista-components/tree-table/README.md b/libs/barista-components/tree-table/README.md
@@ -166,7 +166,9 @@ You want to add the table header by adding a `<dt-header-row>` inside the
 The next step is to add the row where the columns get rendered. You can do this
 by adding the `<dt-tree-table-row>` inside the `<dt-tree-table>` tag. You can
 specify the columns that should be rendered and don't forget to bind the row's
-data to the `<dt-tree-table-row>`s data input `[data]="row"`.
+data to the `<dt-tree-table-row>`s data input `[data]="row"`. The text contained
+will be cut to preserve the width correctly. Hovering over the cell/text will
+reveal the whole text.
 
 ```html
 <dt-tree-table-row

diff --git a/libs/barista-components/tree-table/src/tree-table-row.scss b/libs/barista-components/tree-table/src/tree-table-row.scss
@@ -35,6 +35,18 @@
   &:nth-child(odd) ::ng-deep .dt-tree-toggle-cell {
     border-left: solid 1px $dt-table-row-color-odd;
   }
+
+  &::ng-deep .dt-tree-toggle-cell {
+    max-width: 24vw;
+  }
+
+  &::ng-deep .dt-tree-toggle-cell:hover {
+    max-width: 100vw;
+  }
+
+  &::ng-deep .dt-info-group-title {
+    text-overflow: ellipsis;
+  }
 }
 
 :host.dt-table-row-indicator ::ng-deep .dt-tree-table-toggle-cell-wrap::before {

diff --git a/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.ts b/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.ts
@@ -45,7 +45,8 @@ const TESTDATA: ThreadNode[] = [
         blocked: 0,
       },
       {
-        name: 'hz.hzInstance_1_cluster.thread-2',
+        name:
+          'hz.hzInstance_1_cluster.thread-2 hz.hzInstance_2_cluster.thread-1 hz.hzInstance_2_cluster.thread-2 hz.hzInstance_3_cluster.thread-1',
         icon: 'process',
         threadlevel: 'S1',
         totalTimeConsumption: 150,