表
具有固定或可滚动标题和列的数据网格组件。
数据表的布局如下:
- 固定列组标题:这些是一组列的标题(如果包含在表中,则不能垂直或水平滚动)。
- 可滚动的列组标题:一组列的标题,这些列在垂直滚动时不会移动,但在水平滚动时会水平移动。
- 固定的标题栏:垂直或水平滚动时不会移动的标题栏。
- 可滚动的标题栏:垂直滚动时不会移动,但随着水平滚动而水平移动的标题栏。
- 固定的主体列:水平滚动时不会移动,但随着垂直滚动会垂直移动的主体列。
- 可滚动的正文列:垂直或水平滚动时移动的正文列。
#
属性#
width 宽度(需要)表格的像素宽度。如果不能适应所有列,则会出现水平滚动条。
类型: number
#
height 高度表格的像素高度。如果不能适应所有行,则会出现一个垂直滚动条。
无论是height
或maxHeight
必须指定一个。
类型: number
#
className 类名要传递到父容器的类名
类型: string
#
maxHeight 最大高度表格的最大像素高度。如果不能适应所有行,则会出现一个垂直滚动条。
无论是height
或maxHeight
必须指定一个。
类型: number
#
ownerHeight 自身高度表格所有者的像素高度,当您要从折页下方向上滑动表格而不必在每个滚动刻度上不断更新高度时,将其用于托管滚动情况。而是在滚动上更改此属性。通过使用ownerHeight,我们可以过度渲染表格,同时确保当视图中表格的当前空间小于表格的最终溢出高度时,表格的表尾和水平滚动条可见。它允许我们避免在视图中移动表时调整表的大小和重排表的大小。
如果ownerHeight < height
(或maxHeight
),则使用它。
类型: number
#
overflowX类型: enum('hidden'|'auto')
#
overflowY类型: enum('hidden'|'auto')
#
touchScrollEnabled应当启用指示触摸滚动的布尔标志。此功能是beta版的最新功能,可能有错误
类型:bool
默认值:false
#
keyboardScrollEnabled布尔标志,用于控制是否启用按键滚动
类型:bool
默认值:false
#
keyboardPageEnabled类型:bool
默认值:false
#
scrollbarX要呈现的滚动条X
类型: node
#
scrollbarXHeight要为滚动条X保留的高度
类型: number
#
scrollbarY要呈现的滚动条Y
类型: node
#
scrollbarYWidth要为滚动条Y保留的宽度
类型: number
#
onScrollBarsUpdate侦听滚动条相关更新的功能,例如滚动位置,可见行高,所有行高,...。
类型: func
#
defaultScrollbars将呈现FDT-2提供的默认滚动条,如果要呈现自定义滚动条,则传递false
(通过传递scrollbarX
和scrollbarY
属性)。
类型: bool
#
showScrollbarX是否显示X轴滚动条(滚动功能依然有效)
类型: bool
是否显示Y轴滚动条(滚动功能依然有效)
#
showScrollbarY类型: bool
#
onHorizontalScroll水平滚动网格时的回调。
返回false
停止传播。
类型: func
#
onVerticalScroll垂直滚动网格时的回调。
返回false
停止传播。
类型: func
#
rowsCount (需要)表中的行数。
类型: number
#
rowHeight (需要)除非rowHeightGetter
指定行的像素高度,否则返回不同的值。
类型: number
#
rowHeightGetter如果指定,rowHeightGetter(index)
则为每行调用一次,并且返回值将覆盖rowHeight
特定行。
类型: func
#
subRowHeight除非subRowHeightGetter
指定子行的像素高度,否则返回不同的值。默认为0
,不显示任何子行。
类型: number
#
subRowHeightGetter如果指定,subRowHeightGetter(index)
则为每行调用一次,并且返回值将覆盖subRowHeight
特定行。
类型: func
#
rowExpanded该行扩展为表格行。这可以是React
元素,也可以是生成React
元素的函数。默认情况下,传入的React
元素可以预期收到以下属性:
因为您要传递自己的React
元素,所以可以随意传递您可能需要的任何属性。
如果传递函数,您将收到与第一个参数相同的props
对象。
类型: union(element|func)
#
rowClassNameGetter要获取应添加到行中的任何其他CSS类,将被 rowClassNameGetter(index)
调用。
类型: `func
#
rowKeyGetter如果指定,rowKeyGetter(index)
则为每一行调用,返回值将覆盖key
特定行。
类型: func
#
groupHeaderHeight表头组的像素高度。
类型: number
#
headerHeight (需要)表头的像素高度。
类型: number
#
cellGroupWrapperHeightfixedDataTableCellGroupLayout
/ cellGroupWrapper
的像素高度。默认值为headerHeight
和groupHeaderHeight
。
可以与CSS一起使用,以使表头单元格跨组和常规表头行。将此值设置为大于height的值将导致内容溢出高度。当将第二个表添加为组标题并在列不属于组的一部分时垂直合并2个标题时,这很有用。以下是必要的CSS更改:
两个标题:
cellGroupWrapper
需要overflow-x: hidden
和pointer-events: none
cellGroup
需要pointer-events: auto
在子组标题上重新启用它们Layout/main
需要overflow: visible
和更高的z-index
CellLayout/main
需要overflow-y: visible
cellGroup
需要overflow: visible
类型: number
#
footerHeight表尾的像素高度。
类型: number
#
scrollLeft水平滚动的值。
类型: number
#
scrollToColumn滚动到的列索引。
类型: number
#
scrollTop垂直滚动的值。
类型: number
#
scrollToRow要滚动到的行的索引。
类型: number
#
onScrollStart滚动开始时调用的回调。当前的水平和垂直滚动值以及当前的第一行和最后一行索引将提供给回调。
类型: func
#
onScrollEnd滚动结束时调用的回调。新的水平和垂直滚动值以及新的第一行和最后一行索引将提供给回调。
类型: func
#
stopReactWheelPropagation如果启用,滚动事件将不会传播到表的外部。
类型: bool
#
stopScrollDefaultHandling如果启用,滚动事件将永远不会冒泡到浏览器默认处理程序。如果禁用(未指定时为默认值),则如果滚动不导致滚动偏移量发生变化,则滚动事件将冒泡,如果您希望页面/容器在表格已最大向上滚动时向上滚动,则滚动事件会更好。
类型: bool
#
stopScrollPropagation如果启用,滚动事件将不会传播到表的外部。
类型:bool
默认值:false
#
onContentHeightChange当回调rowHeightGetter
返回的行高度与rowHeightprop
不同时调用。这是必需的,因为最初表格会估算内容中某些部分的高度。
类型: func
#
onRowClick单击某行时调用的回调。
类型: func
#
onRowContextMenu当上下文菜单事件连续发生时调用的回调。
类型: func
#
onRowDoubleClick双击某行时调用的回调。
类型: func
#
onRowMouseDown连续发生鼠标按下事件时调用的回调。
类型: func
#
onRowMouseUp当连续发生鼠标上移事件时调用的回调。
类型: func
#
onRowMouseEnter连续发生鼠标输入事件时调用的回调。
类型: func
#
onRowMouseLeave连续发生鼠标离开事件时调用的回调。
类型: func
#
onRowTouchStart连续发生触摸启动事件时调用的回调。
类型: func
#
onRowTouchEnd连续发生触摸结束事件时调用的回调。
类型: func
#
onRowTouchMove连续发生触摸移动事件时调用的回调。
类型: func
#
onColumnResizeEndCallback释放大小调整器并且需要更新列时调用的回调。
如果isResizable
属性在任何列上为true
,则为必需。
类型: func
#
onColumnReorderEndCallback重新排序完成且列需要更新时调用的回调。
类型: func
#
isColumnResizing当前是否正在调整列的大小。
类型: bool
#
isColumnReordering列当前是否正在重新排序。
类型: bool
#
isRTL网格是否应处于RTL模式
类型: bool
#
bufferRowCount要渲染的视口外部的行数。默认为可见行数的大约一半。
类型: number
#
gridAttributesGetter回调返回html
属性的对象以添加到grid
元素
类型: func