2

This is so simple I am embarressed to ask but can't find a simple example of the proper syntax anywhere. I want to have a datatable that has a column that displays a download icon action:download, when clicked would handle a download of the record in JS.

No matter what I try I can't get the icon to display, I am simply trying with no value for the cell, a value for the cell nothing helps. I have tried every combination of cellAttribute, typeAttribute and every other example I can find online but nothing displays the icon in the table (I can put it in the header).

I'm using columns = .... then defining the columns in JS, could someone post a simple working example of the syntax to display an icon in a table cell?

6

Specify an empty field with cellAttributes set to the icon name, which may be either a fixed value or a value from the data. I've provided a playground that demonstrates this.

The code is as follows:

<template>
    <lightning-datatable key-field="id" columns={cols} data={data}>
    </lightning-datatable>
</template>

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track cols = [
        {
            fieldName: '',
            label: 'Static Icon',
            cellAttributes: { iconName: 'standard:opportunity' }
        },
        {
            fieldName: '',
            label: 'Dynamic Icon',
            cellAttributes: { iconName: { fieldName: 'dynamicIcon' } }
        },
        {
            fieldName: 'name',
            label: 'Name'
        }
    ];
    @track data = [
        {
            id: 1, name: 'Opportunity 1', dynamicIcon: 'utility:up'
        },
        {
            id: 2, name: 'Opportunity 2', dynamicIcon: 'utility:down'
        }
    ]
}
1
  • Thanks so much sfdcfox, that works just fine. I have no idea what I was doing wrong.....but your code is working fine. – ScottH7a9 Jan 31 '20 at 14:35

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.