add table demo

components/table/SelectionCheckboxAll.jsx

@@ -22,7 +22,7 @@ export default {
       onSelect: () => {},
     }]
 
-    this.state = {
+    return {
       checked: this.getCheckState(props),
       indeterminate: this.getIndeterminateState(props),
     }
@@ -32,8 +32,13 @@ export default {
     this.subscribe()
   },
 
-  componentWillReceiveProps (nextProps) {
+  watch: {
-    this.setCheckState()
+    '$props': {
+      handler: function () {
+        this.setCheckState()
+      },
+      deep: true,
+    },
   },
 
   beforeDestroy () {

components/table/Table.jsx

@@ -26,7 +26,7 @@ function noop () {
 
 function stopPropagation (e) {
   e.stopPropagation()
-  if (e.nativeEvent.stopImmediatePropagation) {
+  if (e.nativeEvent && e.nativeEvent.stopImmediatePropagation) {
     e.nativeEvent.stopImmediatePropagation()
   }
 }
@@ -194,33 +194,29 @@ export default {
     },
 
     setSelectedRowKeys (selectedRowKeys, { selectWay, record, checked, changeRowKeys }) {
-      const { rowSelection = {}, $listeners: {
+      const { rowSelection = {}} = this
-        rowSelectionChange,
-        rowSelectionSelect,
-        rowSelectionSelectAll,
-        rowSelectionSelectInvert,
-      }} = this
       if (rowSelection && !('selectedRowKeys' in rowSelection)) {
         this.store.setState({ selectedRowKeys })
       }
       const data = this.getFlatData()
-      if (!rowSelectionChange && !rowSelection[selectWay]) {
+      if (!rowSelection.onChange && !rowSelection[selectWay]) {
         return
       }
       const selectedRows = data.filter(
         (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0,
       )
-      this.$emit('rowSelectionChange', selectedRowKeys, selectedRows)
+      if (rowSelection.onChange) {
-
+        rowSelection.onChange(selectedRowKeys, selectedRows)
-      if (selectWay === 'onSelect' && rowSelectionSelect) {
+      }
-        this.$emit('rowSelectionSelect', record, checked, selectedRows)
+      if (selectWay === 'onSelect' && rowSelection.onSelect) {
-      } else if (selectWay === 'onSelectAll' && rowSelectionSelectAll) {
+        rowSelection.onSelect(record, checked, selectedRows)
+      } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) {
         const changeRows = data.filter(
           (row, i) => changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0,
         )
-        this.$emit('rowSelectionSelectAll', checked, selectedRows, changeRows)
+        rowSelection.onSelectAll(checked, selectedRows, changeRows)
-      } else if (selectWay === 'onSelectInvert' && rowSelectionSelectInvert) {
+      } else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) {
-        this.$emit('rowSelectionSelectInvert', selectedRowKeys)
+        rowSelection.onSelectInvert(selectedRowKeys)
       }
     },
 
@@ -602,7 +598,7 @@ export default {
         })
         const selectionColumn = {
           key: 'selection-column',
-          render: this.renderSelectionBox(rowSelection.type),
+          customRender: this.renderSelectionBox(rowSelection.type),
           className: selectionColumnClass,
           fixed: rowSelection.fixed,
         }

components/table/demo/basic.7.md

@@ -1,76 +0,0 @@
-<cn>
-#### 基本用法
-简单的表格，最后一列是各种操作。
-</cn>
-
-<us>
-#### basic Usage
-Simple table with actions.
-</us>
-
-```html
-<template>
-  <a-table :columns="columns" :dataSource="data">
-    <template slot="name" slot-scope="text">
-      <a href="#">{{text}}</a>
-    </template>
-    <template slot="action" slot-scope="text, record">
-      <span>
-        <a href="#">Action 一 {{record.name}}</a>
-        <a-divider type="vertical" />
-        <a href="#">Delete</a>
-        <a-divider type="vertical" />
-        <a href="#" class="ant-dropdown-link">
-          More actions <a-icon type="down" />
-        </a>
-      </span>
-    </template>
-  </a-table>
-</template>
-<script>
-const columns = [{
-  title: 'Name',
-  dataIndex: 'name',
-  key: 'name',
-  slotScopeName: 'name',
-}, {
-  title: 'Age',
-  dataIndex: 'age',
-  key: 'age',
-}, {
-  title: 'Address',
-  dataIndex: 'address',
-  key: 'address',
-}, {
-  title: 'Action',
-  key: 'action',
-  slotScopeName: 'action',
-}];
-
-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>
-```

components/table/demo/basic.8.md

@@ -1,76 +0,0 @@
-<cn>
-#### 基本用法
-简单的表格，最后一列是各种操作。
-</cn>
-
-<us>
-#### basic Usage
-Simple table with actions.
-</us>
-
-```html
-<template>
-  <a-table :columns="columns" :dataSource="data">
-    <template slot="name" slot-scope="text">
-      <a href="#">{{text}}</a>
-    </template>
-    <template slot="action" slot-scope="text, record">
-      <span>
-        <a href="#">Action 一 {{record.name}}</a>
-        <a-divider type="vertical" />
-        <a href="#">Delete</a>
-        <a-divider type="vertical" />
-        <a href="#" class="ant-dropdown-link">
-          More actions <a-icon type="down" />
-        </a>
-      </span>
-    </template>
-  </a-table>
-</template>
-<script>
-const columns = [{
-  title: 'Name',
-  dataIndex: 'name',
-  key: 'name',
-  slotScopeName: 'name',
-}, {
-  title: 'Age',
-  dataIndex: 'age',
-  key: 'age',
-}, {
-  title: 'Address',
-  dataIndex: 'address',
-  key: 'address',
-}, {
-  title: 'Action',
-  key: 'action',
-  slotScopeName: 'action',
-}];
-
-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>
-```

components/table/demo/basic.9.md

@@ -1,76 +0,0 @@
-<cn>
-#### 基本用法
-简单的表格，最后一列是各种操作。
-</cn>
-
-<us>
-#### basic Usage
-Simple table with actions.
-</us>
-
-```html
-<template>
-  <a-table :columns="columns" :dataSource="data">
-    <template slot="name" slot-scope="text">
-      <a href="#">{{text}}</a>
-    </template>
-    <template slot="action" slot-scope="text, record">
-      <span>
-        <a href="#">Action 一 {{record.name}}</a>
-        <a-divider type="vertical" />
-        <a href="#">Delete</a>
-        <a-divider type="vertical" />
-        <a href="#" class="ant-dropdown-link">
-          More actions <a-icon type="down" />
-        </a>
-      </span>
-    </template>
-  </a-table>
-</template>
-<script>
-const columns = [{
-  title: 'Name',
-  dataIndex: 'name',
-  key: 'name',
-  slotScopeName: 'name',
-}, {
-  title: 'Age',
-  dataIndex: 'age',
-  key: 'age',
-}, {
-  title: 'Address',
-  dataIndex: 'address',
-  key: 'address',
-}, {
-  title: 'Action',
-  key: 'action',
-  slotScopeName: 'action',
-}];
-
-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>
-```

components/table/demo/basic.md

@@ -11,23 +11,17 @@ Simple table with actions.
 ```html
 <template>
   <a-table :columns="columns" :dataSource="data">
-    <template slot="name" slot-scope="text">
+    <a slot="name" slot-scope="text" href="#">{{text}}</a>
-      <a href="#">{{text}}</a>
+    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
-    </template>
+    <span slot="action" slot-scope="text, record">
-    <template slot="customTitle">
+      <a href="#">Action 一 {{record.name}}</a>
-      <span><a-icon type="smile-o" /> Name</span>
+      <a-divider type="vertical" />
-    </template>
+      <a href="#">Delete</a>
-    <template slot="action" slot-scope="text, record">
+      <a-divider type="vertical" />
-      <span>
+      <a href="#" class="ant-dropdown-link">
-        <a href="#">Action 一 {{record.name}}</a>
+        More actions <a-icon type="down" />
-        <a-divider type="vertical" />
+      </a>
-        <a href="#">Delete</a>
+    </span>
-        <a-divider type="vertical" />
-        <a href="#" class="ant-dropdown-link">
-          More actions <a-icon type="down" />
-        </a>
-      </span>
-    </template>
   </a-table>
 </template>
 <script>

components/table/demo/expand-children.md

@@ -0,0 +1,107 @@
+<cn>
+#### 树形数据展示
+表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。
+> 注：暂不支持父子数据递归关联选择。
+</cn>
+
+<us>
+#### Tree data
+Display tree structure data in Table, control the indent width by setting `indentSize`.
+> Note, no support for recursive selection of tree structure data table yet.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" />
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  width: '12%',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  width: '30%',
+  key: 'address',
+}];
+
+const data = [{
+  key: 1,
+  name: 'John Brown sr.',
+  age: 60,
+  address: 'New York No. 1 Lake Park',
+  children: [{
+    key: 11,
+    name: 'John Brown',
+    age: 42,
+    address: 'New York No. 2 Lake Park',
+  }, {
+    key: 12,
+    name: 'John Brown jr.',
+    age: 30,
+    address: 'New York No. 3 Lake Park',
+    children: [{
+      key: 121,
+      name: 'Jimmy Brown',
+      age: 16,
+      address: 'New York No. 3 Lake Park',
+    }],
+  }, {
+    key: 13,
+    name: 'Jim Green sr.',
+    age: 72,
+    address: 'London No. 1 Lake Park',
+    children: [{
+      key: 131,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 2 Lake Park',
+      children: [{
+        key: 1311,
+        name: 'Jim Green jr.',
+        age: 25,
+        address: 'London No. 3 Lake Park',
+      }, {
+        key: 1312,
+        name: 'Jimmy Green sr.',
+        age: 18,
+        address: 'London No. 4 Lake Park',
+      }],
+    }],
+  }],
+}, {
+  key: 2,
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}];
+
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+};
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+      rowSelection,
+    }
+  }
+}
+</script>
+```

components/table/demo/expand.md

@@ -0,0 +1,41 @@
+<cn>
+#### 可展开
+当表格内容较多不能一次性完全展示时。
+</cn>
+
+<us>
+#### Expandable Row
+When there's too much information to show and the table can't display all at once.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data">
+    <a slot="action" slot-scope="text" href="#">Delete</a>
+    <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>
+  </a-table>
+</template>
+<script>
+const columns = [
+  { title: 'Name', dataIndex: 'name', key: 'name' },
+  { title: 'Age', dataIndex: 'age', key: 'age' },
+  { title: 'Address', dataIndex: 'address', key: 'address' },
+  { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
+];
+
+const data = [
+  { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
+  { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
+  { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
+];
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+```

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

@@ -0,0 +1,61 @@
+<cn>
+#### 固定头和列
+适合同时展示有大量数据和数据列。
+> 若列头与内容不对齐或出现列重复，请指定列的宽度 `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.
+> 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: 1500, y: 300 }">
+    <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', width: 150 },
+  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
+  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
+  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
+  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
+  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
+  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
+  { title: 'Column 8', dataIndex: 'address', key: '8' },
+  {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    scopedSlots: { customRender: 'action' },
+  },
+];
+
+const data = [];
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: `Edrward ${i}`,
+    age: 32,
+    address: `London Park no. ${i}`,
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    }
+  }
+}
+</script>
+```

components/table/index.jsx

@@ -77,7 +77,11 @@ const Table = {
     const props = getOptionProps(this)
     const columns = props.columns ? this.updateColumns(props.columns) : normalize($slots.default)
     let { title, footer } = props
-    const { title: slotTitle, footer: slotFooter } = $scopedSlots
+    const {
+      title: slotTitle,
+      footer: slotFooter,
+      expandedRowRender = props.expandedRowRender,
+    } = $scopedSlots
     title = title || slotTitle
     footer = footer || slotFooter
     const tProps = {
@@ -86,6 +90,7 @@ const Table = {
         columns,
         title,
         footer,
+        expandedRowRender,
       },
       on: $listeners,
     }

components/table/interface.js

@@ -160,7 +160,7 @@ export const SelectionBoxProps = {
   store: Store,
   type: RowSelectionType,
   defaultSelection: PropTypes.arrayOf(PropTypes.string),
-  rowIndex: PropTypes.string,
+  rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
   disabled: PropTypes.bool,
   // onChange: React.ChangeEventHandler<HTMLInputElement>;

components/vc-table/src/ExpandableTable.jsx

@@ -134,8 +134,8 @@ const ExpandableTable = {
       }
       const columns = [{
         key: 'extra-row',
-        render: () => ({
+        customRender: () => ({
-          props: {
+          attrs: {
             colSpan: colCount,
           },
           children: fixed !== 'right' ? expandedRowRender(record, index, indent) : ' ',
@@ -144,7 +144,7 @@ const ExpandableTable = {
       if (expandIconAsCell && fixed !== 'right') {
         columns.unshift({
           key: 'expand-icon-placeholder',
-          render: () => null,
+          customRender: () => null,
         })
       }
       const parentKey = ancestorKeys[ancestorKeys.length - 1]