About

Mix Table for Vue.js 2

Installation

Install via NPM

npm install v-mix-table

Example

<mix-table :data="data" ref="mixtable" @mixtable:fetch="fetch">
    <mix-table-toolbar slot="mix-table-toolbar" style="width:100%">
      <div class="form-group text-left">
        <button class="btn btn-outline btn-primary" v-on:click="add">Add new</button>
      </div>
    </mix-table-toolbar>


    <mix-table-column data-field="_id" type="checkbox" width="40px" class="text-center" dataClass="text-center" label="#"></mix-table-column>
    <mix-table-column data-field="www" label="Host"></mix-table-column>
    <mix-table-column data-field="vf" label="Verified" width="120px" class="text-center" dataClass="text-center"></mix-table-column>
    <mix-table-column data-field="df" label="Default" width="120px" class="text-center" dataClass="text-center" :format="isDefault"></mix-table-column>
    <mix-table-column data-field="_id" width="130px" label="Actions" type="slot" target="actions" class="text-center" dataClass="text-center"></mix-table-column>

    <template slot="actions" scope="props">

          <button class="btn btn-xs btn-outline btn-success" v-on:click="action('verify', props.value,  props.row, props.index)"><i class="fa fa-check-circle-o"></i></button>
          <button class="btn btn-xs btn-outline btn-info" v-on:click="action('edit', props.value,  props.row, props.index)"><i class="fa fa-edit"></i></button>
          <button class="btn btn-xs btn-outline btn-danger" v-on:click="action('delete', props.value,  props.row, props.index)"><i class="fa fa-remove"></i></button>
    </template>

  </mix-table>