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: