具有固定或可滚动标题和列的数据网格组件。

数据表的布局如下:

+---------------------------------------------------+
| Fixed Column Group | Scrollable Column Group |
| Header | Header |
| | |
+---------------------------------------------------+
| | |
| Fixed Header Columns | Scrollable Header Columns |
| | |
+-----------------------+---------------------------+
| | |
| Fixed Body Columns | Scrollable Body Columns |
| | |
+-----------------------+---------------------------+
| | |
| Fixed Footer Columns | Scrollable Footer Columns |
| | |
+-----------------------+---------------------------+
  • 固定列组标题:这些是一组列的标题(如果包含在表中,则不能垂直或水平滚动)。
  • 可滚动的列组标题:一组列的标题,这些列在垂直滚动时不会移动,但在水平滚动时会水平移动。
  • 固定的标题栏:垂直或水平滚动时不会移动的标题栏。
  • 可滚动的标题栏:垂直滚动时不会移动,但随着水平滚动而水平移动的标题栏。
  • 固定的主体列:水平滚动时不会移动,但随着垂直滚动会垂直移动的主体列。
  • 可滚动的正文列:垂直或水平滚动时移动的正文列。

属性#

width 宽度(需要)#

表格的像素宽度。如果不能适应所有列,则会出现水平滚动条。

类型: number

height 高度#

表格的像素高度。如果不能适应所有行,则会出现一个垂直滚动条。

无论是heightmaxHeight必须指定一个。

类型: number

className 类名#

要传递到父容器的类名

类型: string

maxHeight 最大高度#

表格的最大像素高度。如果不能适应所有行,则会出现一个垂直滚动条。

无论是heightmaxHeight必须指定一个。

类型: 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(通过传递scrollbarXscrollbarY属性)。

类型: 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元素可以预期收到以下属性:

props: {
rowIndex; number // (the row index)
height: number // (supplied from subRowHeight or subRowHeightGetter)
width: number // (supplied from the Table)
}

因为您要传递自己的React元素,所以可以随意传递您可能需要的任何属性。

如果传递函数,您将收到与第一个参数相同的props对象。

类型: union(element|func)

rowClassNameGetter#

要获取应添加到行中的任何其他CSS类,将被 rowClassNameGetter(index)调用。

类型: `func

rowKeyGetter#

如果指定,rowKeyGetter(index)则为每一行调用,返回值将覆盖key特定行。

类型: func

groupHeaderHeight#

表头组的像素高度。

类型: number

headerHeight (需要)#

表头的像素高度。

类型: number

cellGroupWrapperHeight#

fixedDataTableCellGroupLayout / cellGroupWrapper的像素高度。默认值为headerHeightgroupHeaderHeight

可以与CSS一起使用,以使表头单元格跨组和常规表头行。将此值设置为大于height的值将导致内容溢出高度。当将第二个表添加为组标题并在列不属于组的一部分时垂直合并2个标题时,这很有用。以下是必要的CSS更改:

两个标题:

  • cellGroupWrapper需要overflow-x: hiddenpointer-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,则为必需。

function(
newColumnWidth: number,
columnKey: string,
)

类型: func

onColumnReorderEndCallback#

重新排序完成且列需要更新时调用的回调。

function(
event {
columnBefore: string|undefined, // the column before the new location of this one
columnAfter: string|undefined, // the column after the new location of this one
reorderColumn: string, // the column key that was just reordered
}
)

类型: func

isColumnResizing#

当前是否正在调整列的大小。

类型: bool

isColumnReordering#

列当前是否正在重新排序。

类型: bool

isRTL#

网格是否应处于RTL模式

类型: bool

bufferRowCount#

要渲染的视口外部的行数。默认为可见行数的大约一半。

类型: number

gridAttributesGetter#

回调返回html属性的对象以添加到grid元素

类型: func