How to highlight rows in Lightning Datatable

Having huge amount of data in lightning Datatable, its hard to find the specific type of rows. so here, we can highlight data table rows conditionally or any specific row.

Also Read: Cell highlight in Datatable

In this example component, we are highlighting row number 2. 

Conditional Row highlight in Datatable

DataTableRowHighlight.html

<template>
    <lightning-datatable
        key-field="Id"
        data={tableData}
        columns={tableColumns}>
    </lightning-datatable>
</template>

DataTableRowHighlight.js

import { LightningElement } from 'lwc';
// table columns 
const COLUMNS = [
    { 
        label: 'Id', 
        fieldName: 'id', 
        type: 'integer',
        cellAttributes: {
            class: {
                fieldName: 'rowHighlightCls'
            }
        }
    },
    { 
        label: 'Name', 
        fieldName: 'name' , 
        type: 'string', 
        cellAttributes: {
            class: {
                fieldName: 'rowHighlightCls'
            }
        }
    },
    { 
        label: 'Website', 
        fieldName: 'website', 
        type: 'url',
        cellAttributes: {
            class: {
                fieldName: 'rowHighlightCls'
            }
        }
    }
];
export default class DataTableRowHighlight extends LightningElement {
    tableColumns = COLUMNS;
    // sample data
    tableData = [
        {id:101, name: 'salesforce', website:'https://www.salesforce.com', rowHighlightCls: ''},
        {id:102, name: 'Asian Paints Ltd', website:'https://www.asianpaints.com/', rowHighlightCls:'slds-theme_shade slds-theme_alert-texture'},
        {id:103, name: 'IndusInd Bank Ltd', website:'https://www.indusind.com/', rowHighlightCls:''}
    ];
}

DataTableRowHighlight.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo