Expand/collapse rows in a datatable

Question

One of the requirements that we have is to make a datatable(or something that looks very similar) with expanding rows.

An example would be:

Year 199x, I have a video collection of VHS and I want to keep the info about them in a table. Given the limited space of a screen, I will only show some important info on each row(for example: title, year, genre) and when I click on a row, I want the row to expand to show more info(for example: description, budget, box office, cast, to whom and when did I lend it, etc.).

What I have so far is not much, only a datatable:

<aura:attribute name="vhsList" type="VHS__c[]" />
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:datatable
            keyField="id"
            data="{! v.vhsList }"
            columns="{! v.columns }"
            hideCheckboxColumn="true"/>

Controller:

doInit : function (cmp, event, helper) {
    cmp.set('v.columns', [
        {label: 'Title', fieldName: 'Title__c', type: 'text'},
        {label: 'Year', fieldName: 'Year__c', type: 'text'},
        {label: 'Genre', fieldName: 'Genre__c', type: 'text'}
    ]);
    // And vhsList fill of course
}

I was thinking about using divs that become visible on a row click, but it does not seem possible with a datatable.

Is there a way to achieve expanding rows in a lightning:datatable or anything visually similar?

Answer 1

You can use the new <lightning:treeGrid> component. This allows you to hide and show rows. I don't think <lightning:datatable> supports this functionality.

Here is the link to the tree grid component.

Answer 2

Unfortunately you cannot achieve this with the base lightning:datatable as it only displays basic cell types.

You could create a custom table component starting from the SLDS blueprint but it's a lot of work.

My recommendation in terms of UI is to have a side bar that gets populated with the selected row details.

+-------------+----------+
|             |          |
|             | Selected |
|  Datatable  | Row      |
|             | Details  |
|             |          |
+-------------+----------+

You can achieve this with a lightning:layout and lightning:layoutItem and you can make this collapsible when there is no selection.