Table
(component)Data grid component with fixed or scrollable header and columns.
The layout of the data table is as follows:
+---------------------------------------------------+
| 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 |
| | |
+-----------------------+---------------------------+
Fixed Column Group Header: These are the headers for a group of columns if included in the table that do not scroll vertically or horizontally.
Scrollable Column Group Header: The header for a group of columns that do not move while scrolling vertically, but move horizontally with the horizontal scrolling.
Fixed Header Columns: The header columns that do not move while scrolling vertically or horizontally.
Scrollable Header Columns: The header columns that do not move while scrolling vertically, but move horizontally with the horizontal scrolling.
Fixed Body Columns: The body columns that do not move while scrolling horizontally, but move vertically with the vertical scrolling.
Scrollable Body Columns: The body columns that move while scrolling vertically or horizontally.
width
(required)Pixel width of table. If all columns do not fit, a horizontal scrollbar will appear.
type: number
height
Pixel height of table. If all rows do not fit, a vertical scrollbar will appear.
Either height
or maxHeight
must be specified.
type: number
className
Class name to be passed into parent container
type: string
maxHeight
Maximum pixel height of table. If all rows do not fit, a vertical scrollbar will appear.
Either height
or maxHeight
must be specified.
type: number
ownerHeight
Pixel height of table's owner, this is used in a managed scrolling
situation when you want to slide the table up from below the fold
without having to constantly update the height on every scroll tick.
Instead, vary this property on scroll. By using ownerHeight
, we
over-render the table while making sure the footer and horizontal
scrollbar of the table are visible when the current space for the table
in view is smaller than the final, over-flowing height of table. It
allows us to avoid resizing and reflowing table when it is moving in the
view.
This is used if ownerHeight < height
(or maxHeight
).
type: number
overflowX
type: enum('hidden'|'auto')
overflowY
type: enum('hidden'|'auto')
touchScrollEnabled
Boolean flag indicating of touch scrolling should be enabled This feature is current in beta and may have bugs
type: bool
defaultValue: false
keyboardScrollEnabled
Boolean flags to control if scrolling with keys is enabled
type: bool
defaultValue: false
keyboardPageEnabled
type: bool
defaultValue: false
scrollbarX
Scrollbar X to be rendered
type: node
scrollbarXHeight
Height to be reserved for scrollbar X
type: number
scrollbarY
Scrollbar Y to be rendered
type: node
scrollbarYWidth
Width to be reserved for scrollbar Y
type: number
onScrollBarsUpdate
Function to listen to scroll bars related updates like scroll position, visible rows height, all rows height,....
type: func
defaultScrollbars
Default scrollbars provided by FDT-2 will be rendered, pass false if you want to render custom scrollbars (by passing scrollbarX and scrollbarY props)
type: bool
showScrollbarX
Hide the scrollbar but still enable scroll functionality
type: bool
showScrollbarY
type: bool
onHorizontalScroll
Callback when horizontally scrolling the grid.
Return false to stop propagation.
type: func
onVerticalScroll
Callback when vertically scrolling the grid.
Return false to stop propagation.
type: func
rowsCount
(required)Number of rows in the table.
type: number
rowHeight
(required)Pixel height of rows unless rowHeightGetter
is specified and returns
different value.
type: number
rowHeightGetter
If specified, rowHeightGetter(index)
is called for each row and the
returned value overrides rowHeight
for particular row.
type: func
subRowHeight
Pixel height of sub-row unless subRowHeightGetter
is specified and returns
different value. Defaults to 0 and no sub-row being displayed.
type: number
subRowHeightGetter
If specified, subRowHeightGetter(index)
is called for each row and the
returned value overrides subRowHeight
for particular row.
type: func
rowExpanded
The row expanded for table row. This can either be a React element, or a function that generates a React Element. By default, the React element passed in can expect to receive the following props:
props: {
rowIndex; number // (the row index)
height: number // (supplied from subRowHeight or subRowHeightGetter)
width: number // (supplied from the Table)
}
Because you are passing in your own React element, you can feel free to pass in whatever props you may want or need.
If you pass in a function, you will receive the same props object as the first argument.
type: union(element|func)
rowClassNameGetter
To get any additional CSS classes that should be added to a row,
rowClassNameGetter(index)
is called.
type: func
rowKeyGetter
If specified, rowKeyGetter(index)
is called for each row and the
returned value overrides key
for the particular row.
type: func
groupHeaderHeight
Pixel height of the column group header.
type: number
headerHeight
(required)Pixel height of header.
type: number
cellGroupWrapperHeight
Pixel height of fixedDataTableCellGroupLayout/cellGroupWrapper. Default is headerHeight and groupHeaderHeight.
This can be used with CSS to make a header cell span both the group & normal header row. Setting this to a value larger than height will cause the content to overflow the height. This is useful when adding a 2nd table as the group header and vertically merging the 2 headers when a column is not part of a group. Here are the necessary CSS changes:
Both headers:
type: number
footerHeight
Pixel height of footer.
type: number
scrollLeft
Value of horizontal scroll.
type: number
scrollToColumn
Index of column to scroll to.
type: number
scrollTop
Value of vertical scroll.
type: number
isVerticalScrollExact
By default in case of variable rows heights,
when table uses scrollTop
it makes an optimization
in order to not ask for all the rows heights, it uses the cached stored heights,
that are initialized to the constant rowHeight
property.
Those heights are updated with the actual value (requested using rowHeightGetter
)
only when the rows becomes visible.
So when the scrollTop
is incremented step by step, the actual displayed row is exact,
but when the scrollTop
is set to a far position, the actual displayed row is inexact
E.g. : first row height = 30, but the rest of the rows height = 500px,
and the constant rowheight
property = 30,
when scrollTop changes from 0 to 5000, the displayed first row instead of being 11 is 57
By setting isVerticalScrollExact
to true, when trying to scroll to scrollTop
position, the table will consider
the exact row heights, so the offset of the displayed rows will be correct
type: bool
scrollToRow
Index of row to scroll to.
type: number
onScrollStart
Callback that is called when scrolling starts. The current horizontal and vertical scroll values, and the current first and last row indexes will be provided to the callback.
type: func
onScrollEnd
Callback that is called when scrolling ends. The new horizontal and vertical scroll values, and the new first and last row indexes will be provided to the callback.
type: func
stopReactWheelPropagation
If enabled scroll events will not be propagated outside of the table.
type: bool
stopScrollDefaultHandling
If enabled scroll events will never be bubbled to the browser default handler. If disabled (default when unspecified), scroll events will be bubbled up if the scroll doesn't lead to a change in scroll offsets, which is preferable if you like the page/container to scroll up when the table is already scrolled up max.
type: bool
stopScrollPropagation
If enabled scroll events will not be propagated outside of the table.
type: bool
defaultValue: false
onContentHeightChange
Callback that is called when rowHeightGetter
returns a different height
for a row than the rowHeight
prop. This is necessary because initially
table estimates heights of some parts of the content.
type: func
onRowClick
Callback that is called when a row is clicked.
type: func
onRowContextMenu
Callback that is called when a contextual-menu event happens on a row.
type: func
onRowDoubleClick
Callback that is called when a row is double clicked.
type: func
onRowMouseDown
Callback that is called when a mouse-down event happens on a row.
type: func
onRowMouseUp
Callback that is called when a mouse-up event happens on a row.
type: func
onRowMouseEnter
Callback that is called when a mouse-enter event happens on a row.
type: func
onRowMouseLeave
Callback that is called when a mouse-leave event happens on a row.
type: func
onRowTouchStart
Callback that is called when a touch-start event happens on a row.
type: func
onRowTouchEnd
Callback that is called when a touch-end event happens on a row.
type: func
onRowTouchMove
Callback that is called when a touch-move event happens on a row.
type: func
onColumnResizeEndCallback
@deprecated This prop is deprecated in favor of the ResizeCell plugin component. Please refer to the "Resizable columns" example for usage.
Callback that is called when resizer has been released and column needs to be updated.
Required if the isResizable property is true on any column.
function(
newColumnWidth: number,
columnKey: string,
)
type: func
onColumnReorderEndCallback
@deprecated This prop is deprecated in favor of the ReorderCell plugin component. Please refer to the "Reorderable columns" example for usage.
Callback that is called when reordering has been completed and columns need to be updated.
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
}
)
type: func
isRTL
Whether the grid should be in RTL mode
type: bool
bufferRowCount
The number of rows outside the viewport to prerender. Defaults to roughly half of the number of visible rows.
type: number
gridAttributesGetter
Callback that returns an object of html attributes to add to the grid element
type: func
rowAttributesGetter
Callback that returns an object of html attributes to add to each row element.
function(rowIndex: number)
type: func