0

Is it possible to change the icon on a lightning-datatable component or lightning:datatable? You can see below it's using a "minus" with a circle.

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

enter image description here

<template>
<lightning-datatable
    key-field="Id"
    data={data}
    columns={columns}
    errors={errors}
>
</lightning-datatable>
<lightning-button label="display error" onclick={handleClick}>
</lightning-button>
    handleClick(event) {
       this.errors = {
            rows: {
                b: {
                    title: 'We found 2 errors.',
                    messages: [
                        'Enter a valid amount.',
                        'Verify the email address and try again.'
                    ]
                }
            }
        };
    }

EDIT: I ended up creating a custom data table, and using a lightning-button-icon and the slds popover to mimic the standard row error. However, my new issue now is that I am unable to display the pop-over in front of the databable.

<template>
<div class="slds-is-relative slds-float_left">
    <section aria-describedby="dialog-body-id-110" aria-labelledby="dialog-heading-id-1" class="slds-popover slds-popover_error slds-nubbin_bottom-left slds-rise-into-ground custom-popover-css" role="dialog">
        <lightning-button-icon icon-name="utility:close"  alternative-text="Close" variant="bare-inverse" title="Close" class="slds-float_right slds-popover__close"></lightning-button-icon>

        <header class="slds-popover__header">
          <div class="slds-media slds-media_center slds-has-flexi-truncate ">
            <div class="slds-media__figure">
                <lightning-icon icon-name="utility:error" class="slds-icon-utility-error" alternative-text="Error" size="x-small" title="Error" variant="inverse"></lightning-icon>
            </div>
            <div class="slds-media__body">
              <h2 class="slds-truncate slds-text-heading_medium" id="dialog-heading-id-1" title="We hit a snag.">We hit a snag.</h2>
            </div>
          </div>
        </header>
        <div class="slds-popover__body" id="dialog-body-id-110">
          <ul class="slds-list_dotted">
            <li>Details about error #1</li>
            <li>Details about error #2</li>
            <li>Details about error #3</li>
          </ul>
        </div>


      </section>
      <lightning-button-icon icon-name="utility:error" class="error-icon" variant="bare" alternative-text="Error" title="Error" onclick={handleClick}></lightning-button-icon>
</div> 

enter image description here

enter image description here

1 Answer 1

0

You can't customize the icon in the standard lightning-datatable component.

1
  • I ended up creating a custom data type with a lightning-button-icon and slds popover. The only issue I have now, is I am unable to display the popover on top of the lightning-datatable.
    – jojopogi
    Commented Mar 4 at 21:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .