vuex-table v2.0.0

Vuex-table

Vuex-table is a Vue component created in order to easily fit in any Vue (even Vuex or Typescript) project. It consists on a table representation of informations whose data can be provided both from frontend or backend.

NEW ! Vuex-table is now coded on Vue.js and Typescript (see Documentation)

Features ⚙

• Sorting Rows can be sorted according to column field (ex. sorting names alphabetically )

• Selection

  Rows can checked one by one or all at once by clicking on checkbox.

  

• Search

  Rows which match with user input in searchbar will be displayed, so that user can easily find the information he/she is looking for.

  

• Pagination

  For better browsing on data, a maximum number of rows is displayed and others can be shown just by changing page.

  

• Show/Hide details

  Each row may contain details that users can show and hide by clicking on the icon.

  

• Show/Hide columns

  Each column can be hidden or shown by clicking on the appropriate checkbox.

  

• Responsive

  Vuex-table is responsive, with simple and intuitive mobile User Experience.

  

Language Support (i18n)

Vuex-table is conceived to be translated in all languages. In order to properly set your default language you need the following elements:

• ISO 639-1 code in lowercase of the language (i.e. en for English, fr for French, etc)
• A script or JSON containing all translations for each language you'd like to add

Example (for setting German):

// externalLangs.js 

export default {
    "de":
        {
            "search": "Geben Sie Ihren Suchbegriff ein", 
            "previous": "Vorheriges Item", 
            "next": "Nächstes Item"
        }      
    } 

Then you can change your default language like this

import ExternalVuexTableLangs from '../langs/externalLangs.js;

<vuex-table current-lang="de" :langs='ExternalVuexTableLangs' />

Documentation 📔

Documentation is in the docs directory. You can find here online documentation.

Quick start 🚀

Pss...it's easy! 😎

Install

npm install --save vuex-table

or

yarn add vuex-table

To install dependencies

npm install

Import

import Vue from 'vue';
import VuexTable from 'vuex-table';
 
Vue.use(VuexTable);

Example

<template>
    <vuex-table
        :headers="state.headers"
        :data="state.data"
        :selectable-columns="true"
        :selected-columns.sync="state.selectedColumns"
        :selected-rows.sync="state.selectedRows"
        :enable-details="true"
        :items-per-page="state.itemsPerPage"
        :current-page.sync ="state.currentPage"
    >
        <template slot-scope="props">
             {{props.data}}
        </template>
        <template slot="details" slot-scope="props">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur cupiditate deserunt eligendi eveniet iste iure, labore minus natus nostrum numquam pariatur placeat porro quia repellat veniam vero voluptatem voluptates.</span>
        </template>
    </vuex-table>
</template>

API

Properties

Slots

Events

Collaborators 👩🏻‍💻👨🏼‍💻

Superpitch team

License

Code released under MIT license.

Copyright (c) 2019, Superpitch.