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 @@
+ :key="header.key"
+ :align="align(header.key)">
{{ header.label }}
@@ -31,7 +32,8 @@
:key="row.key || index">
+ :key="col.key"
+ :align="align(col.key)">
-
+
+ |
|
@@ -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 @@
-
+ |
{{ label }}
@@ -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`.
}
}
-```
\ 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;
+ }
+ }
+}
|