Use expandable rows when you have additional information for a row, or row cells that do not need to be shown at all times. This helps minimize visual clutter. It also frees up the need of a second datagrid that gets updated with details. This is sometimes called a master-detail or master-child pattern. Another use is replacing original row data with a custom view or layout which includes most or all of the original row data. The expanded area can be loaded with other components as well to fit your needs.
To make a row expandable, you need to put a <clr-dg-row-detail>
component inside your row, and add a *clrIfExpanded
structural directive on it.
This directive doesn't take any input, it is here for 2 reasons: make sure the details are only instantiated once
they are needed, and make it very clear in your application templates that this part
of the DOM is not present at all times, but only when the row is expanded.
This component can contain anything: text, images, graphs, ... It can ignore the overall table layout.
If you wish to display details for each cell of the row individually and respect the table layout,
all you need to do is use our usual <clr-dg-cell>
component in the detail.
Make sure you have exactly as many cells in the detail as you have in the row, or they will not align properly.
If you want the details to replace the original row rather than expand under it, we offer a
[clrDgReplace]
input that receives a boolean on the
<clr-dg-row-detail>
component. In other words, to make details replace the row
they're in, just write:
Sometimes you want to conditionally display the expandable row, depending on if the given row has any
content to expand. In order to handle this, you'll need to wrap your expandable row in a conditional
*ngIf
directive to handle this, but since you can't put two structural directives
on the same element you'll need to use NgContainer
and ngProjectAs
like you see here in the following snippet.
Finally, you might need to make a server call to get the details for a row before you can display them.
This is a very common lazy loading pattern. In this case, you need to add a
[clrLoading]
directive receiving a boolean anywhere in the row.
Yes, it can be absolutely anywhere, as long as it's in or on the row itself.
The easiest way to make the server call lazily is simply to create a component that will make the call on
initialization (typically in the ngOnInit()
method), and to use that component
inside the *clrIfExpanded
structural directive. Here is an example of what this
solution typically looks like.
ngProjectAs
attribute on our custom detail component.
This is needed to make sure it is projected in the same place an actual
<clr-dg-row-detail>
would be.
Here is an example showcasing all these different combinations in action: