react bee-table component for tinper-bee

该table组件除了基本表格功能之外，还提供了一下功能。

• 动态设置过滤列
• 排序合计
• 多选
• 主子表
• 固定表头
• 拖拽表头进行列交换
• 拖拽调整列宽度
• 嵌套子表格
• 行、列合并

具体示例代码参考!这里

为了响应大家对bee-table的需求，我们新增加了表格的高级组件 bee-complex-grid

const columns = [
  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
  {
    title: '操作', dataIndex: '', key: 'd', render() {
      return <a href="#">一些操作</a>;
    },
  },
];

const data = [
  { a: '令狐冲', b: '男', c: 41, key: '1' },
  { a: '杨过', b: '男', c: 67, key: '2' },
  { a: '郭靖', b: '男', c: 25, key: '3' },
];

class Demo extends Component {
    render () {
        return (
              <Table
              columns={columns}
              data={data}
              title={currentData => <div>标题: 这是一个标题</div>}
              footer={currentData => <div>表尾: 我是小尾巴</div>}
              />
        )
    }
}

快捷键部分参考示例 (快捷键在table中的简单使用应用)

注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id

需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：

• 在tinper-bee中引用

import {Table} from 'tinper-bee'

• 单独安装bee-table 方式

import Table from 'bee-table'

import multiSelect from "bee-table/lib/multiSelect.js";

全选功能

排序功能

合计功能

过滤表头列示例

拖拽表头交换顺序示例

在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等

需要单独的去引用相应的js文件，目录在render文件夹，示例如下：

import InputRender from "bee-table/render/InputRender.js"

不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。

输入框类型render

该render依赖于bee-icon,bee-form-control,bee-form,bee-tooltip。

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

日期类型render

该render依赖于bee-icon,bee-datepicker,moment

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

注:其他参数参见bee-datepicker组件参数配置

输入框类型render

该render依赖于bee-icon,bee-select

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

注:其他参数参见bee-select组件参数配置

$ git clone https://github.com/tinper-bee/bee-table
$ cd bee-table
$ npm install
$ npm run dev