How to add button in every table row? - VueJS 2.5 - good-table

Question

I'm trying to add a button to replace the words "View Details" within the table cell for every row. I've tried implementing a template and every time I save changes, the table returns no results which is telling me something is broken.

This is what the table currently looks like:

Here is my code:

  <vue-good-table
                :columns="columns"
                :rows="rows"
                :globalSearch="true"
                :paginate="true"
                :responsive="true"
                :lineNumbers="false"
                class="styled"
                styleClass="table">
                 <template slot="table-row" slot-scope="props">
                      <span v-if="props.column.field == 'Details'">
                        <button type="button" class="btn btn-primary">
                        View Details
                        </button>
                      </span>
                      <span v-else>
                          {{props.formattedRow[props.column.field]}}
                      </span>
                  </template>
              </vue-good-table>

. . . .

  columns: [
        {
          label: "Date",
          field: "date",
          filterable: true
        },
        {
          label: "Event",
          field: "event",
          filterable: true
        },
        {
          label: "Details",
          field: "details",
          filterable: true
        }
      ],
      rows: [
        {
          event: "Thanksgiving Barrel Events",
          details: "View Event",
          date: "11/28/2018 at 6:34 PM"
        },
        {
          event: "Christmas Barrel Events",
          details: "View Event",
          date: "12/25/2018 at 6:34 PM"
        },

Karolis Stakėnas · Answer 1 · 2019-02-25T11:04:09.110

2

You've done everything right, except You left a typo in where You check if the column's field is "Details", while its 'details' (lowercase).

with strings, 'Details' does not equal to 'details' in javascript, as strings are case sensitive, never forget that.

So working code looks like this:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :globalSearch="true"
  :paginate="true"
  :responsive="true"
  :lineNumbers="false"
  class="styled"
  styleClass="table">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'details'">
      <button type="button" class="btn btn-primary">
      View Details
      </button>
    </span>
    <span v-else>
        {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

Here's a working codepen: https://codesandbox.io/s/nnpqpn6ll4?fontsize=14

edited Feb 25 '19 at 11:04

answered Feb 25 '19 at 08:22

Karolis Stakėnas

758
9
29

still getting "no data available for this table" I've attached an error log picture to the bottom of my post – BobbyWidThaTool Feb 25 '19 at 08:33
What is the current version of the vue-good-table plugin? Can You try updating it to the newest version and see if the problem still exists? – Karolis Stakėnas Feb 25 '19 at 10:46
I've edited my answer with a codepen example where the plugin is working perfectly with Your markup with the newest version installed. I can already see You're using V1 version of the plugin, so updating to latest (@2.16.2) should fix Your problem. – Karolis Stakėnas Feb 25 '19 at 10:58

How to add button in every table row? - VueJS 2.5 - good-table

1 Answers1