multiline for table cells

zero.Web/App/Components/Tables/table-value.js

@@ -19,6 +19,8 @@ export default function (el, binding)
     }
   };
 
+  // set multiline for cell
+  el.classList.toggle('is-multiline', column.multiline === true);
 
   // render empty
   //if (isEmpty)

zero.Web/App/Components/Tables/table.vue

@@ -4,16 +4,15 @@
       <header class="ui-table-row ui-table-head">      
         <div v-for="column in columns" class="ui-table-cell" :table-field="column.field">
           {{ column.label | localize }}
-          <button v-if="column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="filter.orderBy == column.field ? 'sort-' + (filter.isDescending ? 'desc' : 'asc') : null">
+          <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="filter.orderBy == column.field ? 'sort-' + (filter.isDescending ? 'desc' : 'asc') : null">
             <i class="arrow arrow-down"></i>
           </button>
         </div>
       </header>
-      <content class="ui-table-body">
-        <div class="ui-table-row" v-for="item in items">
-          <div v-for="column in columns" class="ui-table-cell" :table-field="column.field" v-table-value="{ item, column }"></div>
-        </div>
-      </content>
+
+      <div class="ui-table-row" v-for="item in items">
+        <div v-for="column in columns" class="ui-table-cell" :table-field="column.field" v-table-value="{ item, column }"></div>
+      </div>
     </div>
 
     <footer class="ui-table-pagination" v-if="pages > 1">
@@ -176,7 +175,7 @@
     width: 100%;
     border-bottom: 1px solid var(--color-line-light);
     position: relative;
-    min-height: 60px;
+    //min-height: 60px;
     outline: 1px solid transparent;
     transition: outline 0.1s ease, box-shadow 0.1s ease;
 
@@ -224,27 +223,36 @@
 
   .ui-table-cell
   {
-    display: inline-flex;
+    display: inline-block;
     align-items: center;
-    flex: 1 1 5%;
+    flex: 1 0 5%;
     position: relative;
     text-align: left;
-    overflow: hidden;
-    padding: 10px 20px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    padding: 18px 20px 17px 20px;
     border-left: 1px solid var(--color-line-light);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 20px;
+    line-height: 20px;
 
     &:first-child
     {
       border-left: none;
     }
+
+    &.is-multiline
+    {
+      white-space: normal;
+      overflow: auto;
+      text-overflow: initial;
+    }
   }
 
   .ui-table-sort
   {
-    height: 29px;
-    width: 29px;
+    height: 20px;
+    width: 20px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -252,6 +260,13 @@
     border-radius: 15px;
     transition: background 0.2s ease;
 
+    &[disabled]
+    {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
     .arrow
     {
       border-top-color: var(--color-fg);

zero.Web/App/Pages/lists.vue

@@ -27,19 +27,18 @@
           no: 'text',
           createdDate: {
             label: '@ui.createdDate',
-            as: 'datetime',
-            size: 's'
+            as: 'datetime'
+          },
+          username: {
+            as: 'text'
           },
-          username: 'text',
           price: {
             as: 'price',
-            size: 's',
             sort: false
           },
           isPublished: {
             label: 'Published',
-            as: 'bool',
-            size: 'xs'
+            as: 'bool'
           },
           status: {
             as: 'html',
@@ -79,7 +78,7 @@
             {
               no: 3,
               createdDate: '2020-03-07T17:17:25.229+01:00',
-              username: 'Christian Klika',
+              username: 'Christian Klika, das ist mein Name und der könnte noch viel länger sein',
               price: 123.00,
               status: 'Completed'
             },