From 56ed21df4a125ef4c8599e902d72bcf0be12fda0 Mon Sep 17 00:00:00 2001
From: "cinwell.li" <cinwell.li@gmail.com>
Date: Wed, 21 Sep 2016 06:20:36 +0800
Subject: [PATCH] TableColumn: add align attribute, #78 (#94)

---
 examples/docs/table.md               |  1 +
 packages/table/src/table-body.js     |  2 +-
 packages/table/src/table-column.js   |  2 ++
 packages/table/src/table-header.js   |  2 +-
 packages/theme-default/src/table.css | 12 ++++++++++++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/examples/docs/table.md b/examples/docs/table.md
index 2dd84edf..4ec161fc 100644
--- a/examples/docs/table.md
+++ b/examples/docs/table.md
@@ -865,3 +865,4 @@
 | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | — | — |
 | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性  | — | — |
+| align | 对齐方式 | String | left, center, right | left |
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 63e31f29..5092f47f 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -52,7 +52,7 @@ export default {
                   this._l(this.columns, (column) =>
                     <td
                       style={ this.getColumnWhiteSpaceStyle(column) }
-                      class={ column.id }
+                      class={ [column.id, column.align] }
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index a5504048..86bb0dd6 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -83,6 +83,7 @@ export default {
       type: Boolean,
       default: true
     },
+    align: String,
     showTooltipWhenOverflow: {
       type: Boolean,
       default: false
@@ -160,6 +161,7 @@ export default {
       minWidth,
       width,
       isColumnGroup,
+      align: this.align ? 'is-' + this.align : null,
       realWidth: width || minWidth,
       sortable: this.sortable,
       resizable: this.resizable,
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index 755b4175..9e67132a 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -26,7 +26,7 @@ export default {
                         on-mouseout={ this.handleMouseOut }
                         on-mousedown={ ($event) => this.handleMouseDown($event, column) }
                         on-click={ ($event) => this.handleHeaderClick($event, column) }
-                        class={ [column.id, column.direction] }>
+                        class={ [column.id, column.direction, column.align] }>
                         {
                           [
                             column.headerTemplate
diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
index 960bb393..cb31cd62 100644
--- a/packages/theme-default/src/table.css
+++ b/packages/theme-default/src/table.css
@@ -62,6 +62,18 @@
       vertical-align: middle;
       position: relative;
       border-bottom: 1px solid var(--table-border-color);
+
+      @when center {
+        text-align: center;
+      }
+
+      @when left {
+        text-align: left;
+      }
+
+      @when right {
+        text-align: right;
+      }
     }
 
     @modifier border {