Search code examples
javascriptvue.jshtml-tablebuefy

Buefy table emty slot does not show the text


I have a Nuxt project with Buuefy implementation. I tried to make table with #empty slot when no data are available but it does not work. Documentation for Buefy table uses

<template #empty>
    <div class="has-text-centered">No records</div>
</template>

My code looks like

<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>

The code is identcal the table is empty but I dont see the text "No records". What could be the problem? Thanks for any help.


Solution

  • I am using an older version of buefy (0.7.0) and I resolved it this way

     <template slot="empty">
        <div class="has-text-centered">No records</div>
     </template>