Currently, I am working on a Nuxt project with Buefy implementation. I attempted to create a table with an #empty slot that displays a message when no data is available. However, my code does not seem to be working as expected. If you refer to the Buefy documentation, you'll see that the table setup should include:
<template #empty>
<div class="has-text-centered">No records</div>
</template>
My current code structure looks like this:
<b-table :data="companies" id="agencyCompaniesTable" bordered>
<b-table-column v-for="column in columns" :key="column.id" v-bind="column">
<template v-if="column.searchable && !column.numeric"
#searchable="props">
<b-input v-model="props.filters[props.column.field]"
placeholder="Search..."
icon="magnify"
size="is-small" />
</template>
<template v-slot="props">
{{ props.row[column.field] }}
</template>
</b-table-column>
<template #empty>
<div class="has-text-centered">No records</div>
</template>
</b-table>
Although everything seems correct and the code is identical to what's recommended, the table remains empty without displaying the "No records" text. Any ideas on what could be causing this issue? Appreciate any help or suggestions.