react-customize-data-table

A React table component designed to display large data with high performance.

Features

🚀 高性能: 数据量较大时可以开启虚拟滚动
🎨 定制: 简单灵活的 API，丰富的定制能力
💎 实用表格特性: 支持排序、搜索、分页、固定表头、左侧/右侧锁列、自定义操作等复杂功能

Example

http://localhost:8000

online example: https://haianweifeng.github.io/react-customize-data-table

Install

npm i react-customize-data-table

Development

Install dependencies,

$ npm i

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Run test,

$ npm test

Build library via father,

$ npm run compile

Usage

import Table from 'react-customize-data-table';

ReactDOM.render(<Table />, container);

API

Table

属性	说明	类型	默认值
className	表格的样式类名	string	-
style	表格的行内样式	React.CSSProperties	-
dataSource	表格展示的数据源	object[]	-
columns	表格列的配置	`ColumnsType<T>`	-
rowKey	表格行 key 默认取值 key	string \| ((row: T) => string \| number)	`key`
striped	是否显示交错斑马底纹	boolean	false
bordered	是否展示外边框和列边框	boolean	false
loading	页面是否加载中	`boolean` \| `React.ReactNode`	false
showHeader	是否显示表头	boolean	true
size	表格大小	`default` \| `small` \| `large`	default
rowClassName	表格行的类名	(record: T, index: number) => string	-
rowStyle	表格行的 style	((record: T, index: number) => React.CSSProperties) \| React.CSSProperties	-
cellClassName	表体单元格的类名	((column: `ColumnType<T>`, rowIndex: number, colIndex: number) => string) \| string	-
cellStyle	表体单元格的 style	((column: `ColumnType<T>`, rowIndex: number, colIndex: number) => React.CSSProperties) \| React.CSSProperties	-
headerCellClassName	表头单元格的类名	((column: `ColumnType<T>` \| `ColumnGroupType<T>`, rowIndex: number, colIndex: number) => string) \| string	-
headerCellStyle	表头单元格的 style	((column: `ColumnType<T>` \| `ColumnGroupType<T>`, rowIndex: number, colIndex: number) => React.CSSProperties) \| React.CSSProperties	-
headerRowClassName	表头行的类名	((rowIndex: number) => string) \| string	-
headerRowStyle	表头行的 style	((rowIndex: number) => React.CSSProperties) \| React.CSSProperties	-
onHeaderRowEvents	设置表头行事件	(rowIndex: number) => object	-
onHeaderCellEvents	设置表头行单元格事件	(column: `ColumnType<T>` \| `ColumnGroupType<T>`, rowIndex: number) => object	-
onRowEvents	设置表体行事件	(record: T, rowIndex: number) => object	-
onCellEvents	设置表体单元格事件	(record: T, rowIndex: number) => object	-
pagination	分页	PaginationProps	-
empty	空数据文案	string \| React.ReactNode	-
locale	默认文案设置	LocalType	-
rowHeight	单行表格的预期高度	number	-
renderMaxRows	单次 render 的最大行数	number	-
width	表格宽度	number	-
height	表格高度，默认为自动高度，如果表格内容大于此值，会固定表头	number	-
virtualized	是否开启虚拟列表	boolean	-
onScroll	监听滚动回调函数	(x: number, y: number) => void	-
onColumnResize	列宽伸缩后的回调	(newWidth: number, oldWidth: number, column: `ColumnType<T>`, event: Event) => void	-
rowSelection	表格行是否可选择, 配置项	object	-
onSort	排序事件	(sortResult: { column: `ColumnType<T>`, order: `asc` \| `desc` \| `null`, field: string \| undefined }) => void	-
onFilter	筛选事件	(filterInfo: Record<React.Key, React.Key[]>) => void	-
expandable	配置展开属性, 配置项	object	-
treeProps	配置树形数据属性, 配置项	object	-
summary	渲染底部信息	{ render: () => React.ReactNode; colSpan?: number; rowSpan?: number }[][]	-

Column

列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

