10

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?

1
  • 2
    Do you really want to use expanding rows to visualize this? What about using a row action to open a modal showing these details using lightning:overlayLibrary?
    – Folkert
    Jun 29, 2018 at 9:04

2 Answers 2

4

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.

2
  • 1
    Thanks for the answer. However, the treeGrid seems to preserve the original columns, but I only need a div or just a row where I can put whatever I like
    – Novarg
    Jun 19, 2018 at 11:16
  • 1
    Ok. May be lightning:accordion may fit your requirement? developer.salesforce.com/docs/component-library/bundle/… This one you will have to customise with some html / css though.
    – Ranga
    Jun 19, 2018 at 11:39
0
+50

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .