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

showScrollbarX

Hide the scrollbar but still enable scroll functionality

type: bool defaultValue: true

showScrollbarY

type: bool defaultValue: true

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 the Table or rowHeightGetter) 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 defaultValue: 0

headerHeight (required)

Pixel height of header.

type: number defaultValue: 0

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 defaultValue: 0

scrollLeft

Value of horizontal scroll.

type: number

scrollToColumn

Index of column to scroll to.

type: number

scrollTop

Value of vertical scroll.

type: number

scrollToRow

Index of row to scroll to.

type: number

onScrollStart

Callback that is called when scrolling starts with current horizontal and vertical scroll values.

type: func

onScrollEnd

Callback that is called when scrolling ends or stops with new horizontal and vertical scroll values.

type: func

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

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

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

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

isColumnResizing

Whether a column is currently being resized.

type: bool

isColumnReordering

Whether columns are currently being reordered.

type: bool

bufferRowCount

The number of rows outside the viewport to prerender. Defaults to roughly half of the number of visible rows.

type: number