github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add vc-table demo

pull/165/head
tjz 2018-03-27 22:41:41 +08:00
parent d409ad7c25
commit 8ea6896fe8
10 changed files with 516 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
components/vc-table/demo/jsx.js Normal file
View File

@ -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>
)
},
}

46
components/vc-table/demo/nested.js Normal file
View File

@ -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>
)
},
}

27
components/vc-table/demo/no-data.js Normal file
View File

@ -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>
)
},
}

109
components/vc-table/demo/rowAndCellClick.js Normal file
View File

@ -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),
},
})}
/>
)
},
}

37
components/vc-table/demo/scrollX.js Normal file
View File

@ -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>
)
},
}

47
components/vc-table/demo/scrollXY.js Normal file
View File

@ -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>
)
},
}

57
components/vc-table/demo/scrollY.js Normal file
View File

@ -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>
)
},
}

44
components/vc-table/demo/styled-components.js Normal file
View File

@ -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>
)
},
}

62
components/vc-table/demo/subTable.js Normal file
View File

@ -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>
)
},
}

37
components/vc-table/demo/title-and-footer.js Normal file
View File

@ -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>
)
},
}