diff --git a/components/dropdown/src/Dropdown.jsx b/components/dropdown/src/Dropdown.jsx
index 262513a6a..f535eaaa2 100644
--- a/components/dropdown/src/Dropdown.jsx
+++ b/components/dropdown/src/Dropdown.jsx
@@ -70,14 +70,16 @@ export default {
     getMenuElement () {
       const { onClick, prefixCls, $slots } = this
       this.childOriginEvents = getEvents($slots.overlay[0])
-      return cloneElement($slots.overlay[0], {
+      const extraOverlayProps = {
         props: {
           prefixCls: `${prefixCls}-menu`,
+          getPopupContainer: () => this.getPopupDomNode(),
         },
         on: {
           click: onClick,
         },
-      })
+      }
+      return cloneElement($slots.overlay[0], extraOverlayProps)
     },
 
     getPopupDomNode () {
diff --git a/components/table/Table.jsx b/components/table/Table.jsx
index 0cf411b60..37766b934 100755
--- a/components/table/Table.jsx
+++ b/components/table/Table.jsx
@@ -99,13 +99,13 @@ export default {
       })
     },
     rowSelection: {
-      handler: (val) => {
+      handler (val) {
         if (val &&
           'selectedRowKeys' in val) {
           this.store.setState({
             selectedRowKeys: val.selectedRowKeys || [],
           })
-          const { rowSelection } = this.props
+          const { rowSelection } = this
           if (rowSelection && (
             val.getCheckboxProps !== rowSelection.getCheckboxProps
           )) {
@@ -133,12 +133,12 @@ export default {
       const filteredValueColumns = this.getFilteredValueColumns(val)
       if (filteredValueColumns.length > 0) {
         const filtersFromColumns = this.getFiltersFromColumns(val)
-        const newFilters = { ...this.state.filters }
+        const newFilters = { ...this.sFilters }
         Object.keys(filtersFromColumns).forEach(key => {
           newFilters[key] = filtersFromColumns[key]
         })
         if (this.isFiltersChanged(newFilters)) {
-          this.setState({ filters: newFilters })
+          this.setState({ sFilters: newFilters })
         }
       }
     },
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 33b67468e..f79464630 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -32,7 +32,7 @@ const columns = [{
   dataIndex: 'name',
   sorter: true,
   width: '20%',
-  slotScopeName: 'name',
+  scopedSlots: { customRender: 'name' },
 }, {
   title: 'Gender',
   dataIndex: 'gender',
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index fd243c112..7de22b940 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -11,15 +11,17 @@ Table with editable rows.
 ```html
 <template>
   <a-table :columns="columns" :dataSource="data" bordered>
-    <div v-for="col in ['name', 'age', 'address']" :key="col" :slot="col" slot-scope="text, record, index">
-      <a-input
-        v-if="record.editable"
-        style="margin: -5px 0"
-        :value="text"
-        @change="e => handleChange(e.target.value, record.key, col)"
-      />
-      <template v-else>{{text}}</template>
-    </div>
+    <template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index">
+      <div>
+        <a-input
+          v-if="record.editable"
+          style="margin: -5px 0"
+          :value="text"
+          @change="e => handleChange(e.target.value, record.key, col)"
+        />
+        <template v-else>{{text}}</template>
+      </div>
+    </template>
     <template slot="operation" slot-scope="text, record, index">
       <div class='editable-row-operations'>
         <span v-if="record.editable">
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
new file mode 100644
index 000000000..60291368d
--- /dev/null
+++ b/components/table/demo/fixed-columns.md
@@ -0,0 +1,64 @@
+<cn>
+#### 固定列
+对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
+> 若列头与内容不对齐或出现列重复，请指定列的宽度 `width`。
+> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
+</cn>
+
+<us>
+#### Fixed Columns
+To fix some columns and scroll inside other columns, and you must set `scoll.x` meanwhile.
+> Specify the width of columns if header and cell do not align properly.
+> 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>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" :scroll="{ x: 1300 }">
+    <a slot="action" slot-scope="text" href="#">action</a>
+  </a-table>
+</template>
+<script>
+const columns = [
+  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
+  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+  { title: 'Column 1', dataIndex: 'address', key: '1' },
+  { title: 'Column 2', dataIndex: 'address', key: '2' },
+  { title: 'Column 3', dataIndex: 'address', key: '3' },
+  { title: 'Column 4', dataIndex: 'address', key: '4' },
+  { title: 'Column 5', dataIndex: 'address', key: '5' },
+  { title: 'Column 6', dataIndex: 'address', key: '6' },
+  { title: 'Column 7', dataIndex: 'address', key: '7' },
+  { title: 'Column 8', dataIndex: 'address', key: '8' },
+  {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    scopedSlots: { customRender: 'action' },
+  },
+];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 40,
+  address: 'London Park',
+}];
+
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+```
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
new file mode 100644
index 000000000..59b0013c5
--- /dev/null
+++ b/components/table/demo/fixed-header.md
@@ -0,0 +1,50 @@
+<cn>
+#### 固定表头
+方便一页内展示大量数据。
+需要指定 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.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 50 }" :scroll="{ y: 240 }" />
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  width: 150,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  width: 150,
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+}];
+
+const data = [];
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+```
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
new file mode 100644
index 000000000..e6121ac13
--- /dev/null
+++ b/components/table/demo/grouping-columns.md
@@ -0,0 +1,109 @@
+<cn>
+#### 表头分组
+`columns[n]` 可以内嵌 `children`，以渲染分组表头。
+</cn>
+
+<us>
+#### Grouping table head
+Group table head with `columns[n].children`.
+</us>
+
+```html
+<template>
+  <a-table
+    :columns="columns"
+    :dataSource="data"
+    bordered
+    size="middle"
+    :scroll="{ x: '130%', y: 240 }"
+  />
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  width: 100,
+  fixed: 'left',
+  filters: [{
+    text: 'Joe',
+    value: 'Joe',
+  }, {
+    text: 'John',
+    value: 'John',
+  }],
+  onFilter: (value, record) => record.name.indexOf(value) === 0,
+}, {
+  title: 'Other',
+  children: [{
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 200,
+    sorter: (a, b) => a.age - b.age,
+  }, {
+    title: 'Address',
+    children: [{
+      title: 'Street',
+      dataIndex: 'street',
+      key: 'street',
+      width: 200,
+    }, {
+      title: 'Block',
+      children: [{
+        title: 'Building',
+        dataIndex: 'building',
+        key: 'building',
+        width: 100,
+      }, {
+        title: 'Door No.',
+        dataIndex: 'number',
+        key: 'number',
+        width: 100,
+      }],
+    }],
+  }],
+}, {
+  title: 'Company',
+  children: [{
+    title: 'Company Address',
+    dataIndex: 'companyAddress',
+    key: 'companyAddress',
+  }, {
+    title: 'Company Name',
+    dataIndex: 'companyName',
+    key: 'companyName',
+  }],
+}, {
+  title: 'Gender',
+  dataIndex: 'gender',
+  key: 'gender',
+  width: 60,
+  fixed: 'right',
+}];
+
+const data = [];
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: i + 1,
+    street: 'Lake Park',
+    building: 'C',
+    number: 2035,
+    companyAddress: 'Lake Street 42',
+    companyName: 'SoftLake Co',
+    gender: 'M',
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+```
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
new file mode 100644
index 000000000..15d782a30
--- /dev/null
+++ b/components/table/demo/head.md
@@ -0,0 +1,100 @@
+<cn>
+#### 筛选和排序
+对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
+对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
+</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 `function(a, b) { ... }` for sorting data locally.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" @change="onChange"/>
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  filters: [{
+    text: 'Joe',
+    value: 'Joe',
+  }, {
+    text: 'Jim',
+    value: 'Jim',
+  }, {
+    text: 'Submenu',
+    value: 'Submenu',
+    children: [{
+      text: 'Green',
+      value: 'Green',
+    }, {
+      text: 'Black',
+      value: 'Black',
+    }],
+  }],
+  // specify the condition of filtering result
+  // 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,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  sorter: (a, b) => a.age - b.age,
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  filters: [{
+    text: 'London',
+    value: 'London',
+  }, {
+    text: 'New York',
+    value: 'New York',
+  }],
+  filterMultiple: false,
+  onFilter: (value, record) => record.address.indexOf(value) === 0,
+  sorter: (a, b) => a.address.length - b.address.length,
+}];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 32,
+  address: 'London No. 2 Lake Park',
+}];
+
+function onChange(pagination, filters, sorter) {
+  console.log('params', pagination, filters, sorter);
+}
+
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  },
+  methods: {
+    onChange,
+  }
+}
+</script>
+```
diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue
new file mode 100644
index 000000000..ea92dd7db
--- /dev/null
+++ b/components/table/demo/index.vue
@@ -0,0 +1,96 @@
+<script>
+import Ajax from './ajax.md'
+import Basic from './basic.md'
+import Bordered from './bordered.md'
+import ColspanRowspan from './colspan-rowspan.md'
+import CustomFilterPanel from './custom-filter-panel.md'
+import EditCell from './edit-cell.md'
+import EditRow from './edit-row.md'
+import ExpandChildren from './expand-children.md'
+import Expand from './expand.md'
+import FixedColumnsHeader from './fixed-columns-header.md'
+import FixedColumns from './fixed-columns.md'
+import FixedHeader from './fixed-header.md'
+import GroupingColumns from './grouping-columns.md'
+import Head from './head.md'
+import NestedTable from './nested-table.md'
+import ResetFilter from './reset-filter.md'
+import RowSelectionAndOperation from './row-selection-and-operation.md'
+import RowSelectionCustom from './row-selection-custom.md'
+import RowSelection from './row-selection.md'
+import Size from './size.md'
+import Template from './template.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Table 表格
+
+    展示行列数据。
+
+## 何时使用
+
+- 当有大量结构化的数据需要展现时；
+- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
+
+## 如何使用
+
+指定表格的数据源 \`dataSource\` 为一个数组。
+    ## 代码演示`,
+  us: `# Table
+
+    A table displays rows of data.
+
+## When To Use
+
+- To display a collection of structured data.
+- To sort, search, paginate, filter data.
+
+## How To Use
+
+Specify \`dataSource\` of Table as an array of data.
+## Examples 
+`,
+}
+export default {
+  category: 'Components',
+  cols: 1,
+  type: 'Data Display',
+  title: 'Table',
+  subtitle: '表格',
+  render () {
+    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/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md
new file mode 100644
index 000000000..0ede8fd0a
--- /dev/null
+++ b/components/table/demo/nested-table.md
@@ -0,0 +1,136 @@
+<cn>
+#### 嵌套子表格
+展示每行数据更详细的信息。
+</cn>
+
+<us>
+#### Nested tables
+Showing more detailed info of every row.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">
+    <a slot="operation" slot-scope="text" href="#">Publish</a>
+    <a-table
+      slot="expandedRowRender"
+      slot-scope="text"
+      :columns="innerColumns"
+      :dataSource="innerData"
+      :pagination="false"
+    >
+      <span slot="status" slot-scope="text">
+        <a-badge status="success" />Finished
+      </span>
+      <span slot="operation" slot-scope="text" class="table-operation">
+        <a href="#">Pause</a>
+        <a href="#">Stop</a>
+        <a-dropdown>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              Action 1
+            </a-menu-item>
+            <a-menu-item>
+              Action 2
+            </a-menu-item>
+          </a-menu>
+          <a href="#">
+            More <a-icon type="down" />
+          </a>
+        </a-dropdown>
+      </span>
+    </a-table>
+  </a-table>
+</template>
+<script>
+const columns = [
+  { title: 'Name', dataIndex: 'name', key: 'name' },
+  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
+  { title: 'Version', dataIndex: 'version', key: 'version' },
+  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
+  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
+  { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
+];
+
+const data = [];
+for (let i = 0; i < 3; ++i) {
+  data.push({
+    key: i,
+    name: 'Screem',
+    platform: 'iOS',
+    version: '10.3.4.5654',
+    upgradeNum: 500,
+    creator: 'Jack',
+    createdAt: '2014-12-24 23:12:00',
+  });
+}
+
+const innerColumns = [
+  { title: 'Date', dataIndex: 'date', key: 'date' },
+  { title: 'Name', dataIndex: 'name', key: 'name' },
+  { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
+  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+  {
+    title: 'Action',
+    dataIndex: 'operation',
+    key: 'operation',
+    scopedSlots: { customRender: 'operation' },
+  },
+];
+
+const innerData = [];
+for (let i = 0; i < 3; ++i) {
+  innerData.push({
+    key: i,
+    date: '2014-12-24 23:12:00',
+    name: 'This is production name',
+    upgradeNum: 'Upgraded: 56',
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+      innerColumns,
+      innerData,
+    }
+  }
+}
+</script>
+<style>
+.components-table-demo-nested .ant-table-expanded-row > td:last-child {
+  padding: 0 48px 0 8px;
+}
+
+.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
+  padding-left: 0;
+}
+
+.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
+  padding-left: 0;
+}
+
+.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
+  border: none;
+}
+
+.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
+  background: none;
+}
+
+.components-table-demo-nested .table-operation a:not(:last-child) {
+  margin-right: 24px;
+}
+
+.components-table-demo-nested .ant-table-expanded-row:hover > td {
+  background: #fbfbfb;
+}
+</style>
+```
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
new file mode 100644
index 000000000..0a007b16a
--- /dev/null
+++ b/components/table/demo/reset-filter.md
@@ -0,0 +1,129 @@
+<cn>
+#### 可控的筛选和排序
+使用受控属性对筛选和排序状态进行控制。
+> 1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
+> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
+> 3. 务必指定 `column.key`。
+</cn>
+
+<us>
+#### Reset filters and sorters
+Control filters and sorters by `filteredValue` and `sortOrder`.
+> 1. Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.
+> 2. Make sure `sortOrder` is assigned for only one column.
+> 3. `column.key` is required.
+</us>
+
+```html
+<template>
+  <div>
+    <div class="table-operations">
+      <a-button @click="setAgeSort">Sort age</a-button>
+      <a-button @click="clearFilters">Clear filters</a-button>
+      <a-button @click="clearAll">Clear filters and sorters</a-button>
+    </div>
+    <a-table :columns="columns" :dataSource="data" @change="handleChange" />
+  </div>
+</template>
+<script>
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 32,
+  address: 'London No. 2 Lake Park',
+}];
+
+export default {
+  data() {
+    return {
+      data,
+      filteredInfo: null,
+      sortedInfo: null,
+    }
+  },
+  computed: {
+    columns() {
+      let { sortedInfo, filteredInfo } = this;
+      sortedInfo = sortedInfo || {};
+      filteredInfo = filteredInfo || {};
+      const columns = [{
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        filters: [
+          { text: 'Joe', value: 'Joe' },
+          { text: 'Jim', value: 'Jim' },
+        ],
+        filteredValue: filteredInfo.name || null,
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length,
+        sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
+      }, {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+        sorter: (a, b) => a.age - b.age,
+        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
+      }, {
+        title: 'Address',
+        dataIndex: 'address',
+        key: 'address',
+        filters: [
+          { text: 'London', value: 'London' },
+          { text: 'New York', value: 'New York' },
+        ],
+        filteredValue: filteredInfo.address || null,
+        onFilter: (value, record) => record.address.includes(value),
+        sorter: (a, b) => a.address.length - b.address.length,
+        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
+      }];
+      return columns;
+    }
+  },
+  methods: {
+    handleChange (pagination, filters, sorter) {
+      console.log('Various parameters', pagination, filters, sorter);
+      this.filteredInfo = filters;
+      this.sortedInfo = sorter;
+    },
+    clearFilters () {
+      this.filteredInfo = null;
+    },
+    clearAll () {
+      this.filteredInfo = null;
+      this.sortedInfo = null;
+    },
+    setAgeSort () {
+      this.sortedInfo = {
+        order: 'descend',
+        columnKey: 'age',
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.table-operations {
+  margin-bottom: 16px;
+}
+
+.table-operations > button {
+  margin-right: 8px;
+}
+</style>
+```
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
new file mode 100644
index 000000000..3421c8b1f
--- /dev/null
+++ b/components/table/demo/row-selection-and-operation.md
@@ -0,0 +1,84 @@
+<cn>
+#### 选择和操作
+选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
+</cn>
+
+<us>
+#### Selection and operation
+To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
+</us>
+
+```html
+<template>
+  <div>
+    <div style="margin-bottom: 16px">
+      <a-button
+        type="primary"
+        @click="start"
+        :disabled="!hasSelected"
+        :loading="loading"
+      >
+        Reload
+      </a-button>
+      <span style="margin-left: 8px">
+        <template v-if="hasSelected">
+          {{`Selected ${selectedRowKeys.length} items`}}
+        </template>
+      </span>
+    </div>
+    <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :dataSource="data" />
+  </div>
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+}];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+      selectedRowKeys: [], // Check here to configure the default column
+      loading: false,
+    }
+  },
+  computed: {
+    hasSelected() {
+      return this.selectedRowKeys.length > 0
+    }
+  },
+  methods: {
+    start () {
+      this.loading = true;
+      // ajax request after empty completing
+      setTimeout(() => {
+        this.loading = false;
+        this.selectedRowKeys = [];
+      }, 1000);
+    },
+    onSelectChange (selectedRowKeys) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys);
+      this.selectedRowKeys = selectedRowKeys
+    }
+  },
+}
+</script>
+```
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
new file mode 100644
index 000000000..51103301a
--- /dev/null
+++ b/components/table/demo/row-selection-custom.md
@@ -0,0 +1,97 @@
+<cn>
+#### 自定义选择项
+通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。
+</cn>
+
+<us>
+#### Custom selection
+Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
+</us>
+
+```html
+<template>
+  <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+}];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+      selectedRowKeys: [], // Check here to configure the default column
+    }
+  },
+  computed: {
+    rowSelection() {
+      const { selectedRowKeys } = this;
+      return {
+        selectedRowKeys,
+        onChange: this.onSelectChange,
+        hideDefaultSelections: true,
+        selections: [{
+          key: 'all-data',
+          text: 'Select All Data',
+          onSelect: () => {
+            this.selectedRowKeys = [...Array(46).keys()]; // 0...45
+          },
+        }, {
+          key: 'odd',
+          text: 'Select Odd Row',
+          onSelect: (changableRowKeys) => {
+            let newSelectedRowKeys = [];
+            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+              if (index % 2 !== 0) {
+                return false;
+              }
+              return true;
+            });
+            this.selectedRowKeys = newSelectedRowKeys;
+          },
+        }, {
+          key: 'even',
+          text: 'Select Even Row',
+          onSelect: (changableRowKeys) => {
+            let newSelectedRowKeys = [];
+            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+              if (index % 2 !== 0) {
+                return true;
+              }
+              return false;
+            });
+            this.selectedRowKeys = newSelectedRowKeys;
+          },
+        }],
+        onSelection: this.onSelection,
+      }
+    }
+  },
+  methods: {
+    onSelectChange (selectedRowKeys) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys);
+      this.selectedRowKeys = selectedRowKeys
+    },
+  },
+}
+</script>
+```
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
new file mode 100644
index 000000000..774a4597a
--- /dev/null
+++ b/components/table/demo/row-selection.md
@@ -0,0 +1,78 @@
+<cn>
+#### 可选择
+第一列是联动的选择框。
+> 默认点击 checkbox 触发选择行为
+</cn>
+
+<us>
+#### selection
+Rows can be selectable by making first column as a selectable column.
+> selection happens when clicking checkbox defaultly.
+</us>
+
+```html
+<template>
+  <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data">
+    <a slot="name" slot-scope="text" href="#">{{text}}</a>
+  </a-table>
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  scopedSlots: { customRender: 'name' },
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+}];
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Disabled User',
+  age: 99,
+  address: 'Sidney No. 1 Lake Park',
+}];
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  },
+  computed: {
+    rowSelection() {
+      const { selectedRowKeys } = this;
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+          props: {
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+          }
+        }),
+      }
+    }
+  },
+}
+</script>
+```
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
new file mode 100644
index 000000000..4873e5327
--- /dev/null
+++ b/components/table/demo/size.md
@@ -0,0 +1,60 @@
+<cn>
+#### 紧凑型
+两种紧凑型的列表，小型列表只用于对话框内。
+</cn>
+
+<us>
+#### size
+Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
+</us>
+
+```html
+<template>
+  <div id="components-table-demo-size">
+    <h4>Middle size table</h4>
+    <a-table :columns="columns" :dataSource="data" size="middle" />
+    <h4>Small size table</h4>
+    <a-table :columns="columns" :dataSource="data" size="small" />
+  </div>
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+}];
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}];
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+<style>
+#components-table-demo-size h4 { margin-bottom: 16px; }
+</style>
+```
diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx
index 539e365ab..0a2d03c74 100755
--- a/components/table/filterDropdown.jsx
+++ b/components/table/filterDropdown.jsx
@@ -193,6 +193,7 @@ export default {
           onSelect={this.setSelectedKeys}
           onDeselect={this.setSelectedKeys}
           selectedKeys={this.sSelectedKeys}
+          getPopupContainer={(triggerNode) => triggerNode.parentNode}
         >
           {this.renderMenus(column.filters)}
         </Menu>
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index c7243aa62..599d21aa6 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -1,20 +1,3 @@
----
-category: Components
-cols: 1
-type: Data Display
-title: Table
----
-
-A table displays rows of data.
-
-## When To Use
-
-- To display a collection of structured data.
-- To sort, search, paginate, filter data.
-
-## How To Use
-
-Specify `dataSource` of Table as an array of data.
 
 ```jsx
 const dataSource = [{
@@ -160,47 +143,12 @@ Properties for row selection.
 | text | Display text of this selection | string\|React.ReactNode | - |
 | onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
 
-## Using in TypeScript
-
-```jsx
-import { Table } from 'antd';
-import { ColumnProps } from 'antd/lib/table';
-
-interface IUser {
-  key: number,
-  name: string;
-}
-
-const columns: ColumnProps<IUser>[] = [{
-  key: 'name',
-  title: 'Name',
-  dataIndex: 'name',
-}];
-
-const data: IUser[] = [{
-  key: 0,
-  name: 'Jack',
-}];
-
-class UserTable extends Table<IUser> {}
-
-<UserTable columns={columns} dataSource={data} />
-
-// Use JSX style API
-class NameColumn extends Table.Column<IUser> {}
-
-<UserTable dataSource={data}>
-  <NameColumn key="name" title="Name" dataIndex="name" />
-</UserTable>
-```
 
 ## Note
 
-According to [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in array should be assigned a unique key. The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`.
+The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`.
 
-If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings like above will show in browser console.
-
-![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
+If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings will show in browser console.
 
 ```jsx
 // primary key is uid
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 5f959537c..f7bf04e39 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -1,21 +1,3 @@
----
-category: Components
-cols: 1
-type: Data Display
-title: Table
-subtitle: 表格
----
-
-展示行列数据。
-
-## 何时使用
-
-- 当有大量结构化的数据需要展现时；
-- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
-
-## 如何使用
-
-指定表格的数据源 `dataSource` 为一个数组。
 
 ```jsx
 const dataSource = [{
@@ -84,6 +66,7 @@ const columns = [{
 #### onRow 用法
 
 适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
+遵循Vue [jsx语法](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
 
 ```jsx
 <Table
@@ -108,33 +91,33 @@ const columns = [{
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| className | 列的 className | string | - |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number |  |
 | dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
-| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | - |
+| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode\|slot | - |
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
-| filterIcon | 自定义 fiter 图标。 | ReactNode | false |
+| filterIcon | 自定义 fiter 图标。 | VNode\|slot | false |
 | filterMultiple | 是否多选 | boolean | true |
 | filters | 表头的筛选菜单项 | object\[] | - |
 | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
 | key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
-| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
+| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {} | - |
 | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
-| title | 列头显示文字 | string\|ReactNode | - |
+| title | 列头显示文字 | string\|slot | - |
 | width | 列宽度 | string\|number | - |
 | onCell | 设置单元格属性 | Function(record) | - |
-| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
-| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
-| onHeaderCell | 设置头部单元格属性 | Function(column) | - |
+| customHeaderCell | 设置头部单元格属性 | Function(column) | - |
+| onFilter | 本地模式下，确定筛选的运行函数, 使用template或jsx时作为`filter`事件使用 | Function | - |
+| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filter`事件使用 | function(visible) {} | - |
+
 
 ### ColumnGroup
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 列头显示文字 | string\|ReactNode | - |
+| title | 列头显示文字 | string\|slot | - |
 
 ### rowSelection
 
@@ -146,7 +129,7 @@ const columns = [{
 | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
 | hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
 | selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
-| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
+| selections | 自定义选择项, 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
 | type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
 | onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
 | onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
@@ -157,50 +140,16 @@ const columns = [{
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| key | React 需要的 key，建议设置 | string | - |
-| text | 选择项显示的文字 | string\|React.ReactNode | - |
+| key | Vue 需要的 key，建议设置 | string | - |
+| text | 选择项显示的文字 | string\|VNode | - |
 | onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
 
-## 在 TypeScript 中使用
-
-```jsx
-import { Table } from 'antd';
-import { ColumnProps } from 'antd/lib/table';
-
-interface IUser {
-  key: number;
-  name: string;
-}
-
-const columns: ColumnProps<IUser>[] = [{
-  key: 'name',
-  title: 'Name',
-  dataIndex: 'name',
-}];
-
-const data: IUser[] = [{
-  key: 0,
-  name: 'Jack',
-}];
-
-class UserTable extends Table<IUser> {}
-<UserTable columns={columns} dataSource={data} />
-
-// 使用 JSX 风格的 API
-class NameColumn extends Table.Column<IUser> {}
-
-<UserTable dataSource={data}>
-  <NameColumn key="name" title="Name" dataIndex="name" />
-</UserTable>
-```
 
 ## 注意
 
-按照 [React 的规范](https://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
+在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
 
-如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
-
-![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
+如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现缺少key的提示，表格组件也会出现各类奇怪的错误。
 
 ```jsx
 // 比如你的数据主键是 uid
diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.jsx
index 062ee70f6..1dfc17ea4 100644
--- a/components/timeline/TimelineItem.jsx
+++ b/components/timeline/TimelineItem.jsx
@@ -4,7 +4,6 @@ import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util
 
 export const TimeLineItemProps = {
   prefixCls: PropTypes.string,
-  className: PropTypes.string,
   color: PropTypes.string,
   dot: PropTypes.any,
   pending: PropTypes.bool,
@@ -20,7 +19,7 @@ export default {
     pending: false,
   }),
   render () {
-    const { prefixCls, color = '', last, pending, ...restProps } = getOptionProps(this)
+    const { prefixCls, color = '', last, pending } = getOptionProps(this)
     const dot = getComponentFromProp(this, 'dot')
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,
@@ -33,9 +32,12 @@ export default {
       [`${prefixCls}-item-head-custom`]: dot,
       [`${prefixCls}-item-head-${color}`]: true,
     })
-
+    const liProps = {
+      class: itemClassName,
+      on: this.$listeners,
+    }
     return (
-      <li {...restProps} class={itemClassName}>
+      <li {...liProps}>
         <div class={`${prefixCls}-item-tail`} />
         <div
           class={dotClassName}
diff --git a/components/vc-menu/SubMenu.jsx b/components/vc-menu/SubMenu.jsx
index df77c4ad1..3e51967bf 100644
--- a/components/vc-menu/SubMenu.jsx
+++ b/components/vc-menu/SubMenu.jsx
@@ -435,7 +435,7 @@ export default {
     // const children = this.renderChildren(this.$slots.default)
 
     const getPopupContainer = this.isRootMenu
-      ? this.getPopupContainer : triggerNode => triggerNode.parentNode
+      ? this.parentMenuContext.getPopupContainer : triggerNode => triggerNode.parentNode
     const popupPlacement = popupPlacementMap[props.mode]
     const popupClassName = props.mode === 'inline' ? '' : props.popupClassName
     const liProps = {
diff --git a/components/vc-table/demo/column-resize.js b/components/vc-table/demo/column-resize.js
index 2b2a5afff..9cf57bf94 100644
--- a/components/vc-table/demo/column-resize.js
+++ b/components/vc-table/demo/column-resize.js
@@ -60,8 +60,12 @@ export default {
     const columns = this.columns.map((col, index) => ({
       ...col,
       customHeaderCell: (column) => ({
-        width: column.width,
-        onResize: this.handleResize(index),
+        props: {
+          width: column.width,
+        },
+        on: {
+          resize: this.handleResize(index),
+        },
       }),
     }))
 
diff --git a/examples/components/demo.vue b/examples/components/demo.vue
index c919a4222..aa696a145 100644
--- a/examples/components/demo.vue
+++ b/examples/components/demo.vue
@@ -3,6 +3,7 @@ import * as AllDemo from '../demo'
 import Header from './header'
 import zhCN from 'antd/locale-provider/zh_CN'
 import enUS from 'antd/locale-provider/default'
+import _ from 'lodash'
 export default {
   render () {
     const { name } = this.$route.params
@@ -28,7 +29,7 @@ export default {
     const MenuGroup = []
     for (const [type, menus] of Object.entries(menuConfig)) {
       const MenuItems = []
-      menus.forEach(({ title, subtitle }) => {
+      _.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
         const linkValue = lang === 'cn'
           ? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
           : [<span>{title}</span>]
diff --git a/examples/demo.js b/examples/demo.js
index 063ceb7eb..afd09b0e3 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -38,3 +38,4 @@ export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
 export { default as slider } from 'antd/slider/demo/index.vue'
 export { default as progress } from 'antd/progress/demo/index.vue'
 export { default as timeline } from 'antd/timeline/demo/index.vue'
+export { default as table } from 'antd/table/demo/index.vue'
diff --git a/examples/routes.js b/examples/routes.js
index e6820c0c8..4b4388054 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,11 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
+<<<<<<< HEAD
     component: import(`../components/vc-m-feedback/demo/${d}`),
+=======
+    component: import(`../components/table/demo/${d}`),
+>>>>>>> 5d2271a131c74d672cc0cfada07e256752160b41
   }
 }
 export default [