Web Components Master-Detail Grid

    The IgcGridComponent 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.

    Web Components Grid Master-Detail Example

    Configuration

    To configure the IgcGridComponent to display in master-detail mode you need to specify a template for the grid:

    constructor() {
  var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
  this._bind = () => {
    grid.data = this.customersData;
    grid.detailTemplate = this.masterDetailTemplate;
  }
  this._bind();
}

    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:

        public masterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
        var data = ctx.implicit;
        return html` <div class="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.

    API References