add vc-table demo

components/vc-table/demo/jsx.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const { ColumnGroup, Column } = Table
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+]
+
+export default {
+  render () {
+    return (
+      <div>
+        <h2>JSX table</h2>
+        <Table data={data}>
+          <ColumnGroup title='Bazinga'>
+            <Column
+              title='title1'
+              dataIndex='a'
+              key='a'
+              width={100}
+            />
+            <Column
+              id='123'
+              title='title2'
+              dataIndex='b'
+              key='b'
+              width={100}
+            />
+          </ColumnGroup>
+          <Column
+            title='title3'
+            dataIndex='c'
+            key='c'
+            width={200}
+          />
+          <Column
+            title='Operations'
+            dataIndex=''
+            key='d'
+            render={() => <a href='#'>Operations</a>}
+          />
+        </Table>
+      </div>
+    )
+  },
+}

components/vc-table/demo/nested.js

@@ -0,0 +1,46 @@
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'First Name', dataIndex: 'names.first', key: 'a', width: 100 },
+  { title: 'Last Name', dataIndex: 'names.last', key: 'b', width: 100 },
+  { title: 'Age', dataIndex: 'age', key: 'c', width: 100 },
+]
+
+const data = [{
+  age: '23',
+  names: {
+    first: 'John',
+    last: 'Doe',
+  },
+  key: '1',
+}, {
+  age: '36',
+  names: {
+    first: 'Terry',
+    last: 'Garner',
+  },
+  key: '2',
+}, {
+  age: '52',
+  names: {
+    first: 'Thomas',
+    last: 'Goodwin',
+  },
+  key: '3',
+}]
+export default {
+  render () {
+    return (
+      <div>
+        <h2>Nested data table</h2>
+        <Table
+          columns={columns}
+          data={data}
+          class='table'
+        />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/no-data.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const data = []
+
+export default {
+  render () {
+    const columns = [
+      { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+      { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+      {
+        title: 'Operations', dataIndex: '', key: 'd', render () {
+          return <a href='#'>Operations</a>
+        },
+      },
+    ]
+    return (
+      <div>
+        <h2>simple table</h2>
+        <Table columns={columns} data={data} />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/rowAndCellClick.js

@@ -0,0 +1,109 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const onRowClick = (record, index, event) => {
+  console.log(`Click nth(${index}) row of parent, record.name: ${record.name}`)
+  // See https://facebook.github.io/react/docs/events.html for original click event details.
+  if (event.shiftKey) {
+    console.log('Shift + mouse click triggered.')
+  }
+}
+
+const onRowDoubleClick = (record, index) => {
+  console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`)
+}
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  width: 400,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  width: 100,
+  render: (h, text) => (
+    <span>{text} (Trigger Cell Click)</span>
+  ),
+  onCell: (record) => ({
+    onClick (e) {
+      console.log('Click cell', record, e.target)
+    },
+  }),
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+  width: 200,
+}]
+
+const data = [{
+  key: 1,
+  name: 'a',
+  age: 32,
+  address: 'I am a',
+  children: [{
+    key: 11,
+    name: 'aa',
+    age: 33,
+    address: 'I am aa',
+  }, {
+    key: 12,
+    name: 'ab',
+    age: 33,
+    address: 'I am ab',
+    children: [{
+      key: 121,
+      name: 'aba',
+      age: 33,
+      address: 'I am aba',
+    }],
+  }, {
+    key: 13,
+    name: 'ac',
+    age: 33,
+    address: 'I am ac',
+    children: [{
+      key: 131,
+      name: 'aca',
+      age: 33,
+      address: 'I am aca',
+      children: [{
+        key: 1311,
+        name: 'acaa',
+        age: 33,
+        address: 'I am acaa',
+      }, {
+        key: 1312,
+        name: 'acab',
+        age: 33,
+        address: 'I am acab',
+      }],
+    }],
+  }],
+}, {
+  key: 2,
+  name: 'b',
+  age: 32,
+  address: 'I am b',
+}]
+
+export default {
+  render () {
+    return (
+      <Table
+        columns={columns}
+        data={data}
+        onRow={(record, index) => ({
+          on: {
+            click: onRowClick.bind(null, record, index),
+            dblclick: onRowDoubleClick.bind(null, record, index),
+          },
+        })}
+      />
+    )
+  },
+}
+

components/vc-table/demo/scrollX.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
+  { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },
+  { title: 'title5', dataIndex: 'b', key: 'e', width: 100 },
+  { title: 'title6', dataIndex: 'b', key: 'f', width: 100 },
+  { title: 'title7', dataIndex: 'b', key: 'g', width: 100 },
+  { title: 'title8', dataIndex: 'b', key: 'h', width: 100 },
+  { title: 'title9', dataIndex: 'b', key: 'i', width: 100 },
+  { title: 'title10', dataIndex: 'b', key: 'j', width: 100 },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 100 },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100 },
+]
+
+const data = [
+  { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' },
+  { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
+]
+
+export default {
+  render () {
+    return (
+      <div>
+        <h2>Scroll X</h2>
+        <Table style={{ width: '800px' }} scroll={{ x: true }} columns={columns} data={data} />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/scrollXY.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
+  { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },
+  { title: 'title5', dataIndex: 'b', key: 'e', width: 100 },
+  { title: 'title6', dataIndex: 'b', key: 'f', width: 100 },
+  { title: 'title7', dataIndex: 'b', key: 'g', width: 100 },
+  { title: 'title8', dataIndex: 'b', key: 'h', width: 100 },
+  { title: 'title9', dataIndex: 'b', key: 'i', width: 100 },
+  { title: 'title10', dataIndex: 'b', key: 'j', width: 100 },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 100 },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100 },
+]
+
+const data = [
+  { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' },
+  { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '5' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '6' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '7' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '8' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '9' },
+]
+export default {
+  render () {
+    return (
+      <div>
+        <h2>Scroll X/Y</h2>
+        <Table
+          useFixedHeader
+          style={{ width: '800px' }}
+          scroll={{ x: 1500, y: 300 }}
+          columns={columns}
+          data={data}
+        />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/scrollY.js

@@ -0,0 +1,57 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const data = []
+for (let i = 0; i < 10; i++) {
+  data.push({
+    key: i,
+    a: `a${i}`,
+    b: `b${i}`,
+    c: `c${i}`,
+  })
+}
+
+export default {
+  data () {
+    return {
+      showBody: true,
+    }
+  },
+  methods: {
+    toggleBody  () {
+      this.showBody = !this.showBody
+    },
+  },
+
+  render () {
+    const columns = [
+      { title: 'title1', key: 'a', dataIndex: 'a', width: 100 },
+      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+      { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
+      {
+        title: <a onClick={this.toggleBody} href='javascript:;'>{this.showBody ? '隐藏' : '显示'}体</a>,
+        key: 'x',
+        width: 200,
+        render () {
+          return <a href='#'>Operations</a>
+        },
+      },
+    ]
+    return (
+      <div>
+        <h2>scroll body table</h2>
+        <Table
+          columns={columns}
+          data={data}
+          scroll={{ y: 300 }}
+          rowKey={record => record.key}
+          bodyStyle={{
+            display: this.showBody ? '' : 'none',
+          }}
+        />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/styled-components.js

@@ -0,0 +1,44 @@
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  {
+    title: 'Operations',
+    dataIndex: '',
+    key: 'd',
+    render (h) {
+      return <a href='#'>Operations</a>
+    },
+  },
+]
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+]
+
+export default {
+  render () {
+    const row = {
+      render () {
+        return <tr style={{ color: 'red' }}>{this.$slots.default}</tr>
+      },
+    }
+    const components = {
+      body: {
+        row,
+      },
+    }
+    return (
+      <div>
+        <h2>Integrate with styled-components</h2>
+        <Table columns={columns} data={data} components={components} />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/subTable.js

@@ -0,0 +1,62 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const data = [
+  {
+    a: 'a1',
+  },
+  {
+    a: 'a2',
+    b: 'b2',
+    children: [
+      {
+        a: 'a2-1',
+        b: 'b2-1',
+      },
+      {
+        a: 'a2-2',
+        b: 'b2-2',
+      },
+    ],
+  },
+  {
+    a: 'a3',
+    c: 'c3',
+    d: 'd3',
+  },
+]
+
+export default {
+  methods: {
+    handleClick (record, e) {
+      e.preventDefault()
+      console.log(record.a)
+    },
+  },
+
+  render () {
+    const columns = [
+      { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+      { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+      { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+      {
+        title: 'Operations', dataIndex: '', key: 'x', render: (h, text, record) => {
+          return <a href='javascript:;' onClick={e => this.handleClick(record, e)}>click {record.a}</a>
+        },
+      },
+    ]
+    return (
+      <div>
+        <h2>sub table</h2>
+        <Table
+          columns={columns}
+          expandIconAsCell
+          data={data}
+          rowKey={record => record.a}
+        />
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/title-and-footer.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  {
+    title: 'Operations', dataIndex: '', key: 'd', render (h) {
+      return <a href='#'>Operations</a>
+    },
+  },
+]
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+]
+
+export default {
+  render () {
+    return (
+      <div>
+        <h2>title and footer</h2>
+        <Table
+          columns={columns}
+          data={data}
+          title={currentData => <div>Title: {currentData.length} items</div>}
+          footer={currentData => <div>Footer: {currentData.length} items</div>}
+        />
+      </div>
+    )
+  },
+}
+