function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jyoti GaikwadJyoti Gaikwad 

Lightning Datatable: Highlight the row onclick

Hi everyone,
I need to change background color of the row onclick on it in lightning datatable or HTML table. I am trying it in Lightning web component but I can't find any solution. 
Suraj Tripathi 47Suraj Tripathi 47

Hi Jyoti ,

HTML;
<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>
 JS:
import { LightningElement
} from 'lwc';

const columns = [{
        label: 'Label',
        fieldName: 'name',
        cellAttributes: {
            class: {
                fieldName: `format`
            },
            alignment: `left`
        }
    },
    {
        label: 'Phone',
        fieldName: 'phone',
        type: 'phone'
    },
    {
        label: 'Balance',
        fieldName: 'amount',
        type: 'currency'
    }
];

const recordMetadata = {
    name: 'name',
    email: 'email',
    website: 'url',
    amount: 'currency',
    phone: 'phoneNumber',
};

let amountOfRecords = 10;

export default class FormatTable extends LightningElement {
     data = [];
    columns = columns;

    async connectedCallback() {
        const data = await this.fetchDataHelper({
            amountOfRecords
        });

        //Generate Dynamic Values
        data.forEach(ele => {
            ele.format = ele.amount > 200 ? 'slds-text-color_error' : 'slds-text-color_success';
        });
        this.data = data;
    }

    fetchDataHelper({ amountOfRecords }) {
      const recordMetadata = {
        name: "name",
        email: "email",
        website: "url",
        amount: "currency",
        phone: "phoneNumber",
      };
If you find your answer than mark as best answer

Thanks And Regard,
Suraj Tripathi.
 
Jyoti GaikwadJyoti Gaikwad
Thanks for the reply. @suraj @sreenath. I don't need to hightlight on particular condion. I have button action in table. On click of button(fetching the record details for another table search criteria) and then another table is displyed. So I need to hightlight the row onwhich i have clicked.User-added image
Siddhartha Nandy 13Siddhartha Nandy 13
Hi Jyoti,

Not sure if you are looking for something like this -
lightning datatable custom row color highlight
if yes, then I just added this one liner in css file, you may wish to use it as per your need perhaps.
:host{
    --lwc-colorBackgroundRowSelected: rgb(103, 231, 156);
}
Shraddha CShraddha C
Hi Jyoit,
Did you find any solution for this?
Abhishek J 1Abhishek J 1
Hi Jyoti or Shraddha, did you got any solution?
I have similar requirement, when i have to highlight row onclick and need details in js to perform some task.