#Smart Table

Smart Table 是对Ant.Table组件的二次封装, 主要增加了常用功能 筛选器 和 搜索.

其中筛选器包括表头筛选器和外部筛选器.

表头筛选器简化了原组件的参数, 自动收集指定字段的取值集合.

外部筛选器会取代表头筛选器, 在表格上方生成RadioButton的列表来展示, 适合选项较少的情况.

搜索组件可以在指定列上进行模糊搜索, 可以同时指定多个列. 版本2加入了高亮关键字的效果.

示例代码(主体):

import SmartTable from 'force-smart-table';

...
render() {
    return (
        <SmartTable
            dataSource={dataSource}
            columns={columns} // 筛选器配置见例设置部分
            search={['field1', 'field2']} // 指定在哪些字段上搜索
            keyword={keyword} // 可选参数, 传入外部的关键字来搜索
            autoFilterLabelWidth={true} // 自动计算外部筛选器Label的宽度
        />
    )
}

示例代码(例设置):

import {Slice} from 'smart-table/filters';

const mapStatus = {
    '1': 'done',
    '8': 'unknown'
};

...
const columns = [ 
    {dataIndex: 'content', title: '内容'},
    
    // 此列不显示
    {dataIndex: 'badData', title: 'xxx', hidden: true},
    
    // filter: true表示设置表头筛选器
    {dataIndex: 'id', title: 'ID', filter: true},
    {dataIndex: 'projectName', title: '项目名称'},
    
    // 直接传入map即可实现数据映射
    {dataIndex: 'status', title: '状态', filter: mapStatus, render: mapStatus},
    
    // 设置filter的同时设置buttonFilters表示使用外部按钮式筛选器
    // Slice是一个插件, 这里用其切取前四个字符表示年份
    {dataIndex: 'startTime', title: '开始时间', filter: Slice(0, 4), buttonFilters: true}
];

表格API

|名称|说明|类型|默认值| |-|-|-|-| |keyword|搜索关键字, 用于外部控制时|string|null| |hlKeyword|是否高亮显示搜索关键字|string|true| |search|指定搜索的列|Array<string>|null| |autoFilterLabelWidth|是否自动设置Label宽度|Boolean|undefined|

列API

|名称|说明|类型|默认值| |-|-|-|-| |filter|设置筛选器|false, FilterPlugin对象, map|false| |hidden|设置是否显示|Boolean|false| |buttonFilters|设置按钮式筛选器, 可能的值: true,lableObj (见附1)|Boolean|false| | lock | 是否对单元格使用LockBox | 见LockBox | "auto" |

附1:

// buttonFilters = labelConfig;
// 设置相关属性可以指定不同的显示名称, 设置自定义样式
labelConfig: {
    label: 'xxx',
    style: {...}
}

附2:

以上未例出的API同 Ant.Table.