Detail Pane

The Detail Pane is a pattern to show additional details for a record. The Detail Pane condenses the datagrid to show a primary column and a panel to the right to display more details about your record. The Detail Paine allows you to show the full content of the record in a larger scrollable space. The Detail Pane is also fully accessible for keyboard and screen reader users.

The Detail Pane adds a new toggle icon on the left-hand side of the Datagrid. When the pane is open, it takes 2/3 of the width of the Datagrid and hides all columns, except for the first column and any built-in columns that facilitate features like selection and row actions. The pagination also updates to a condensed format that scales well to small sizes. Only one row can be open at a time; selecting another row changes the content to the newly selected row.

The Detail Pane is not compatible with Expandable Rows; when both are enabled, the Detail Pane takes precedence. Hide and show columns are disabled while the Detail Pane is open, but still works properly when closed. The rest of the Datagrid behaviors work as expected, even while the Detail Pane is open.

Basic use of Detail Pane

To use the Detail Pane, add a new element with the following syntax inside of the Datagrid

This is a full example with Selection and the Detail Pane both working together.

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{detail.name}} Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users

Reacting to changes in Detail Pane state

It is possible to listen for changes to the Detail Pane state, by desugaring the *clrIfDetail directive and listening for the (clrIfDetailChange) event. It is important to use a local template variable like let-detail to reference the row object.

Controlling the Detail Pane programatically

In some cases, you might want to programatically control the toggling of the Detail Pane, which you can do by desugaring *clrIfDetail directive and using the two way binding syntax. Be sure to include the local template variable like let-detail to get access to the row object.

Opened Pane: No user selected. {{state?.id}}

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{detail.name}}
{{detail | json}}
{{detail | json}}
{{detail | json}}
{{detail | json}}
Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users