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: 3 months 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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-20T03:30:17.000Z (4 months ago)
- Last Synced: 2025-03-31T22:19:55.258Z (3 months ago)
- Topics: datatable, filtering, pagination, sorting, table, vue-components, vuejs
- Language: TypeScript
- Homepage: https://gerkindev.github.io/vuejs-datatable/
- Size: 3.62 MB
- Stars: 172
- Watchers: 11
- Forks: 44
- Open Issues: 36
-
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.
[](https://www.npmjs.com/package/vuejs-datatable)
[](https://www.npmjs.com/package/vuejs-datatable)
[](https://renovatebot.com/)
[](https://snyk.io/test/github/GerkinDev/vuejs-datatable?targetFile=package.json)
[](https://travis-ci.com/GerkinDev/vuejs-datatable)
[](https://codeclimate.com/github/GerkinDev/vuejs-datatable/maintainability)
[](https://codeclimate.com/github/GerkinDev/vuejs-datatable/test_coverage)
[](https://github.com/GerkinDev/vuejs-datatable)
[](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 `