---
title: 拖拽表格的基本用法
title_en: normal usage for dndTable component
category: 2
---
展示了一个表格组件的基本用法
```jsx
import { ColDndTable } from '../../..'

const dataSource = [{
  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',
}]

const columns = [{
      title: 'name',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: 'age',
      dataIndex: 'age',
      key: 'age',
    }, {
      title: 'address',
      dataIndex: 'address',
      key: 'address',
    }]

ReactDOM.render(
  <ColDndTable
    mod="row"
    dataSource={dataSource}
    columns={columns}
  />,
  mountNode
)
```