0

I can't find how this is implemented:

enter image description here

I'm using a lightning-datatable and would like to convert my current button-icon to what the triangle/square icon above. when clicked it would show two options: edit and delete that would need to call a js function. I want to replace this guy (utility-edit) pencil which calls an edit handlerowaction method currently. I'm looking to have two options available in a dropdown to call edit and delete handlers with the triangle in a box option.

enter image description here

js columns:

const SAColumns = [
    {
        type: 'button-icon',
        fixedWidth: 40,
        typeAttributes: {
            iconName: 'utility:edit',
            name: 'edit',
            title: 'Edit',
            variant: 'bare',
            alternativeText: 'edit',
            disabled: false
        }
    },
    {label: 'Title', fieldName: 'Title__c', type: 'pickList'},
    {label: 'User', fieldName: 'UserName', Id: 'User__c',type: 'text'}
];

html datatable:

        <template if:true={hasSAs}>
            <lightning-datatable
                    data={datatableSAs}
                    columns={SAColumns}
                    key-field="Id"
                    onrowaction={handleRowAction}
                    hide-checkbox-column="true"
                    sorted-by={sortBy}
                    sorted-direction={sortDirection}
                    onsort={handleSortdata}
            >
            </lightning-datatable>
        </template>
1

You'll want to look at the documentation, but basically you use the type of "actions", and specify a typeAttributes called rowActions. You can specify a name, label, and icon (and more).

4
  • I guess my question is, where do I find this in the documentation? Does this icon have a name so I can search for it? I had found this: developer.salesforce.com/docs/component-library/bundle/… but it's not being implemented the same way I'm trying to do it.
    – mackmama
    May 29 '20 at 16:42
  • @SkipVV Look at the lightning-datatable documentation. It shows how to use the actions column.
    – sfdcfox
    May 29 '20 at 16:54
  • developer.salesforce.com/docs/component-library/bundle/… - yeah just found it. I'll update the solution when I figure it out. Thanks!
    – mackmama
    May 29 '20 at 16:56
  • wow. Almost too easy. Just made these changes: const actions = [ { label: 'Edit', name: 'edit' }, { label: 'Delete', name: 'delete' }, ]; const staffingAssignmentColumns = [ {label: 'Title', fieldName: 'Title__c', type: 'pickList'}, {label: 'User', fieldName: 'UserName', Id: 'User__c', type: 'text'}, { type: 'action', typeAttributes: { rowActions: actions, disabled: false }, }, ]; and accounted for the edit/delete events in handleRowAction function. Thanks again
    – mackmama
    May 29 '20 at 17:34

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.