From 223eff2381bde97a2fa744e38810de14f70bab04 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 17 Dec 2018 21:56:51 +0100
Subject: [PATCH] added align to table col and header

---
 .../components/data-display/Table/Table.vue   |  9 +++++++--
 .../data-display/Table/TableCol.vue           | 18 +++++++++++++++++-
 .../data-display/Table/TableHeadCol.vue       | 17 ++++++++++++++++-
 .../components/data-display/Table/demo.md     |  5 +++--
 .../components/data-display/Table/style.scss  | 19 +++++++++++++++++++
 5 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/styleguide/src/system/components/data-display/Table/Table.vue b/styleguide/src/system/components/data-display/Table/Table.vue
index 3d21532de..19544ec35 100644
--- a/styleguide/src/system/components/data-display/Table/Table.vue
+++ b/styleguide/src/system/components/data-display/Table/Table.vue
@@ -20,7 +20,8 @@
         <tr>
           <ds-table-head-col
             v-for="header in headers"
-            :key="header.key">
+            :key="header.key"
+            :align="align(header.key)">
             {{ header.label }}
           </ds-table-head-col>
         </tr>
@@ -31,7 +32,8 @@
           :key="row.key || index">
           <ds-table-col
             v-for="col in row"
-            :key="col.key">
+            :key="col.key"
+            :align="align(col.key)">
             <!-- @slot Slots are named by fields -->
             <slot
               :name="col.key"
@@ -152,6 +154,9 @@ export default {
     }
   },
   methods: {
+    align(colKey) {
+      return this.fields && this.fields[colKey] ? this.fields[colKey].align : null
+    },
     parseLabel(label) {
       return startCase(label)
     }
diff --git a/styleguide/src/system/components/data-display/Table/TableCol.vue b/styleguide/src/system/components/data-display/Table/TableCol.vue
index 5272ea2ab..a73792aec 100644
--- a/styleguide/src/system/components/data-display/Table/TableCol.vue
+++ b/styleguide/src/system/components/data-display/Table/TableCol.vue
@@ -1,5 +1,10 @@
 <template>
-  <td class="ds-table-col">
+  <!-- eslint-disable -->
+  <td
+    class="ds-table-col"
+    :class="[
+      align && `ds-table-col-${align}`
+    ]">
     <slot/>
   </td>
 </template>
@@ -25,6 +30,17 @@ export default {
     width: {
       type: [String, Number, Object],
       default: null
+    },
+    /**
+     * The column align
+     * `left, center, right`
+     */
+    align: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(left|center|right)/)
+      }
     }
   },
   computed: {}
diff --git a/styleguide/src/system/components/data-display/Table/TableHeadCol.vue b/styleguide/src/system/components/data-display/Table/TableHeadCol.vue
index 948655b99..60abd4bcc 100644
--- a/styleguide/src/system/components/data-display/Table/TableHeadCol.vue
+++ b/styleguide/src/system/components/data-display/Table/TableHeadCol.vue
@@ -1,5 +1,9 @@
 <template>
-  <th class="ds-table-head-col">
+  <th
+    class="ds-table-head-col"
+    :class="[
+      align && `ds-table-head-col-${align}`
+    ]">
     <slot>
       {{ label }}
     </slot>
@@ -36,6 +40,17 @@ export default {
     width: {
       type: [String, Number, Object],
       default: null
+    },
+    /**
+     * The column align
+     * `left, center, right`
+     */
+    align: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(left|center|right)/)
+      }
     }
   },
   computed: {}
diff --git a/styleguide/src/system/components/data-display/Table/demo.md b/styleguide/src/system/components/data-display/Table/demo.md
index 406839566..f372aef3c 100644
--- a/styleguide/src/system/components/data-display/Table/demo.md
+++ b/styleguide/src/system/components/data-display/Table/demo.md
@@ -100,7 +100,8 @@ The value can be a string representing the fields label or an object with option
           name: 'Hero',
           type: {
             label: 'Job',
-            width: '300px'
+            width: '300px',
+            align: 'right'
           }
         },
         tableData: [
@@ -191,4 +192,4 @@ Via scoped slots you have access to the columns `row`, `index` and `col`.
     }
   }
 </script>
-```
\ No newline at end of file
+```
diff --git a/styleguide/src/system/components/data-display/Table/style.scss b/styleguide/src/system/components/data-display/Table/style.scss
index 7d59a6e9d..e6cd403b1 100644
--- a/styleguide/src/system/components/data-display/Table/style.scss
+++ b/styleguide/src/system/components/data-display/Table/style.scss
@@ -42,3 +42,22 @@
     padding-bottom: $space-x-small;
   }
 }
+
+
+.ds-table {
+  .ds-table-col,
+  .ds-table-head-col {
+    &.ds-table-col-left,
+    &.ds-table-head-col-left {
+      text-align: left;
+    }
+    &.ds-table-col-center,
+    &.ds-table-head-col-center {
+      text-align: center;
+    }
+    &.ds-table-col-right,
+    &.ds-table-head-col-right {
+      text-align: right;
+    }
+  }
+}