How to implement Accordion Feature in Lightning-datatable LWC

Question

I have a requirement to show as Accordion type for one of the column so that the list can show more data at once when the modal window appears with the list.

Sample JSON

  eventData = [
   {
       eventTime: '10:35:47 AM',
       firstName: 'Bill Pay',
       eventsource: [{eventSource : 'Test', currentUrl:'URL'}]         
   },
   {
       eventTime: '11:35:47 AM',
       firstName: 'Paper less - procative',
       eventsource: [{eventSource : 'Test1', currentUrl:'URL'}] 
   } 

What I like to see in the UI is something like

eventDesc to show as Accordion when clicked to show the details underneath it. In this case to show (eventSource : 'Test1', currentUrl:'URL') .

Sample JS code:

import { LightningElement ,api, wire, track} from 'lwc';
import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';
export default class ExampleResultsTable extends LightningElement(LightningDatatable) {
    @track results =[];
    @track columns = [
        { label: 'Event Time', fieldName: 'eventTime' ,type:'text', sortable: true},
        { label: 'Event Name', fieldName: 'eventName', type: 'text',sortable: true},
        { label: 'Event Desc', fieldName: 'eventSource',  type: 'matchScore',typeAttributes: {}},
      ];
      @track eventData = [
        {
            eventTime: '10:35:47 AM',
            firstName: 'Bill Pay',
            eventsource: [{eventSource : 'Test', currentUrl:'URL'}] 
             
             
        },
        {
             
            eventTime: '11:35:47 AM',
            firstName: 'Paper less - procative',
            eventsource: [{eventSource : 'Test1', currentUrl:'URL'}] 
             
             
             
        } 
    ];
    static customTypes = {
        matchScore: {
            template: matchCell
        }
    }
    connectedCallback() {
    this.results = this.eventData;

    }
}

Answer 1

What you're looking for is lightning-tree-grid.

Something like this:

<lightning-tree-grid key-field="index" columns={columns} data={data}>
</lightning-tree-grid>

---

  columns = [
    { label: 'Event Time', fieldName: 'eventTime' ,type:'text', sortable: true},
    { label: 'Event Name', fieldName: 'eventName', type: 'text',sortable: true},
    { label: 'Event Desc', fieldName: 'eventSource',  type: 'matchScore',typeAttributes: {}},
  ];
  data = [
    {
      index: 1,
      eventTime: '10:35:47 AM',
      eventName: 'Bill Pay',
      _children: [{index: 0, eventSource : 'Test', currentUrl:'URL'}] 
    },
    {
      index: 2,
      eventTime: '11:35:47 AM',
      eventName: 'Paper less - procative',
      _children: [{index: 0, eventSource : 'Test1', currentUrl:'URL'}] 
    } 
  ];

You will need to change your JavaScript object after loading the data such that eventsource will be called _children, and each row will need a unique index, as shown above and in the demo.

Demo.