vue-flexi-table

A flexible table component for Vue.js based on bulma

This component tries to be flexible by making stuff modular so you can implement your own template, methods, whatnot. Don't worry if you don't know how to or if you are just lazy making one,this package has a default implementations by providing a mixin.

Demo

The Live demo can be found here: https://xxrockonxx.github.io/vue-flexi-table/demo/index.html

Usage

<template>
  <flexi-table-tools label="customer" link="/admin/customers/create" v-on:search="onSearch"></flexi-table-tools>

  <flexi-table :columns="columns" :rows="dtRows" :query="query" :search="searchOption" :page="dtPage" :perPage="dtPerPage">
    
    <!-- Customize a column by making a template. Its slot value is the `name` in the `columns` -->
    <template slot="address" scope="props">
      <td>
        <div>{{ props.value.address_1 }}</div>
        <div>{{ props.value.address_2 }}</div>
        <div>{{ props.value.city }}</div>
      </td>
    </template>

    <template slot="actions" scope="props">
      <td>
        <router-link :to="`${api}/${props.value}`" class="button is-small is-outlined is-warning"><i class="fa fa-pencil"></i></router-link>
        <button type="button" class="button is-small is-outlined is-danger" v-on:click="onDeleteClick"><i class="fa fa-trash"></i></button>
      </td>
    </template>
  </flexi-table>

  <div class="table-pagination">
    <div class="level">
      <div class="level-left"></div>
      <div class="level-right">
        <div class="level-item">
          <flexi-table-length-control v-on:change="dtLengthChange"></flexi-table-length-control>
        </div>

        <div class="level-item">
          <flexi-table-length
            :start="dtStart"
            :end="dtEnd"
            :total="dtTotalRecords"></flexi-table-length>
        </div>

        <div class="level-item">
          <flexi-table-pagination
            :totalPages="dtTotalPages"
            :currentPage="dtPage"
            :pages="dtPagination"
            v-on:prevClick="dtGoPrev"
            v-on:pageClick="dtGoPage"
            v-on:nextClick="dtGoNext"></flexi-table-pagination>
        </div>
      </div>
    </div>
</template>

import {dtMixins, Length, LengthControl, Pagination, Table, Tools} from 'vue-flexi-table/src'

export default {
  components: {
      'flexi-table': Table,
      'flexi-table-tools': Tools,
      'flexi-table-length': Length,
      'flexi-table-pagination': Pagination,
      'flexi-table-length-control': LengthControl
    },

    mixins: [dtMixins],
    
    data () {
      return {
        /* if you'll be using dtMixins, dtRows SHOULD be present */
        dtRows: [],

        columns: [
          { name: 'firstname', text: 'First Name' },
          { name: 'lastname', text: 'Last Name' },
          { name: 'phone', text: 'Phone' },
          { name: 'address', text: 'Address' },
          { name: 'actions', text: 'Actions' }
        ],

        query: '',

        searchOption: {
          server: false,
          settings: {
            fields: ['firstname', 'lastname', 'phone', 'address.address_1', 'address.address_2', 'address.city'],
            nesting: true
          }
        }
      }
    }
}

Components

Default components that comes with the package and their props

Table - The main component

Props	Type	Required	Default
rows	Array	true
columns	Object	true
query	String	false
search	Object	false
page	Number	true
perPage	Number	false	10

columns - name is the key in your rows. text is the label to be shown on the template.

search - Search settings should look like this:

{ server: false, settings: {} }

server by default is false

settings should look like: https://github.com/brianreavis/sifter.js/#api

Tools - A horizontal container that has search field on left side and create button on right. (Uses router-link)

Props	Type	Required
label	String	true
link	String	true

label - The label for the elements. (Search for label), (Create label)

link - Link for the create button.

Events	Payload
search	query

Pagination - Pagination buttons for navigating the table

Props	Type	Required
currentPage	Number	true
totalPages	Number	true
pages	Array	true

Events	Payload
pageClick	pageNumber
prevClick
nextClick

pages - An array contaning the page numbers. empty value means ellipsis. Example: ['',51,52,53,'',100]

Length Control - Controls the number of rows to be shown on each page

Events	Payload
change	rowLength

Length - Just shows how many record and what record is shown on the current page. Example: (1 - 10 of 50)

Props	Type	Required
start	Number	true
end	Number	true
total	Number	true

Contribution

You are welcome to contribute to this project. Just fork this and make a PR and I'll review it.