React Master-Detail Grid
The IgrGrid
component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified each record acts as a master, which upon expansion shows a customizable details template with contextual data for the current record.
This mode is useful when you need to display master-detail style data in a hierarchical structure.
React Grid Master-Detail Example
Configuration
To configure the IgrGrid
to display in master-detail mode you need to specify a template for the grid:
<IgrGrid detailTemplate={masterDetailTemplate} autoGenerate="false" data={nwindData}>
Context of the template is the master record data, so that values from the master record can be displayed in the detail template. For example:
const masterDetailTemplate = ({dataContext}:{dataContext: IgrGridMasterDetailContext}) => {
const data = dataContext.implicit;
return (
<div className="contact-container">
<span><strong>Name:</strong> {data.ContactName}</span> <br/>
<span><strong>Title:</strong> {data.ContactTitle}</span> <br/>
<span><strong>Company:</strong> {data.CompanyName}</span> <br/>
</div>
);
}
API
Additional API methods for controlling the expansion states are also exposed:
Keyboard navigation
When focus is on a detail row:
- 🡑 - navigates one row up, focusing a cell from the previous row.
- 🡓 - navigates one row down, focusing a cell from the next row.
- Tab - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row.
- Shift + Tab - moves the focus to the previous row.
When focus is on a data row with expander:
- Alt + 🡒 or Alt + 🡓 - expands the row.
- Alt + 🡐 or Alt + 🡑 - collapses the row.
Known Issues and Limitations
Known Limitations | Description |
---|---|
Tab navigation inside the custom detail template may not update the master grid scroll position in case the next focused element is outside the visible view port. | Tab navigation inside the custom detail template is left up to the browser. |
When templating a grid inside the details view that has a <igc-column> definitions, the parent grid will also render those columns. |
This can be avoided using autoGenerate=true for the nested grid. In case some aspect of those columns need to be modified the ColumnInit event can be used. |
Details template will not be exported to Excel. | As the details template can contain any type of content we cannot export it to excel out of the box. |
The search feature will not highlight elements from the details template. |