[SalesForce] Expand/collapse rows in a datatable

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?

Best Answer

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.

Related Solutions

[SalesForce] How to Expand All/Collapse All in lightning:accordion

You can show or hide all sections using activeSectionName attribute. Also allowMultipleSectionsOpen should be set to true. Sample code:

COMPONENT:

<aura:attribute name="activeSections" type="List" default="[]" />
<aura:attribute name="activeSectionsMessage" type="String" default="" />

<lightning:button label="Show" onclick="{!c.ShowHideAll}" />

<p>{! v.activeSectionsMessage }</p>

<lightning:accordion allowMultipleSectionsOpen="true"
                     activeSectionName="{! v.activeSections }" >
    <lightning:accordionSection name="A" label="Accordion Title A">
        Accordion Body A
    </lightning:accordionSection>
    <lightning:accordionSection name="B" label="Accordion Title B">
        Accordion Body B
    </lightning:accordionSection>
    <lightning:accordionSection name="C" label="Accordion Title C">
        Accordion Body C
    </lightning:accordionSection>
</lightning:accordion>

CONTROLLER.js:

ShowHideAll: function (component, event) {
    let activeSections = component.get("v.activeSections");
    if (activeSections.length === 0) {
        component.set("v.activeSections",["A","B","C"]);
    } else {
        component.set("v.activeSections",[]);
    }
}

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

Related Topic

Expand and collapse a dropdown in lightning aura