lightning-datatable | Loading indicator hardly visible

[bastiW]

Hi,

the loading indicator in the lightning datatable is hardly visible.

How to reproduce: go to https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example Copy paste the following code into HTML:

<template>
     <div style="height: 600px;">
        <lightning-datatable
                is-loading="true"
                key-field="id"
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

[git2gus[bot]]

This issue has been linked to a new work item: W-8376866

[bastiW]

I am actually talking about the lightning-datatable not the lightning-tree-grid. Sorry for confusion. I updated the bug description.

[bastiW]

This also affects any other compents where you wish to have more height inside the component.

I can not change the CSS as this is part of the LWC.

[joelbyrd]

Hi,

the loading indicator in the lightning datatable is hardly visible.

How to reproduce: go to https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example Copy paste the following code into HTML:

<template>
     <div style="height: 600px;">
        <lightning-datatable
                is-loading="true"
                key-field="id"
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

Depending on your situation, a better CSS option might be min-height instead of height. That way you get the amount of height needed to show the spinner, but once the data loads, you're not restricting the height of the table (unless you want to, which may be the case). So you would simply change it to:

<template>
     <div style="min-height: 200px;">
        <lightning-datatable
                is-loading="true"
                key-field="id"
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

[joeythomaschaske]

Is there a work around for this? Wrapping my lightning-tree-grid component with a div with min-height does not show the spinner

[Shibichakku]

If you set the tbody height to 40px as a workaround you will be able to see the full spinner.

[jclark-dot-org]

@Shibichakku How do you affect the styling of a component internal to the lwc? It's not accessible due to shadow dom and CSS namespacing.

[Shibichakku]

@jclark-dot-org , Not the ideal way. But if I need the override badly, will keep it in a stylesheet static resource and load it separately to get those css applied. Again, this is just a workaround and would be good if the change can be done in the standard css itself.

[HyruleConsulting]

Still can't use the default loading spinner on lwc datatable, it's partly cut off at the bottom of the table. Any idea when this is likely to be fixed?