Buefy/Vue Table

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

  <b-table
    :data="isEmpty ? [] : data"
    striped>

    <template slot-scope="props">
      <b-table-column field="id" label="ID" class="is-width-1" numeric>
          {{ props.row.id }}
      </b-table-column>

      <b-table-column field="first_name" label="First Name" class="is-width-3">
          {{ props.row.first_name }}
      </b-table-column>

      <b-table-column field="last_name" label="Last Name">
          {{ props.row.last_name }}
      </b-table-column>

      <b-table-column field="date" label="Date" centered>
          <span class="tag is-success">
              {{ new Date(props.row.date).toLocaleDateString() }}
          </span>
      </b-table-column>

      <b-table-column label="Gender">
          {{ props.row.gender }}
      </b-table-column>

      <b-table-column label="Action" class="is-width-1">
          <button class="button is-primary is-small">
            Edit
          </button>
      </b-table-column>
    </template>

    <template slot="empty">
      <section class="section">
          <div class="content has-text-grey has-text-centered">
              <p>
                  <b-icon
                      icon="emoticon-sad"
                      size="is-large">
                  </b-icon>
              </p>
              <p>Nothing here.</p>
          </div>
      </section>
    </template>

  </b-table>
  
</div>

SCSS

@for $i from 1 through 12 {
  .is-width-#{$i} {
    width: percentage($i / 12)
  }
}

JavaScript

const example = {
    data() {
        const data = [
            { 'id': 1, 'first_name': 'Jess', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
            { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
            { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
            { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
            { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' }
        ]

        return {
            data,
            isEmpty: false
        }
    }
}

const app = new Vue(example)

app.$mount('#app')