Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gerkindev/vuejs-datatable

A Vue.js component for filterable and paginated tables.
https://github.com/gerkindev/vuejs-datatable

datatable filtering pagination sorting table vue-components vuejs

Last synced: about 1 month ago
JSON representation

A Vue.js component for filterable and paginated tables.

Host: GitHub
URL: https://github.com/gerkindev/vuejs-datatable
Owner: GerkinDev
License: mit
Created: 2016-10-24T14:57:15.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2024-09-09T01:34:12.000Z (2 months ago)
Last Synced: 2024-09-09T02:44:52.237Z (2 months ago)
Topics: datatable, filtering, pagination, sorting, table, vue-components, vuejs
Language: TypeScript
Homepage: https://gerkindev.github.io/vuejs-datatable/
Size: 3.6 MB
Stars: 172
Watchers: 12
Forks: 44
Open Issues: 35
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # 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.

[![npm](https://img.shields.io/npm/dm/vuejs-datatable.svg)](https://www.npmjs.com/package/vuejs-datatable)

[![npm version](https://badge.fury.io/js/vuejs-datatable.svg)](https://www.npmjs.com/package/vuejs-datatable)

[![Renovate](https://badges.renovateapi.com/github/GerkinDev/vuejs-datatable)](https://renovatebot.com/)

[![Known Vulnerabilities](https://snyk.io/test/github/GerkinDev/vuejs-datatable/badge.svg?targetFile=package.json)](https://snyk.io/test/github/GerkinDev/vuejs-datatable?targetFile=package.json)

[![Build Status](https://travis-ci.com/GerkinDev/vuejs-datatable.svg?branch=master)](https://travis-ci.com/GerkinDev/vuejs-datatable)

[![Maintainability](https://api.codeclimate.com/v1/badges/824c7a7811b5fc8e39d7/maintainability)](https://codeclimate.com/github/GerkinDev/vuejs-datatable/maintainability)

[![Test Coverage](https://api.codeclimate.com/v1/badges/824c7a7811b5fc8e39d7/test_coverage)](https://codeclimate.com/github/GerkinDev/vuejs-datatable/test_coverage)

[![GitHub commit activity the past year](https://img.shields.io/github/commit-activity/y/GerkinDev/vuejs-datatable)](https://github.com/GerkinDev/vuejs-datatable)

[![license](https://img.shields.io/github/license/GerkinDev/vuejs-datatable.svg)](https://github.com/GerkinDev/vuejs-datatable/blob/master/LICENSE)

E2E testing over Travis realized using

[](https://www.browserstack.com/)

[:point_right: Browse the documentation :books:](https://gerkindev.github.io/vuejs-datatable/)

[:point_right: Check out the tutorials :books:](https://gerkindev.github.io/vuejs-datatable/tutorials/index.html)

---

## Getting started

### Install the package

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

```sh

# Using npm

npm install vuejs-datatable

# Using yarn

yarn add vuejs-datatable

```

### Import the package

#### Use the ESM build

> The [*ESM*](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358) build (**E**cma**S**cript **M**odule) implies that your target browsers supports *ESM* **OR** you use a bundler, like [*webpack*](https://webpack.js.org/), [*rollup.js*](https://rollupjs.org/guide/en) or [*Parcel*](https://parceljs.org/).

Import & register the [*DatatableFactory*](https://gerkindev.github.io/vuejs-datatable/DatatableFactory.html) in Vue:

```js

import Vue from 'vue';

import { VuejsDatatableFactory } from 'vuejs-datatable';

Vue.use( VuejsDatatableFactory );

```

Check out [*how to customize table types*](#customize-the-datatable) to see some usage of the [*DatatableFactory*](https://gerkindev.github.io/vuejs-datatable/DatatableFactory.html) and the possible reasons not to use the default instance exported as `VuejsDatatableFactory`.

#### Use the IIFE build

> The [*IIFE*](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) build (**I**mmediately **I**nvoked **F**unction **E**xpression) 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 `