lightning:datatable action menu error

Question

I'm showing a datatable with a list of opportunities. Now I want to allow for a dropdown menu of actions. When I click on the arrow to the left of the opportunity detail row, it is giving me this error in the browser.

[a.reduce is not a function] c()@https://data-velocity-3907.lightning.force.com/components/lightning-datatable-utils.js:2:310
Object.getMenuAlignment()@https://data-velocity-3907.lightning.force.com/components/lightning-datatable-utils.js:2:1572
n.get computedMenuAlignment as computedMenuAlignment@https://data-velocity-3907.lightning.force.com/components/lightning-primitive-cell-actions.js:2:1844
j()@https://data-velocity-3907.lightning.force.com/components/lightning-primitive-cell-actions.js:2:615"

This is my lightning:datatable:

<div style="position: relative; height: 30vh">
 <lightning:datatable
   keyField="id"
   data="{! v.data}"
   columns="{! v.columns }"
   hideCheckboxColumn="true"
   onrowaction="{! c.handleRowAction }"/>
</div>

Here's my handleRowAction function:

 handleRowAction: function (component, event, helper) {
    const action = event.getParam('action')
    const row = event.getParam('row')
    console.log(row)
    switch (action.name) {
        case 'show_details':
            // let navEvt = $A.get('e.force:navigateToSObject')
            // navEvt.setParams({
            //     'recordId': row.Id,
            //     'slideDevName': 'detail'
            // })
            // navEvt.fire()
            alert('Showing Details: ' + JSON.stringify(row));
            break
    }
  }

Here's the v.columns situation:

component.set('v.columns', [
      {label: 'Opportunity name', fieldName: 'Name', type: 'text'},
      // {label: 'Account name', fieldName: 'accountName', type: 'text' },
      {label: 'Close date', fieldName: 'CloseDate', type: 'date' },
      {label: 'Amount', fieldName: 'Amount', type: 'currency' },
      //{label: 'ID', fieldName: 'ID', type: 'ID'},
      {type: 'action', typeAttributes: { rowActions: { label: 'Show Details', name: 'show_details' } } } 
    ])

Again the error occurs just as I try to click the action menu arrow on the opportunity detail row on the table.

Answer 1

While setting v.columns, the action attribute takes in an 'array' of rowActions. So this should help:

{type: 'action', typeAttributes: { rowActions: [{ label: 'Show Details', name: 'show_details' }] } }