added align to table col and header

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)
     }

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: {}

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: {}

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>
-```
+```

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;
+    }
+  }
+}