@beisen-phoenix/table NPM

API

Table

参数	说明	类型	默认值	是否必传	备注
className	扩展className	`string`	`phoenix-table`	否
bordered	是否显示外边框	`boolean`	false	否
columnHighlight	单击列，整列高亮效果	`boolean`	true	否
rowsInView	单次render的最大行数	`number`	0	否	单次render的最大行数。Table 采用了lazy render的方式来优化在大量数据下的性能，如果你的表格显示的高度超出了20条，可以调整rowsInView的值。为0表示禁用懒加载。
rowKey	生成每一项key的辅助方法	`function(obj) 或 string`	true	0	否	为 true 时，以数据项本身作为key，相当于 (d => d)；为函数时，使用此函数返回值；为string时，使用这个string对应的数据值。如 'id'，相当于 (d => d.id)。
hover	是否数据行鼠标悬浮高亮效果	`boolean`	true	否
size	尺寸(作用于行高)，可填值 'large', 'middle', 'small'	`string`	'middle'	否
striped	是否显示交错斑马底纹	`string 或 ReactNode`	false	否
useContainerScroll	是否使用容器的滚动条	`boolean`	false	否	开启后，头部不会锁定
height	表格高度	`number`	-	否	开启后，头部不会锁定
loading	数据加载中，为true时会展示一个默认的小菊花组件，可以传入一个自定义的Spin代替	`bool 或 ReactNode`	false	否
loadingView	自定义的Loaidng组件	`ReactNode`	false	否	可以通过传递给loadiView一个自定义组件覆盖默认的空视图
emptyView	空数据效果	`ReactNode`	无	否	可以通过传递给emptyView一个自定义组件覆盖默认的空视图
enableWheelScroll	是否启用touch滚动	`boolean`	true	否	默认支持滚动条以及touch滚动，可禁用touch滚动
columns	数组，见Column	`Column[]`	-	是
columnResizable	列宽是否可拖拽宽度，默认为true，如果想禁用某列拖拽宽度，可以给单独列设置columnResizable	`boolean`	true	否
columnDefaultWidth	默认列宽的宽度，仅在未设置列宽的场景下生效。默认为140，如果认为140过大，可以自定义设置，但是为了体验，建议不小于56.	`boolean`	140	否	强烈建议此值设置不小于56
sorter	表格统一排序函数，参数分别为 Column.sorter 和排序方式	`func`	无	否	强烈建议此值设置不小于56
fit	是否启用列宽自适应	`boolean`	true	否	当为true，会自适应宽度; 为false,会可以单独设置宽度，并且不随浏览器窗口大小改变调整
ellipsis	内容超过单元格宽度是否显示...,默认为false，也就是会换行	`boolean`	false	否	强烈建议不要设置为true，会导致性能问题(数据量过大)
fixed	滚动条显示设置，可填值 'both', 'x', 'y'	`string`	'both'	否	如果确定不会出现x轴滚动条，可以设置为 y,其他情况类似，无特殊需求，不建议调整
expandKeys	展开的行的key数组	`array`	[]	否
expandedRowRender	展开的行内容	`function`	无	否	如果是可展开，此项是必填
dataSource	数据源	`object[]`	无	是
pagination	分页配置，参考下面pagination	`object`	pagination: { current: 1, pageSize: 15, },	是
settingPanel	表格设置，参考下面settingPanel	`object`	pagination: { current: 1, pageSize: 15, },	是
rowSelection	表格选中设置，参考下面rowSelection	`object`	{}	否

pagination

参数	说明	类型	默认值	是否必传
current	当前页数	`number`	1	是
total	总数	`number`	-	是
pageSize	每页显示条数	`number`	15	是
capacityOptions	显示条数配置	`number[]`	15, 30, 60, 100	否
showSelectCount	底部是否显示'已选中N条'文本	`boolean`	true	否
showSelectAllPageCheckbox	底部是否显示跨页全选	`boolean`	false	否
selectAllPageCheckbox	底部跨页全选是否选中	`boolean`	false	否
onChange	当前页数、每页显示条数发生变化回调时间	`function`	-	否

其他参考pagination组件

rowSelection

参数	说明	类型	默认值	是否必传
type	多选或者单选, 可选值 'multiple', 'single'	`string`	无	是
disabledAllCheckbox	禁用头部全选复选框	`boolean`	-	否
selectedRowKeys	默认选中项，根据rowKey进行匹配	`string[]`	[]	是
onChange	选中项发生变化回调时间	`function`	无	否

columns

参数	说明	类型	默认值	是否必传	备注
align	单元格内容排布方式，可选 'left', 'center', 'right'	`string`	'left'	否
fixed	锁定列，可选'left', 'right'，	`string`	-	否	如果相邻的多列需要锁定，只需指定最外侧的column即可
key	列的key，默认使用index	`string \| number`	-	否
render	表格内容生成函数；	`function`	无	否	d: 当前行数据i: 当前行索引为了使用方便，可以传入一个数据的key，如 'id'，相当于 (d) => { return d.id }
dataIndex	列数据在数据项中对应的 key	`string`	-	是
title	列头显示文字	`string \| ReactNode`	-	否
width	列宽	`number`	140	否

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 @beisen/table-drill @beisen-cmps/isv-table @beisen-phoenix/lookup @beisen/ocean-dateset-permission @beisen-platform/ux-standard-table

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago