A Vue.js Component for Filterable and Paginated Tables

A Vue.js Component for Filterable and Paginated Tables

A VueJS plugin to manage data tables Allows for quick and easy setup of filterable, sortable, and paginated tables. Currently supports Vue.js ^2.4.

vuejs-datatable

A VueJS plugin to manage data tables

Allows for quick and easy setup of filterable, sortable, and paginated tables. Currently supports Vue.js ^2.4.

E2E testing over Travis realized using

πŸ‘‰ Browse the documentation πŸ“š πŸ‘‰ Check out the tutorials πŸ“š

Getting started

Install the package

To install this package, simply install vuejs-datatable with your favorite package manager:

# Using npm
npm install vuejs-datatable
# Using yarn
yarn add vuejs-datatable

Import the package

Use the ESM build

The ESM build (EcmaScript Module) implies that your target browsers supports ESM OR you use a bundler, like webpack, rollup.js or Parcel.

Import & register the DatatableFactory in Vue:

import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';

Vue.use( VuejsDatatableFactory );

Check out how to customize table types to see some usage of the DatatableFactory and the possible reasons not to use the default instance exported as VuejsDatatableFactory.

Use the IIFE build

The IIFE build (Immediately Invoked Function Expression) should be prefered only for small applications without bundlers, or if you privilegiate the use of a CDN.

In your HTML, load the IIFE build directly, if possible right before the closing </body> tag. You must make sure that the loading order is preserved, like below.

<body>
    <!-- All your page content... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js" defer></script>
    <script src="/dist/vuejs-datatable.js" defer></script>
    <script src="/myscript.js" defer></script>
</body>

The IIFE build exposes the DatatableFactory as the global VuejsDatatable. Check out how to customize table types to see some usage of the DatatableFactory.

Use the component

Use the component in your HTML or template:

<div id="vue-root">
    <datatable :columns="columns" :data="rows"></datatable>
</div>

Then pass in the columns and the data to your Vue instance:

new Vue({
    el: '#vue-root',
    data: {
        columns: [
            {label: 'id', field: 'id'},
            {label: 'Username', field: 'user.username', headerClass: 'class-in-header second-class'},
            {label: 'First Name', field: 'user.firstName'},
            {label: 'Last Name', field: 'user.lastName'},
            {label: 'Email', field: 'user.email'},
            {label: 'Address', representedAs: ({address, city, state}) => `${address}<br />${city}, ${state}`, interpolate: true}
        ],
        rows: [
            //...
            {
                id: 1,
                user: {
                    username: "dprice0",
                    firstName: "Daniel",
                    lastName: "Price",
                    email: "[email protected]"
                },
                address: "3 Toban Park",
                city: "Pocatello",
                state: "Idaho"
            }
            //...
        ]
    }
});

Customize the datatable

The DatatableFactory exposes several methods to allow you to add or modify other datatable-like components, with custom styles or behavior.

VuejsDatatable
    .registerTableType( 'my-awesome-table', tableType => {
        tableType
            .mergeSettings( /* ... */ )
            .setFilterHandler( /* ... */ )
            .setSortHandler( /* ... */ );
    } );

Documentation

Browse the full documentation at https://gerkindev.github.io/vuejs-datatable/.

Use a development version

Sometimes, you'll need to use a development version of the module. This allow you to modify source code, run tests, and build custom versions of the module.

Always existing branches are:

  • develop: Latest changes, not yet validated.
  • staging: Changes considered as stable and planned for next release.
  • master: Releases, stable versions.

You may use other branches (for features, hotfixes, etc etc). Check out the list of branches.

# First, clone the repo
# replace `my-branch` with the name of the branch you want to use
git clone https://github.com/GerkinDev/vuejs-datatable.git#my-branch
# Go to the repo directory
cd vuejs-datatable
# Install dependencies
npm install
# Run tests
npm run test
# Build the package
npm run build

Optionaly, link your local modules so you can use it in other modules.

You may need to run the following command as sudo

npm link

Attributions

Download Details:

Author: GerkinDev

Demo: https://gerkindev.github.io/vuejs-datatable/

Source Code: https://github.com/GerkinDev/vuejs-datatable

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.