Display Icons in a Lightning Datatable in LWC

by Rijwan Mohmmed
0 comment
display-icons-in-a-lightning-datatable-in-lwc-techdicer

Hello friends, Today we are going to discuss How to Display Icons in a Lightning Datatable in LWC(Lightning Web Component). Sometimes there is a requirement that shows Icons that user is active or not. And by the icons, we need to display the status. It will look great when we use these types of icons for any info.

Also check this: Upload Custom File in Lightning Web Component(LWC)

Highlights Points :

  1. Icons/image says more then words.
  2. Customer can easily understand.

Code :

Step1: In this step, We create a Lightning Web Component(LWC). In the HTML part just put simple Lightning Datatable. Datatable data fetch from JS part.

DatatableIconLWC.HTML:

<template>

    <!------header------->
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Display Icons in a Lightning Datatable in LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <br/>
    <!------/header------->

    <!--- datatable -->
    <lightning-datatable 
                        key-field="id" 
                        columns={columns} 
                        data={data}
                        hide-checkbox-column>
    </lightning-datatable>
    <!--- /datatable -->
</template>

DatatableIconLWC.JS:

import { LightningElement} from 'lwc';
const columns = [
                {
                    label: 'Name', fieldName: 'Name', 
                },
                {
                    label: 'Show Static Icon',
                    fieldName: '',
                    cellAttributes: { iconName: 'standard:account' }
                },
                {
                    label: 'Show Dynamic Icon',
                    fieldName: '',
                    cellAttributes: { iconName: { fieldName: 'dynamicIcon' } }
                }
            ];
export default class DatatableIconLWC extends LightningElement {
    columns = columns;
    data = [
            {
                Id: 1, Name: 'Ankit', dynamicIcon: 'action:close'
            },
            {
                Id: 2, Name: 'Anil', dynamicIcon: 'action:approval'
            },
            {
                Id: 3, Name: 'Rijwan', dynamicIcon: 'action:approval'
            },
            {
                Id: 4, Name: 'Himanshu', dynamicIcon: 'action:close'
            }
        ]
}

Output :

display-icons-in-a-lightning-datatable-in-lwc-output-techdicer

Reference :

  1. Salesforce LWC Datatable

You may also like

Leave a Comment