BOSS、PRINT、PROCESS、FORM 代码仓库

features

• 分页
• 拖拽调整列宽
• 表头排序
• 表头筛选
• 行选择
• ......

使用

// 安装
npm i fydatagrid -S

// 查看demo
npm start

<DataGrid
  dataSource={dataSource}
  rowKey="id"
  columns={columns}
  pagination={false}
  // 必须指定宽高，也可以指定maxWidth或maxHeight
  style={{
    width: "100%",
    height: 300
  }}
/>

API

• 参数参考了ant design Table的设计
• 具体示例请查看demo

参数	类型	说明	默认值
columns	Column	列配置
dataSource	Array	数组数据
defaultFilter	{ [ key in string ]: any }	默认过滤参数 ｜
defaultSort	{ [ key in string ]: 'ASC' ｜ 'DESC' }	默认排序参数
filter	{ [ key in string ]: any }	过滤参数 ｜
loading	boolean	加载中状态	false
onFilterChange	(filter: ColumnItem['filter']) => void	过滤条件发生变化时的回调函数
onSortChange	(sort: ColumnItem['sort']) => void	排序条件变化时的回调函数
pagination	Pagination	使用了ant design的分页组件
rowKey	string ｜ (record, index) => string	表格行 key 的取值
rowSelection
sort	{ [ key in string ]: 'ASC' ｜ 'DESC' }	排序参数
frontend	boolean	前端模式（开启后组件会自动实现分页、筛选、排序）	false

Column

参数	类型	说明	默认值
dataIndex	string	列显示数据的字段名
defaultSortOrder	'ASC' ｜ 'DESC'	默认的排序
filterAct	'modal' ｜ 'dropdown' ｜ 'customize'	点击筛选后筛选组件交互方式
filterCallback	(value: any, filter: any) => any[]	filterMode为callback时调用的筛选函数
filterConfig	FilterConfig
filterMode	'eq' ｜ 'like' ｜ 'contain' ｜ 'between' ｜ 'callback'	筛选时匹配的方式
filterRender	() => ReactNode	filterType为customize时渲染的筛选组件
filterType	'input' ｜ 'checkboxList' ｜ 'dateRange' ｜ 'dateTimeRange' ｜ 'customize'	筛选组件类型
fixed	'left' ｜ 'right' ｜ boolean	固定列	false
render	function(field, record, index)	渲染函数
title	ReactNode	标题
width	number	初始宽度
sorter	boolean ｜ Function	排序函数，后端排序时可以设置为true
sortDirections	Array<'ASC' ｜ 'DESC'>	点击排序时排序切换的顺序	['ASC', 'DESC']

FilterConfig

参数	类型	说明	默认值
filterKey	string	指定筛选时的字段名称（如‘name.firstName’）	Column['key'] ｜ Column['dataIndex']
onClick	(e) => void	点击筛选图标时的回调函数
options	Array<{label: string; value: any;}>	filterType为checkboxList时筛选组件展示的列表
placeholder	string	filterType为input时的placeholder

RowSelection

参数	类型	说明	默认值
selectedRowKeys	Array	指定哪些列被选中
defaultSelectedRowKeys	Array	指定哪些列默认被选中
type	'checkbox' ｜ 'radio'	单选/多选
onChange	(selectedRowKeys: RowSelection['selectedRowKeys'], selectedRows: any[]) => void	行选择变化时的回调函数
onSelect	(record: any, selected: boolean, selectedRows: any[], nativeEvent) => void	手动选择/取消选择某行的回调
onSelectAll	(selected: boolean, selectedRows: any[]) => void	手动选择/取消选择所有行的回调