Loading slot

You can use loading slot to customize loading effect:

<EasyDataTable
  :headers="headers"
  :items="items"
>
  <template #loading>
    <img
      src="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif"
      style="width: 100px; height: 80px;"
    />
  </template>
</EasyDataTable>

Attention: this is a new feature since version 1.1.4

Example

Name	Address	Height	Weight	Age	Favourite sport	Favourite fruits

rows per page:

5

• 25
• 50
• 100

1–0 of 0

You can use empty-message to customize empty message:

<EasyDataTable
  :headers="headers"
  :items="items"
>
  <template #empty-message>
    <a href="https://google.com">nothing here</a>
  </template>
</EasyDataTable>

Example

Name	Address	Height	Weight	Age	Favourite sport	Favourite fruits

nothing here

rows per page:

25

• 25
• 50
• 100

1–0 of 0

⚠️ loading slot feature is based on the slots feature of vue.js. So before using the loading slot feature in vue3-easy-data-table, Please make sure you have known how to use the slots feature of vue.js.