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

Name	Description	Type	Values	Default
backend-pagination	Use asynchronous data fetching from any API or backend	boolean	-	false
backend-sorting	Use asynchronous data sorting from any API or backend	boolean	-	false
current-lang	Current lang of the table	string	ISO 639-1	en
current-page	Current page showed when initializing the table	number	-	1
data	Data passed to the table	Object[]	required	-
default-sort-direction	Sort direction by default	string	asc OR desc	asc
details	All opened detail slots by default	number[]	-	[]
enable-details	Enable detail slots for each row	boolean	-	false
headers	Headers of the table	Object[]	required	-
is-sortable	Allow columns to be sorted	boolean	-	true
langs	Extra langs added by the user (see related section)	Object	-	{}
paginated	Enable pagination	boolean	-	true
selectable-columns	Allow columns to be selected	boolean	-	false
selectable-rows	Allow rows to be selected	boolean	-	false
selected-columns	Selected columns when initializing the table	number[]	-	[]
selected-rows	Selected rows when initializing the table	number[]	-	[]
total	Total number of items (for pagination)	number	required	-

Slots

Slot name	Description	Props (if scoped)
default	Default slot rendered for each cell	field: string, row: number, column: number, header: Object, data: any
details	Row detail (collapsible)	row: number

Events

Event name	Description	Parameters
sort	Triggered when a sort is requested	header: Object, currentSortDirection: asc OR desc
next-card	Triggered in mobile mode when the next item is requested	oldCard: number, newCard: number
previous-card	Triggered in mobile mode when the previous item is requested	oldCard: number, newCard: number
details-open	Triggered when a detail slot is opened	index: number
details-close	Triggered when a detail slot is closed	index: number
selected-row	Triggered when a row is selected or de-selected	selection: number[], newlySelectedRow: number (-1 if all is selected), isDeselected: boolean
selected-column	Triggered when a column is selected or de-selected	selection: number[], newlySelectedRow: number (-1 if all is selected), isDeselected: boolean
page-change	Triggered the current page change	oldPage: number, newPage: number

Collaborators 👩🏻‍💻👨🏼‍💻

Superpitch team

License

Code released under MIT license.

Copyright (c) 2019, Superpitch.