add table demo

components/index.js

@@ -132,4 +132,9 @@ import DatePicker from './date-picker'
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker
 export { DatePicker, MonthPicker, RangePicker, WeekPicker }
 
+import Table from './table'
+const { Column: TableColumn, ColumnGroup: TableColumnGroup } = Table
+
+export { Table, TableColumn, TableColumnGroup }
+
 export { default as version } from './version'

components/style.js

@@ -34,3 +34,4 @@ import './steps/style'
 import './breadcrumb/style'
 import './calendar/style'
 import './date-picker/style'
+import './table/style'

components/table/Table.jsx

@@ -1,4 +1,5 @@
 
+import cloneDeep from 'lodash/cloneDeep'
 import VcTable from '../vc-table'
 import classNames from 'classnames'
 import Pagination from '../pagination'
@@ -16,6 +17,7 @@ import ColumnGroup from './ColumnGroup'
 import createBodyRow from './createBodyRow'
 import { flatArray, treeMap, flatFilter } from './util'
 import { initDefaultProps, mergeProps, getOptionProps } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
 import {
   TableProps,
 } from './interface'
@@ -47,12 +49,12 @@ export default {
   name: 'Table',
   Column,
   ColumnGroup,
-
+  mixins: [BaseMixin],
   props: initDefaultProps(TableProps, {
     dataSource: [],
     prefixCls: 'ant-table',
     useFixedHeader: false,
-    rowSelection: null,
+    // rowSelection: null,
     size: 'large',
     loading: false,
     bordered: false,
@@ -148,7 +150,7 @@ export default {
       this.createComponents(val, preVal)
     },
   },
-
+  methods: {
     getCheckboxPropsByItem (item, index) {
       const { rowSelection = {}} = this
       if (!rowSelection.getCheckboxProps) {
@@ -653,7 +655,7 @@ export default {
     },
 
     getMaxCurrent (total) {
-    const { current, pageSize } = this.sPagination
+      const { current, pageSize } = this.sPagination.props
       if ((current - 1) * pageSize >= total) {
         return Math.floor((total - 1) / pageSize) + 1
       }
@@ -789,7 +791,7 @@ export default {
 
     // Get pagination, filters, sorter
     prepareParamsArguments (state) {
-    const pagination = { ...state.sPagination }
+      const pagination = cloneDeep(state.sPagination)
       // remove useless handle function in Table.onChange
       if (pagination.on) {
         delete pagination.on.change
@@ -820,13 +822,14 @@ export default {
       let data = this.getLocalData()
       let current
       let pageSize
+      const pagProps = this.sPagination.props || {}
       // 如果没有分页的话，默认全部展示
       if (!this.hasPagination()) {
         pageSize = Number.MAX_VALUE
         current = 1
       } else {
-      pageSize = this.sPagination.pageSize
-      current = this.getMaxCurrent(this.sPagination.total || data.length)
+        pageSize = pagProps.pageSize
+        current = this.getMaxCurrent(pagProps.total || data.length)
       }
 
       // 分页
@@ -886,12 +889,12 @@ export default {
       return data
     },
 
-  createComponents (components, prevComponents) {
+    createComponents (components = {}, prevComponents) {
       const bodyRow = components && components.body && components.body.row
       const preBodyRow = prevComponents && prevComponents.body && prevComponents.body.row
-    if (!this.components || bodyRow !== preBodyRow) {
-      this.components = { ...components }
-      this.components.body = {
+      if (!this.customComponents || bodyRow !== preBodyRow) {
+        this.customComponents = { ...components }
+        this.customComponents.body = {
           ...components.body,
           row: createBodyRow(bodyRow),
         }
@@ -926,8 +929,8 @@ export default {
         key: 'table',
         props: {
           ...restProps,
-        customRow: this.customRow,
-        components: this.components,
+          customRow: this.onRow,
+          components: this.customComponents,
           prefixCls,
           data,
           columns,
@@ -945,6 +948,7 @@ export default {
         />
       )
     },
+  },
 
   render () {
     const { prefixCls } = this

components/table/createBodyRow.jsx

@@ -44,7 +44,7 @@ export default function createTableRow (Component = 'tr') {
 
     render () {
       const className = {
-        [`${this.props.prefixCls}-row-selected`]: this.selected,
+        [`${this.prefixCls}-row-selected`]: this.selected,
       }
 
       return (

components/table/demo/basic.md

@@ -0,0 +1,59 @@
+<cn>
+#### 基本用法
+简单的表格，最后一列是各种操作。
+</cn>
+
+<us>
+#### basic Usage
+Simple table with actions.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" />
+</template>
+<script>
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+}, {
+  title: 'Action',
+  key: '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/filterDropdown.jsx

@@ -8,7 +8,8 @@ import Checkbox from '../checkbox'
 import Radio from '../radio'
 import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper'
 import { FilterMenuProps } from './interface'
-import { initDefaultProps, cloneElement } from '../_util/props-util'
+import { initDefaultProps } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
 import BaseMixin from '../_util/BaseMixin'
 
 export default {

components/table/interface.js

@@ -81,9 +81,9 @@ export const TableRowSelection = {
 export const TableProps = {
   prefixCls: PropTypes.string,
   dropdownPrefixCls: PropTypes.string,
-  rowSelection: PropTypes.shape(TableRowSelection).loose,
+  rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, null]),
   pagination: PropTypes.oneOfType([PropTypes.shape(PaginationProps).loose, PropTypes.bool]),
-  size: PropTypes.oneOf(['default', 'middle', 'small']),
+  size: PropTypes.oneOf(['default', 'middle', 'small', 'large']),
   dataSource: PropTypes.array,
   components: PropTypes.object,
   columns: PropTypes.array,
@@ -178,6 +178,7 @@ export const FilterMenuProps = {
   prefixCls: PropTypes.string,
   dropdownPrefixCls: PropTypes.string,
   getPopupContainer: PropTypes.func,
+  handleFilter: PropTypes.func,
 }
 
 // export interface FilterMenuState {

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/vc-table/demo/${d}`),
+    component: import(`../components/table/demo/${d}`),
   }
 }
 export default [