参数	说明	类型	默认值
type	设置列的类型	`expand` \| `checkbox` \| `radio` \| `default`	`default`
align	设置列的对齐方式	`left` \| `center` \| `right`	`left`
className	列样式类名	string	-
dataIndex	列对应字段名	string	-
key	React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性	string	-
fixed	列固定如果相邻的多列需要锁定，只需指定最外侧的 column 即可，需要配合横向滚动才生效	`left` \| `right`	-
render	生成复杂数据的渲染函数	(text: any, record: T, index: number) => React.ReactNode	-
title	列头显示文字	React.ReactNode	-
width	列宽度	number \| string	-
maxWidth	最大列宽	number \| string	-
minWidth	最小列宽	number \| string	-
ellipsis	超过宽度将自动省略	boolean \| { tooltip: boolean; tooltipTheme?: `dark` \| `light`; renderTooltip?: (trigger: React.ReactNode, tip: React.ReactNode) => React.ReactNode;}	-
colSpan	表头列合并, 设置为 0 时，不渲染	number	-
resizable	是否允许拖拽调整宽度需开启 border 属性，对于多级表头只支持最后一级表头拖拽调整宽度	boolean	-
onCell	设置单元格属性	(record: T, rowIndex: number) => { colSpan?: number; rowSpan?: number }	-
defaultSortOrder	默认排序	`asc` \| `desc`	-
sortOrder	排序的受控属性,外界可用此控制列的排序	`asc` \| `desc` \| null	-
sorter	排序函数	((rowA: T, rowB: T) => number) \| { compare: (rowA: T, rowB: T) => number; weight: number; }	-
renderSorter	自定义排序图标	(params: { activeAsc: boolean; activeDesc: boolean; triggerAsc: (event: React.MouseEvent) => void; triggerDesc: (event: React.MouseEvent) => void; }) => React.ReactNode	-
defaultFilteredValue	默认筛选值	React.Key[]	-
filteredValue	筛选的受控属性	React.Key[]	-
filterMultiple	筛选是否多选	boolean	-
filterIcon	自定义 filter 图标	(filtered: boolean) => React.ReactNode	-
filterSearch	筛选菜单项是否可搜索	((value: string, record: FilterMenus) => boolean) \| boolean	-
filters	表头的筛选菜单项	{ label: string; value: string }[]	-
filterMethod	筛选函数	(value: React.Key, record: T) => boolean	-

ColumnGroup

参照列的配置，但是忽略dataIndex和type 属性，增加children属性, children 就是列配置属性的集合。

expandable

展开功能的配置。

参数	说明	类型	默认值
columnTitle	自定义展开列表头	React.ReactNode	-
columnWidth	自定义展开列宽度	string \| number	-
expandedRowRender	渲染展开行的内容	(record: T, index: number, expanded: boolean) => React.ReactNode	-
expandedRowClassName	展开行的 className	(record: T, index: number) => string	-
rowExpandable	设置是否允许行展开	(record: T) => boolean	-
defaultExpandAllRows	初始时，是否展开所有行	boolean	false
defaultExpandedRowKeys	默认展开的行	string[] \| number[]	-
expandedRowKeys	展开的行，控制属性	string[] \| number[]	-
expandIcon	自定义展开图标	(record: T, expanded: boolean, onExpand?: (expanded: boolean, record: T) => void) => React.ReactNode	-
onExpand	点击展开图标时触发	(expanded: boolean, record: T) => void	-

TreeExpandable

树形功能的配置。

参数	说明	类型	默认值
indentSize	树形数据每层的缩进	number	15
treeColumnsName	展开图标所在列名	string	-
defaultExpandAllRows	初始时，是否展开所有行	boolean	false
defaultExpandedRowKeys	默认展开的行	string[] \| number[]	-
expandedRowKeys	展开的行，控制属性	string[] \| number[]	-
expandIcon	自定义展开图标	(record: T, expanded: boolean, onExpand?: (expanded: boolean, record: T) => void) => React.ReactNode	-
onExpand	点击展开图标时触发	(expanded: boolean, record: T) => void	-

rowSelection

选择功能的配置。

参数	说明	类型	默认值
columnTitle	自定义列表选择框标题	React.ReactNode	-
columnWidth	自定义列表选择框宽度	string \| number	`44px`
getCheckboxProps	选择框的默认属性配置	(record: T) => any	-
renderCell	渲染表体的勾选框	(checked: boolean, record: T, index: number, originNode: React.ReactNode) => React.ReactNode	-
selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合	string[] \| number[]	-
defaultSelectedRowKeys	默认选中项的 key 数组	string[] \| number[]	-
type	多选/单选	`checkbox` \| `radio`	`checkbox`
onChange	选中项发生变化时的回调	(selectedRowKeys: (string \| number)[], selectedRows: T[]) => void	-
onSelect	用户手动选择/取消选择某行的回调	(record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void	-
onSelectAll	用户手动选择/取消选择所有行的回调	(selected: boolean, selectedRows: T[], changeRows: T[]) => void	-

LocalType

文案设置。

参数	说明	类型	默认值
filterSearchPlaceholder	筛选搜索框提示语	string	'在筛选项中搜索'
filterEmptyText	无筛选菜单时提示文案	string	'无筛选项'
filterResult	过滤搜索结果	string	'未发现'
filterConfirm	过滤确定按钮	string	'筛选'
filterReset	过滤重置按钮	string	'重置'

haianweifeng / react-customize-data-table Goto Github PK

react-customize-data-table's Introduction

react-customize-data-table

Features

Example

Install

Development

Usage

API

Table

Column

ColumnGroup

expandable

TreeExpandable

rowSelection

LocalType

react-customize-data-table's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org