feat: update table

Author: wangxueliang

components/table/Table.jsx

@@ -14,7 +14,13 @@ Simple table with actions.
     <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
     <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
     <span slot="tags" slot-scope="tags">
-      <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
+      <a-tag
+        v-for="tag in tags"
+        :color="tag==='loser' ? 'volcano' : (tag.length > 5 ? 'geekblue' : 'green')"
+        :key="tag"
+      >
+        {{tag.toUpperCase()}}
+      </a-tag>
     </span>
     <span slot="action" slot-scope="text, record">
       <a href="javascript:;">Invite 一 {{record.name}}</a>

components/table/demo/basic.md

@@ -11,7 +11,7 @@ Implement a customized column search example via `filterDropdown`.
 ```html
 <template>
   <a-table :dataSource="data" :columns="columns">
-    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
+    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
       <a-input
         v-ant-ref="c => searchInput = c"
         :placeholder="`Search ${column.dataIndex}`"
@@ -143,12 +143,6 @@ export default {
 }
 </script>
 <style scoped>
-.custom-filter-dropdown {
-  padding: 8px;
-  border-radius: 4px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
-}
 
 .highlight {
   background-color: rgb(255, 192, 105);

components/table/demo/custom-filter-panel.md

@@ -1,14 +1,14 @@
 <cn>
 #### 固定头和列
 适合同时展示有大量数据和数据列。
-> 若列头与内容不对齐或出现列重复，请指定列的宽度 `width`。
+> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。
 > 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
 </cn>
 
 <us>
 #### Fixed Columns and Header
 A Solution for displaying large amounts of data with long columns.
-> Specify the width of columns if header and cell do not align properly.
+> Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)
 > A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 </us>
 

components/table/demo/fixed-columns-header.md

@@ -1,14 +1,14 @@
 <cn>
 #### 固定列
 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
-> 若列头与内容不对齐或出现列重复，请指定列的宽度 `width`。
+> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。
 > 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
 </cn>
 
 <us>
 #### Fixed Columns
 To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
-> Specify the width of columns if header and cell do not align properly.
+> Specify the width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)
 > A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 </us>
 

components/table/demo/fixed-columns.md

@@ -1,13 +1,13 @@
 <cn>
 #### 固定表头
 方便一页内展示大量数据。
-需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
+需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。（建议留一列不设宽度以适应弹性布局）
 </cn>
 
 <us>
 #### Fixed Header
 Display large amounts of data in scrollable view.
-> Specify the width of each column if header and cell do not align properly.
+> Specify width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)
 </us>
 
 ```html

components/table/demo/fixed-header.md

@@ -2,13 +2,15 @@
 #### 筛选和排序
 对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
 对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(rowA, rowB) { ... }`， rowA、rowB 为比较的两个行数据。
+`sortDirections: ['ascend' | 'descend']`改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在table props上时对所有列生效。
 使用 `defaultSortOrder` 属性，设置列的默认排序顺序。
 </cn>
 
 <us>
 #### Filter and sorter
 Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
 Use `sorter` to make a column sortable. `sorter` can be a function of the type `function(a, b) { ... }` for sorting data locally.
+`sortDirections: ['ascend' | 'descend']` defines available sort methods for each columns, effective for all columns when set on table props.
 Uses `defaultSortOrder` to make a column sorted by default.
 If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
 </us>
@@ -42,6 +44,7 @@ const columns = [{
   // here is that finding the name started with `value`
   onFilter: (value, record) => record.name.indexOf(value) === 0,
   sorter: (a, b) => a.name.length - b.name.length,
+  sortDirections: ['descend'],
 }, {
   title: 'Age',
   dataIndex: 'age',
@@ -59,6 +62,7 @@ const columns = [{
   filterMultiple: false,
   onFilter: (value, record) => record.address.indexOf(value) === 0,
   sorter: (a, b) => a.address.length - b.address.length,
+  sortDirections: ['descend', 'ascend'],
 }];
 
 const data = [{

components/table/demo/head.md

@@ -62,27 +62,8 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us}/>
-        <Ajax />
-        <Basic />
-        <Bordered />
-        <ColspanRowspan />
         <CustomFilterPanel />
-        <EditCell />
-        <EditRow />
-        <ExpandChildren />
-        <Expand />
-        <FixedColumnsHeader />
-        <FixedColumns />
-        <FixedHeader />
-        <GroupingColumns />
-        <Head />
-        <NestedTable />
-        <ResetFilter />
-        <RowSelectionAndOperation />
-        <RowSelectionCustom />
-        <RowSelection />
-        <Size />
-        <Template />
+
         <api>
           <template slot='cn'>
             <CN/>

components/table/demo/index.vue

@@ -261,7 +261,7 @@ export default {
     }
 
     const menus = filterDropdown ? (
-      <FilterDropdownMenuWrapper>{filterDropdown}</FilterDropdownMenuWrapper>
+      <FilterDropdownMenuWrapper class={`${prefixCls}-dropdown`}>{filterDropdown}</FilterDropdownMenuWrapper>
     ) : (
       <FilterDropdownMenuWrapper class={`${prefixCls}-dropdown`}>
         <Menu

components/table/filterDropdown.jsx

@@ -50,7 +50,7 @@ const columns = [{
 | indentSize | Indent size in pixels of tree data | number | 15 |
 | loading | Loading status of table | boolean\|[object](/components/spin) | `false` |
 | locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' |
-| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object |  |
+| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object |  |
 | rowClassName | Row's className | Function(record, index):string | - |
 | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
 | rowSelection | Row selection [config](#rowSelection) | object | null |
@@ -81,9 +81,11 @@ Follow [Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) syntax
         xxx...
       },
       on: {
-        click: () => {},       // click row
-        mouseenter: () => {},  // mouse enter row
-        xxxx...
+        click: (event) => {},       // click row
+        doubleclick: (event) => {}, // double click row
+        contextmenu: (event) => {}  // right button click row
+        mouseenter: (event) => {}   // mouse enter row
+        mouseleave: (event) => {}   // mouse leave row
       },
     };
   )}