React table component
Prefix for table's inner className
Class name for the table
Custom style for the table
A collection of Column
Columns for the table
The data for the table
The data be frozen to top, rowIndex
is negative and started from -1
The key field of each data item
The width of the table
The height of the table, will be ignored if maxHeight
is set
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
The height of each table row, will be only used by frozen rows if estimatedRowHeight
is set
Estimated row height, the real height will be measure dynamically according to the content
The callback is of the shape of ({ rowData, rowIndex }) => number
The height of the table header, set to 0 to hide the header, could be an array to render multi headers.
Whether the width of the columns are fixed or flexible
Whether the table is disabled
Custom renderer on top of the table component
Custom renderer when the length of data is 0
Custom header renderer
The renderer receives props { cells, columns, headerIndex }
Custom row renderer
The renderer receives props { isScrolling, cells, columns, rowData, rowIndex, depth }
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
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
Extra props applied to header element
The handler is of the shape of ({ columns, headerIndex }) object
Extra props applied to header cell element
The handler is of the shape of ({ columns, column, columnIndex, headerIndex }) => object
Extra props applied to row element
The handler is of the shape of ({ columns, rowData, rowIndex }) => object
Extra props applied to row cell element
The handler is of the shape of ({ columns, column, columnIndex, rowData, rowIndex }) => object
Extra props applied to ExpandIcon component
The handler is of the shape of ({ rowData, rowIndex, depth, expandable, expanded }) => object
The key for the expand column which render the expand icon if the data is a tree
Default expanded row keys when initialize the table
Controlled expanded row keys
A callback function when expand or collapse a tree node
The handler is of the shape of ({ expanded, rowData, rowIndex, rowKey }) => *
A callback function when the expanded row keys changed
The handler is of the shape of (expandedRowKeys) => *
The sort state for the table, will be ignored if sortState
is set
Multiple columns sort state for the table
example:
{'column-0': SortOrder.ASC,'column-1': SortOrder.DESC,}
A callback function for the header cell click event
The handler is of the shape of ({ column, key, order }) => *
A callback function when resizing the column width
The handler is of the shape of ({ column, width }) => *
A callback function when resizing the column width ends
The handler is of the shape of ({ column, width }) => *
Adds an additional isScrolling parameter to the row renderer. This parameter can be used to show a placeholder row while scrolling.
Number of rows to render above/below the visible bounds of the list
Custom scrollbar size measurement
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.
A callback function when scrolling the table within onEndReachedThreshold
of the bottom
The handler is of the shape of ({ distanceFromEnd }) => *
Threshold in pixels for calling onEndReached
.
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 }) => *
A callback function when the scrollbar presence state changed
The handler is of the shape of ({ size, vertical, horizontal }) => *
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 }) => *
whether to ignore function properties while comparing column definition
A object for the custom components, like ExpandIcon
and SortIndicator
Get the DOM node of the table
Get the column manager
Get internal expandedRowKeys
state
Get the expanded state, fallback to normal state if not expandable.
Get the total height of all rows, including expanded rows.
Get the total width of all columns.
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.
Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
Reset row height cache, useful if data
changed entirely, should be used only in dynamic mode(estimatedRowHeight is provided)
Scroll to the specified offset. Useful for animating position changes.
Scroll to the specified offset vertically.
Scroll to the specified offset horizontally.
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.Set expandedRowKeys
manually.
This method is available only if expandedRowKeys
is uncontrolled.