How to display an icon in a Lightning Datatable in a LWC

Question

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?

Answer 1

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'
        }
    ]
}