Vue, Vuetify 2 - How to add buttons to data table footer

Question

The title pretty much says it all - I'd like to add a couple of fab buttons to the table footer (with which I plan to CRUD records in the table). Ideally I'd like to move the Rows per page and pagination to the left, and add my buttons in on the right, but at this point I'm willing to settle for adding my buttons on the left.

I looked at the documentation on data table slots, and I thought that body.append or footer might do it, but couldn't figure out how to translate them into my project, as they don't provide any mark up in the API section (only javascript objects) and none of the examples below the API section has what I'm looking for either.

Here's the code I'm currently using, in case it helps:

<v-data-table
  v-model="selected"
  item-key="id"
  class="elevation-1"
  :headers="headers"
  :items="items"
  :search="search"
  :sort-by="['expiry.millis', 'label']"
  :sort-desc="[false, true]"
  multi-sort
  show-select
>

  <template v-slot:top>
    <v-toolbar flat color="white">
      <v-toolbar-title>Inventory</v-toolbar-title>
      <div class="flex-grow-1"></div>
      <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" hide-details class="half-width"></v-text-field>
      <div class="flex-grow-1"></div>

      <v-btn color="error" small fab dark v-if="selected.length > 0"><v-icon>mdi-delete-outline</v-icon></v-btn>
      <v-btn color="deep-purple accent-4" small fab dark class="ml-1"><v-icon>mdi-plus</v-icon></v-btn>
    </v-toolbar>
  </template>

  <template v-slot:item.expiry="{ item }">
    {{ item.expiry.until }}
    <v-icon :title="item.expiry.date.format('DD/MM/YYYY')">mdi-information-outline</v-icon>
  </template>

</v-data-table>

As you can see I currently have my buttons in the toolbar, along with the table name and a search bar.

I'm using Vuetify: 2.0.0. Let me know if I need to include any other information and I'll gladly update my question.

Answer 1

There is markup for body.append here: https://codepen.io/pen/?&editable=true&editors=101 taken from the page you linked to, the point is it should look like this: <template v-slot:body.append>...

Answer 2

I faked the buttons with adding v-card under the data table. check my pen

https://codepen.io/rveruna/pen/jONewxj

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <template>
          <v-data-table
            :headers="headers"
            :items="desserts"
            :items-per-page="5"
            class="elevation-1"
          ></v-data-table>
        </template>
        <v-card style="border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0px 5px 1px -2px rgba(0, 0, 0, 0.2), 0px 5px 2px 0px rgba(0, 0, 0, 0.14), 0px 5px 5px 0px rgba(0, 0, 0, 0.12);">
          <v-card-text>
            <div style="position: absolute; top: -42px" class="body-1 font-weight-bold">
              <v-icon class="mdi-18px roundedIcon success" style="color: white">mdi-check</v-icon> Selected domains:
            </div>
            <template>
              <v-chip class="mr-2 mb-2" close>blb</v-chip>
            </template>
            <template>
              <v-chip class="mb-2" close>and bla more</v-chip>
              </template>
          </v-card-text>
          <v-card-actions class="actionsDetails" style="background: rgb(249, 249, 249); border-top-left-radius: 0; border-top-right-radius: 0">

          <v-spacer></v-spacer>
          <v-btn text normal >Export All</v-btn>

          </v-card-actions>

        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

Answer 3

Using the suggestion of @MarcelusTrojahn, I've used a <v-data-table /> inside a <v-card>. The table would be enclosed in the <v-card-text> and the buttons container at the end

For instance :

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-card>
        <v-card-text class="table-container">
          <v-data-table
            :headers="headers"
            :items="desserts"
            :items-per-page="5"
            class="elevation-1"
          ></v-data-table>
        </v-card-text>
        <div class="buttons-container">
          <v-btn color="primary" class="footerBtn">
            <v-icon right dark style='margin-right: 5px;'>mdi-chevron-left</v-icon>Prev
          </v-btn>
          <span class="footerBtn pageCount">{{ `${currentPageFrom} - ${currentPageTo}` }}</span>
          <v-btn color="primary" class="footerBtn">Next<v-icon right dark>mdi-chevron-right</v-icon></v-btn>
        </div>
      </v-card> 
    </v-content>
  </v-app>
</div>

See the codepen attached : https://codepen.io/bertrandmartel/pen/mdJYaBO