BaseTable

React table component

Props

classPrefixstringdefaults to'BaseTable'

Prefix for table's inner className

classNamestring

Class name for the table

styleobject

Custom style for the table

childrennode

A collection of Column

columnsarrayOf

Columns for the table

dataarraydefaults to[]

The data for the table

frozenDataarraydefaults to[]

The data be frozen to top, rowIndex is negative and started from -1

rowKeystring | numberdefaults to'id'

The key field of each data item

widthnumberrequired

The width of the table

heightnumber

The height of the table, will be ignored if maxHeight is set

maxHeightnumber

The max height of the table, the table's height will auto change when data changes, will turns to vertical scroll if reaches the max height

rowHeightnumberdefaults to50

The height of each table row, will be only used by frozen rows if estimatedRowHeight is set

estimatedRowHeightnumber | func

Estimated row height, the real height will be measure dynamically according to the content The callback is of the shape of ({ rowData, rowIndex }) => number

headerHeightnumber | arrayOfdefaults to50

The height of the table header, set to 0 to hide the header, could be an array to render multi headers.

footerHeightnumberdefaults to0

The height of the table footer

fixedbooldefaults tofalse

Whether the width of the columns are fixed or flexible

disabledbool

Whether the table is disabled

overlayRendererfunc | element

Custom renderer on top of the table component

emptyRendererfunc | element

Custom renderer when the length of data is 0

footerRendererfunc | element

Custom footer renderer, available only if footerHeight is larger then 0

headerRendererfunc | element

Custom header renderer The renderer receives props { cells, columns, headerIndex }

rowRendererfunc | element

Custom row renderer The renderer receives props { isScrolling, cells, columns, rowData, rowIndex, depth }

headerClassNamestring | func

Class name for the table header, could be a callback to return the class name The callback is of the shape of ({ columns, headerIndex }) => string

rowClassNamestring | func

Class name for the table row, could be a callback to return the class name The callback is of the shape of ({ columns, rowData, rowIndex }) => string

headerPropsobject | func

Extra props applied to header element The handler is of the shape of ({ columns, headerIndex }) object

headerCellPropsobject | func

Extra props applied to header cell element The handler is of the shape of ({ columns, column, columnIndex, headerIndex }) => object

rowPropsobject | func

Extra props applied to row element The handler is of the shape of ({ columns, rowData, rowIndex }) => object

cellPropsobject | func

Extra props applied to row cell element The handler is of the shape of ({ columns, column, columnIndex, rowData, rowIndex }) => object

expandIconPropsobject | func

Extra props applied to ExpandIcon component The handler is of the shape of ({ rowData, rowIndex, depth, expandable, expanded }) => object

expandColumnKeystring

The key for the expand column which render the expand icon if the data is a tree

defaultExpandedRowKeysarrayOfdefaults to[]

Default expanded row keys when initialize the table

expandedRowKeysarrayOf

Controlled expanded row keys

onRowExpandfuncdefaults tonoop

A callback function when expand or collapse a tree node The handler is of the shape of ({ expanded, rowData, rowIndex, rowKey }) => *

onExpandedRowsChangefuncdefaults tonoop

A callback function when the expanded row keys changed The handler is of the shape of (expandedRowKeys) => *

sortByshapedefaults to{}

The sort state for the table, will be ignored if sortState is set

sortStateobject

Multiple columns sort state for the table

example:

{
'column-0': SortOrder.ASC,
'column-1': SortOrder.DESC,
}
onColumnSortfuncdefaults tonoop

A callback function for the header cell click event The handler is of the shape of ({ column, key, order }) => *

onColumnResizefuncdefaults tonoop

A callback function when resizing the column width The handler is of the shape of ({ column, width }) => *

onColumnResizeEndfuncdefaults tonoop

A callback function when resizing the column width ends The handler is of the shape of ({ column, width }) => *

useIsScrollingbooldefaults tofalse

Adds an additional isScrolling parameter to the row renderer. This parameter can be used to show a placeholder row while scrolling.

overscanRowCountnumberdefaults to1

Number of rows to render above/below the visible bounds of the list

getScrollbarSizefuncdefaults todefaultGetScrollbarSize

Custom scrollbar size measurement

onScrollfuncdefaults tonoop

A callback function when scrolling the table The handler is of the shape of ({ scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested }) => *

scrollLeft and scrollTop are numbers.

horizontalDirection and verticalDirection are either forward or backward.

scrollUpdateWasRequested is a boolean. This value is true if the scroll was caused by scrollTo*, and false if it was the result of a user interaction in the browser.

onEndReachedfunc

A callback function when scrolling the table within onEndReachedThreshold of the bottom The handler is of the shape of ({ distanceFromEnd }) => *

onEndReachedThresholdnumberdefaults to500

Threshold in pixels for calling onEndReached.

onRowsRenderedfuncdefaults tonoop

A callback function with information about the slice of rows that were just rendered The handler is of the shape of ({ overscanStartIndex, overscanStopIndex, startIndex, stopIndex }) => *

onScrollbarPresenceChangefuncdefaults tonoop

A callback function when the scrollbar presence state changed The handler is of the shape of ({ size, vertical, horizontal }) => *

rowEventHandlersobject

A object for the row event handlers Each of the keys is row event name, like onClick, onDoubleClick and etc. Each of the handlers is of the shape of ({ rowData, rowIndex, rowKey, event }) => *

ignoreFunctionInColumnComparebooldefaults totrue

whether to ignore function properties while comparing column definition

componentsshape

A object for the custom components, like ExpandIcon and SortIndicator

Methods

getDOMNode()

Get the DOM node of the table

getColumnManager()

Get the column manager

getExpandedRowKeys()

Get internal expandedRowKeys state

getExpandedState()

Get the expanded state, fallback to normal state if not expandable.

getTotalRowsHeight()

Get the total height of all rows, including expanded rows.

getTotalColumnsWidth()

Get the total width of all columns.

forceUpdateTable()

Forcefully re-render the inner Grid component.

Calling forceUpdate on Table may not re-render the inner Grid since it uses shallowCompare as a performance optimization. Use this method if you want to manually trigger a re-render. This may be appropriate if the underlying row data has changed but the row sizes themselves have not.

resetAfterRowIndex(rowIndex: number, shouldForceUpdate: boolean)

Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)

resetRowHeightCache()

Reset row height cache, useful if data changed entirely, should be used only in dynamic mode(estimatedRowHeight is provided)

scrollToPosition(offset: object)

Scroll to the specified offset. Useful for animating position changes.

scrollToTop(scrollTop: number)

Scroll to the specified offset vertically.

scrollToLeft(scrollLeft: number)

Scroll to the specified offset horizontally.

scrollToRow(rowIndex: number, align: string)

Scroll to the specified row. By default, the table will scroll as little as possible to ensure the row is visible. You can control the alignment of the row though by specifying an align property. Acceptable values are:

  • auto (default) - Scroll as little as possible to ensure the row is visible.
  • smart - Same as auto if it is less than one viewport away, or it's the same ascenter.
  • center - Center align the row within the table.
  • end - Align the row to the bottom side of the table.
  • start - Align the row to the top side of the table.
setExpandedRowKeys(expandedRowKeys: array)

Set expandedRowKeys manually. This method is available only if expandedRowKeys is uncontrolled.