Github
DataGrid - Row details

Row details

The <ReactDataGrid /> supports showing row details via expanded rows. In order to enable expanded rows, make sure to specify arowExpandHeight and the renderRowDetails({ data, rowIndex, ... }) function prop, which will be used to render the details for expanded rows. When enabling row expand, the <ReactDataGrid /> will now have two possible row heights: unexpanded (collapsed) rows will have the height specified by rowHeight, while expanded rows will have their size specified by rowExpandHeight.
Expanded rows are managed via the expandedRows prop (this prop is controlled, see defaultExpandedRows for uncontrolled version). The value of this prop should be an object - the keys in this object are the ids of the expanded rows, while the value for each key should be true.
expandedRows can also be true, which means all rows should be rendered as expanded - however, we still need the ability to specify that some of the rows should be collapsed - this is achieved via collapsedRows (controlled; see defaultExpandedRows for uncontrolled alternative).
The example below shows a basic example of the row details expand functionality

Rendering details in expanded rows

For rendering row details in expanded rows, use the renderRowDetails({ data, rowIndex, ... }) function prop. It is called for you with an object as a first argument - the object has the following properties:
  • data - the data item corresponding to the current expanded row
  • rowSelected - specifies if the current row is selected
  • rowActive - specifies if the current row is active
  • rowId - the value of the idProperty for the current row data object
  • toggleRowExpand - you can call this function with no arguments to collapse the current row
  • dataSource - a reference to the current dataSource array that the <ReactDataGrid /> displays
As documented above, the renderRowDetails function prop gives the developer access to a lot of information about the row being rendered, which makes it really flexible and easy to use.
When expanded rows are enabled in a grid instance, the column render function is called with arguments that contain information about the expanded state of the row, and with functions that can be used to change the row expanded state - see columns.render for details.

Single expand and configuring the row expand column

Single expand - the ability to only expand one row (when another one is expanded, it collapses the other expanded row) - is achieved via multiRowExpand=false. By default the <ReactDataGrid /> is configured to allow multiple rows to be expanded at the same time.
Another important feature is the ability to configure (or hide) the row expand column that's automatically added when row expand is enabled. This is accomplished by specifying the rowExpandColumn prop on the <ReactDataGrid />.
rowExpandColumn=false hides the row expand column.
rowExpandColumn can also be an object (a column configuration object), so you can specify custom rowExpandColumn.render, rowExpandColumn.header, etc render functions. All properties available for normal columns are also available here.

Controlling the expanded rows

The expanded rows can be specified via controlled or uncontrolled props. The same goes for collapsed rows, they can be controlled or uncontrolled props. In both cases, there are a number of callback props being called when new rows are expanded or collapsed:
  • onRowExpand - called when a single row is expanded. Returning false from this function will prevent expanding the row.
  • onRowCollapse - called when a single row is collapsed. Returning false from this function will prevent collapsing the row.
  • onRowExpandChange - called when a single row is collapsed or expanded. Returning false from this function will prevent collapsing or expanding the row.
  • onExpandedRowsChange - unlike all of the above, this function is called for both single row expand/collapse, as well as for bulk actions, like calling collapseAllRows or expandAllRows.
When using controlled props, like expandedRows or collapsedRows to control which rows are expanded or collapsed, make sure you update their values as a result of user interaction, which triggers the callback props described above (eg onExpandedRowsChange).
You can specify which rows should not be expandable, via the isRowExpandable function prop, which gives you a lot of flexibility to decide which rows should not be expandable.
As an alternative, in order to specify unexpandable rows, you can also use unexpandableRows - it's not as flexible as isRowExpandable, but it can be a bit more performant.

Controlling the row details width

The <ReactDataGrid /> allows you to control the width of the row details via the rowDetailsWidth prop.
Possible values are:
  • "max-viewport-width" - the width of the row details will be maximum the width of the grid viewport width. When columns take up less space, the row details will be sized to the total width of the columns. If columns don't fit in the grid viewport and horizontal scrollbar is needed, the row details will be still constrained to the width of the grid viewport.
  • "min-viewport-width" - the width of the row details will be minimum the width of the grid viewport width. When columns take up less space, the row details will be sized to fill the grid viewport. If columns don't fit in the grid viewport and horizontal scrollbar is needed, the row details will grow with the total columns width, and will be scrolled together with the grid viewport.
  • "viewport-width" - the width of the row details will be exactly the width of the grid viewport width, no matter the size of grid columns.

Custom scroll integration

For a better experience, the row details can be integrated with the ScrollContainer, to have the same scroller as the <ReactDataGrid />. See the example below for details.

Row details supports variable heights

The <ReactDataGrid /> supports diferent heights for row details by specifying rowExpandHeight({ data }) as a function, in which you will receive data as a parameter. If you specify the prop as a number, then the heights will be the same for all the row details.
Previous
Locked columns
Next
PivotGrid
© ReactDataGrid by Inovua 2020. All rights reserved.
Terms of UsePrivacy Policy
Top