0

Can we use accordion feature in Lightning-Datatable LWC ? or Any other way to achieve same functionality in Lightning-Datatable LWC?

We have already built Lightining-datatable and using all its features such as column sorting, column header actions, row actions. Now the requirement is we need show child record using accordion feature.

As far as i know, we do have tree feature, or we can use accordion feature, but we can not use them with Lightning-datatable. We can use custom HTML table with slds tags as alternative to achieve, but in our case we already developed Lightning-datatable and using its features such column header action, row action, sorting etc.

Can someone suggest any alternative to achieve accordion in Lightning-datatable LWC.

  • We were faced with the same problem and as a workaround we open the model with another datatable. not the best but at least it works. We could only do accordion using normal HTML table. – zaitsman Jul 1 at 7:23
  • Thank you for suggestion. here i can add one more thing, we can show modal popup using button click or row action, but its blocking the table view, and at a time we can see only one record data, but using accordion we can see multiple row data. – Shailesh Mali Jul 1 at 7:28
1

On the assumption I've understood your question correctly, we have done this as follows:

  1. Extend the data table to support a custom cell data type:
import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';

/**
 * Extends the lightning-datatable component to add a custom matchScore cell type.
 * This custom cell uses a lightning-accordion to show a single collapsible section with an icon.
 */
export default class ExampleResultsTable extends LightningDatatable {
    static customTypes = {
        matchScore: {
            template: matchCell
        }
    }
}
  1. Provide the custom cell rendering (exampleMatchCell.html):
<template>
    <lightning-accordion allow-multiple-sections-open>
        <lightning-accordion-section name="breakdown" label={value.percentage}>
            <lightning-icon slot="actions" icon-name={value.icon} variant={value.iconVariant}></lightning-icon>
            <template for:each={value.notes} for:item="note">
                <p class="slds-truncate" title={note.value} key={note.key}>{note.value}</p>
            </template>
        </lightning-accordion-section>
    </lightning-accordion>
</template>
  1. Use this custom component in the parent rendering instead of the standard data table:
        ...
        <c-example-results-table
                key-field="Id"
                data={_results}
                columns={_columns}
                onrowaction={handleRowActions}
                hide-checkbox-column>
        </c-example-results-table>
  1. Have the parent define the columns including the custom type:
            ...
            this._columns.push({
                fieldName: 'score',
                label: this.Label.ColumnMatch,
                type: 'matchScore',
                initialWidth: 250,
                fixedWidth: undefined,
                typeAttributes: {}
            });
            ...

For us, our datatable gets rendered like the following example, where the "Match" column is the one containing an accordion:

enter image description here

The row height adjusts depending on whether the accordion is open or closed, as illustrated.

You will find documentation about handling columns with "custom data types" under "Creating Custom Data Types".

| improve this answer | |
  • Thanks for solution. I tried this approach, but using this we can add accordion feature in Lightning Datatable, but when we click on accordion button ideally data should show in child row but its not happening. Instead of child row, data is displaying in next row. – Shailesh Mali Jul 1 at 10:37

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.