---
title: 基础组件
nav:
  title: 组件
  order: 1
---

```jsx
import React from 'react'
import BaseTable from '../../src/components/BaseTable'

const BaseTableDemo = () => {

  const dataSource = [...Array(50).keys()].map(i => ({
    key: i,
    name: `name${i}`,
    age:  (Math.random() * 20 + 18).toFixed(0),
    height: (Math.random() * 20 + 160).toFixed(0)
  }))
  const columns = [{
    title: '序号',
    dataIndex: 'key',
    render: (text, record, index) => {
      return <span> {Number(text) + 1} </span>
    }
  }, {
    title: '姓名',
    dataIndex: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
  },{
    title: '身高',
    dataIndex: 'height',
  }]
  const searchBar = {
  items:[{
    label:'姓名',
    type:'input',
    dataIndex:'name',
    formItemProps:{
      wrapperCol:{
      span:12,
    }}
  },
  {
    label:'年龄',
    type:'input',
    dataIndex:'age',
    formItemProps:{
      wrapperCol:{
      span:12,
    }}
  },
  {
    label:'身高',
    type:'input',
    dataIndex:'height',
    formItemProps:{
      wrapperCol:{
      span:12,
    }}
  },],
  formProps:{
    layout:'inline'
  },
  buttons:[
    {
      text:'搜索',
      type:'primary',
      htmlType:'submit'
    },
    // {
    //   text:'重置',
    //   type:'info',
    //   onClick:handleClick
    // }
  ],

  onCommit: () => {
    console.log(111)
  }
}
  const handleClick =() =>{
    console.log("click")
  }
  return (
    <BaseTable 
      searchBar={searchBar}
      // operation={operation}
      dataSource={dataSource}
      columns={columns}
      resizable={true}
      bordered={true}
      // components={components}
      // onRequest={onRequest}
      // onFilter={onFilter}
  />)
}

export default BaseTableDemo
```