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.

Props

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:

• cellGroupWrapper needs overflow-x: hidden and pointer-events: none
• cellGroup needs pointer-events: auto to reenable them on child els Group header:
• Layout/main needs overflow: visible and a higher z-index
• CellLayout/main needs overflow-y: visible
• cellGroup needs overflow: visible

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