9

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?

  • 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 '18 at 9:04
3

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.

  • 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 '18 at 11:16
  • 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 '18 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.