0

can we display message when lightning data table is empty in LWC like below enter image description here

2 Answers 2

3

You can do this to result in the screenshot below. You'll need to have a variable called "empty" that holds whether there's data or not.

<lightning-datatable
    class="some-table"
    key-field="Id"
    data={data}
    columns={columnMappping}
    hide-checkbox-column
>
</lightning-datatable>
<template if:true={empty}>
    No data to display
</template>

Lightning data table with "no data" message

0
<template if:true={data}>
    <lightning-datatable
            key-field="id"
            data={data}
            errors={error}
            columns={columns}
            onrowaction={handleRowAction}
            hide-checkbox-column>
    </lightning-datatable>
</template>
    <template if:false={data}>
        <lightning-datatable
        key-field="id"
             columns={columns}
            onrowaction={handleRowAction}
            hide-checkbox-column>
    </lightning-datatable>
    <div class="slds-align_absolute-center" style="height:5rem">No records to displays</div>
    </template>
1
  • You just have to add the error message outside the table Commented Sep 21, 2022 at 14:15

You must log in to answer this question.

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