Add column class-name to the table header and update documentation (#1027)

* Table: Add className property to columns

* Table: update documentation on column class-name

* Table: Apply column class-name to table header

examples/docs/en-US/table.md

@@ -1007,6 +1007,7 @@ Filter the table to find desired data.
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
 | inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — |
 | align | alignment | string | left/center/right | left |
+| class-name | class name of cells in the column | string | — | — |
 | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
 | reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false |
 | filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |

examples/docs/zh-CN/table.md

@@ -1010,6 +1010,7 @@
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |
 | align | 对齐方式 | String | left, center, right | left |
+| class-name | 列的 className | string | — | — |
 | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
 | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
 | filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |

packages/table/src/table-body.js

@@ -39,7 +39,7 @@ export default {
                 {
                   this._l(this.columns, (column, cellIndex) =>
                     <td
-                      class={ [column.id, column.align, this.isCellHidden(cellIndex) ? 'is-hidden' : '' ] }
+                      class={ [column.id, column.align, column.className || '', this.isCellHidden(cellIndex) ? 'is-hidden' : '' ] }
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {

packages/table/src/table-column.js

@@ -85,6 +85,7 @@ export default {
       default: 'default'
     },
     label: String,
+    className: String,
     property: String,
     prop: String,
     width: {},
@@ -177,6 +178,7 @@ export default {
     let column = getDefaultColumn(type, {
       id: columnId,
       label: this.label,
+      className: this.className,
       property: this.prop || this.property,
       type,
       renderCell: DEFAULT_RENDER_CELL,

packages/table/src/table-header.js

@@ -33,7 +33,7 @@ export default {
                   on-mousemove={ ($event) => this.handleMouseMove($event, column) }
                   on-mouseout={ this.handleMouseOut }
                   on-mousedown={ ($event) => this.handleMouseDown($event, column) }
-                  class={ [column.id, column.order, column.align, this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
+                  class={ [column.id, column.order, column.align, column.className || '', this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
                   <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
                   {
                     column.renderHeader

test/unit/specs/table.spec.js

@@ -570,6 +570,18 @@ describe('Table', () => {
       }, DELAY);
     });
 
+    it('class-name', done => {
+      const vm = createTable('class-name="column-1"', 'class-name="column-2 column-class-a"', 'class-name="column-class-a"');
+      setTimeout(_ => {
+        var len = getTestData().length + 1;
+        expect(vm.$el.querySelectorAll('.column-1')).to.length(len);
+        expect(vm.$el.querySelectorAll('.column-2')).to.length(len);
+        expect(vm.$el.querySelectorAll('.column-class-a')).to.length(len * 2);
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
     it('selectable', done => {
       const vm = createVue({
         template: `