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 · Accepted Answer · 2019-02-25 11:04:09Z

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, 2019 at 11:04

answered Feb 25, 2019 at 8:22

Karolis Stakėnas

7589 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BobbyWidThaTool Over a year ago

still getting "no data available for this table" I've attached an error log picture to the bottom of my post

Karolis Stakėnas Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related