{"id":17110637,"url":"https://github.com/gerkindev/vuejs-datatable","last_synced_at":"2025-04-07T23:08:53.078Z","repository":{"id":38954290,"uuid":"71800140","full_name":"GerkinDev/vuejs-datatable","owner":"GerkinDev","description":"A Vue.js component for filterable and paginated tables.","archived":false,"fork":false,"pushed_at":"2025-03-20T03:30:17.000Z","size":3794,"stargazers_count":172,"open_issues_count":36,"forks_count":44,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T22:19:55.258Z","etag":null,"topics":["datatable","filtering","pagination","sorting","table","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://gerkindev.github.io/vuejs-datatable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GerkinDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-24T14:57:15.000Z","updated_at":"2024-05-26T09:50:18.000Z","dependencies_parsed_at":"2022-09-10T01:51:11.505Z","dependency_job_id":"73e483e1-0d84-4971-bd52-23d999af6690","html_url":"https://github.com/GerkinDev/vuejs-datatable","commit_stats":{"total_commits":285,"total_committers":14,"mean_commits":"20.357142857142858","dds":0.5087719298245614,"last_synced_commit":"a5af16604a7c59432f10ebe90d9c2dad53e729b8"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerkinDev%2Fvuejs-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerkinDev%2Fvuejs-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerkinDev%2Fvuejs-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerkinDev%2Fvuejs-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GerkinDev","download_url":"https://codeload.github.com/GerkinDev/vuejs-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744334,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatable","filtering","pagination","sorting","table","vue-components","vuejs"],"created_at":"2024-10-14T16:27:36.736Z","updated_at":"2025-04-07T23:08:53.057Z","avatar_url":"https://github.com/GerkinDev.png","language":"TypeScript","readme":"# vuejs-datatable\n\n\u003e A VueJS plugin to manage data tables\n\nAllows for quick and easy setup of filterable, sortable, and paginated tables. Currently supports Vue.js ^2.4.\n\n[![npm](https://img.shields.io/npm/dm/vuejs-datatable.svg)](https://www.npmjs.com/package/vuejs-datatable)\n[![npm version](https://badge.fury.io/js/vuejs-datatable.svg)](https://www.npmjs.com/package/vuejs-datatable)\n[![Renovate](https://badges.renovateapi.com/github/GerkinDev/vuejs-datatable)](https://renovatebot.com/)\n[![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)\n[![Build Status](https://travis-ci.com/GerkinDev/vuejs-datatable.svg?branch=master)](https://travis-ci.com/GerkinDev/vuejs-datatable)\n[![Maintainability](https://api.codeclimate.com/v1/badges/824c7a7811b5fc8e39d7/maintainability)](https://codeclimate.com/github/GerkinDev/vuejs-datatable/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/824c7a7811b5fc8e39d7/test_coverage)](https://codeclimate.com/github/GerkinDev/vuejs-datatable/test_coverage)\n[![GitHub commit activity the past year](https://img.shields.io/github/commit-activity/y/GerkinDev/vuejs-datatable)](https://github.com/GerkinDev/vuejs-datatable)\n[![license](https://img.shields.io/github/license/GerkinDev/vuejs-datatable.svg)](https://github.com/GerkinDev/vuejs-datatable/blob/master/LICENSE)\n\nE2E testing over Travis realized using\n\n[\u003cimg src=\"https://i1.wp.com/www.diogonunes.com/blog/wp-content/uploads/2016/07/browserstack-logo.png?resize=490%2C105\" height=\"105.6\" width=\"490.1\" class=\"img-responsive\"/\u003e](https://www.browserstack.com/)\n\n[:point_right: Browse the documentation :books:](https://gerkindev.github.io/vuejs-datatable/)\n[:point_right: Check out the tutorials :books:](https://gerkindev.github.io/vuejs-datatable/tutorials/index.html)\n\n---\n\n## Getting started\n\n### Install the package\n\nTo install this package, simply install `vuejs-datatable` with your favorite package manager:\n\n```sh\n# Using npm\nnpm install vuejs-datatable\n# Using yarn\nyarn add vuejs-datatable\n```\n\n### Import the package\n\n#### Use the ESM build\n\n\u003e 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/).\n\nImport \u0026 register the [*DatatableFactory*](https://gerkindev.github.io/vuejs-datatable/DatatableFactory.html) in Vue:\n\n```js\nimport Vue from 'vue';\nimport { VuejsDatatableFactory } from 'vuejs-datatable';\n\nVue.use( VuejsDatatableFactory );\n```\n\nCheck 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`.\n\n#### Use the IIFE build\n\n\u003e 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*.\n\nIn your HTML, load the *IIFE* build directly, if possible right before the closing `\u003c/body\u003e` tag. You **must** make sure that the loading order is preserved, like below.\n\n```html\n\u003cbody\u003e\n    \u003c!-- All your page content... --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js\" defer\u003e\u003c/script\u003e\n    \u003cscript src=\"/dist/vuejs-datatable.js\" defer\u003e\u003c/script\u003e\n    \u003cscript src=\"/myscript.js\" defer\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nThe *IIFE* build exposes the [*DatatableFactory*](https://gerkindev.github.io/vuejs-datatable/DatatableFactory.html) as the global `VuejsDatatable`. Check out [*how to customize table types*](#customize-the-datatable) to see some usage of the `DatatableFactory`.\n\n### Use the component\n\nUse the component in your HTML or template:\n\n```html\n\u003cdiv id=\"vue-root\"\u003e\n    \u003cdatatable :columns=\"columns\" :data=\"rows\"\u003e\u003c/datatable\u003e\n\u003c/div\u003e\n```\n\nThen pass in the columns and the data to your Vue instance:\n\n```js\nnew Vue({\n    el: '#vue-root',\n    data: {\n        columns: [\n            {label: 'id', field: 'id'},\n            {label: 'Username', field: 'user.username', headerClass: 'class-in-header second-class'},\n            {label: 'First Name', field: 'user.firstName'},\n            {label: 'Last Name', field: 'user.lastName'},\n            {label: 'Email', field: 'user.email'},\n            {label: 'Address', representedAs: ({address, city, state}) =\u003e `${address}\u003cbr /\u003e${city}, ${state}`, interpolate: true}\n        ],\n        rows: [\n            //...\n            {\n                id: 1,\n                user: {\n                    username: \"dprice0\",\n                    firstName: \"Daniel\",\n                    lastName: \"Price\",\n                    email: \"dprice0@blogs.com\"\n                },\n                address: \"3 Toban Park\",\n                city: \"Pocatello\",\n                state: \"Idaho\"\n            }\n            //...\n        ]\n    }\n});\n```\n\n### Customize the datatable\n\nThe DatatableFactory exposes several methods to allow you to add or modify other `datatable`-like components, with [custom styles](https://gerkindev.github.io/vuejs-datatable/tutorial-custom-theme.html) or [behavior](https://gerkindev.github.io/vuejs-datatable/tutorial-ajax-handler.html).\n\n```js\nVuejsDatatable\n    .registerTableType( 'my-awesome-table', tableType =\u003e {\n        tableType\n            .mergeSettings( /* ... */ )\n            .setFilterHandler( /* ... */ )\n            .setSortHandler( /* ... */ );\n    } );\n```\n\n## Documentation\n\nBrowse the full documentation at [https://gerkindev.github.io/vuejs-datatable/](https://gerkindev.github.io/vuejs-datatable/).\n\n## Use a development version\n\nSometimes, 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.\n\nAlways existing branches are:\n\n* [`develop`](https://github.com/GerkinDev/vuejs-datatable/tree/develop): Latest changes, not yet validated.\n* [`staging`](https://github.com/GerkinDev/vuejs-datatable/tree/staging): Changes considered as stable and planned for next release.\n* [`master`](https://github.com/GerkinDev/vuejs-datatable/tree/master): Releases, stable versions.\n\nYou may use other branches (for features, hotfixes, etc etc). Check out the [list of branches](https://github.com/GerkinDev/vuejs-datatable/branches).\n\n```sh\n# First, clone the repo\n# replace `my-branch` with the name of the branch you want to use\ngit clone https://github.com/GerkinDev/vuejs-datatable.git#my-branch\n# Go to the repo directory\ncd vuejs-datatable\n# Install dependencies\nnpm install\n# Run tests\nnpm run test\n# Build the package\nnpm run build\n```\n\nOptionaly, [link your local modules](https://docs.npmjs.com/cli/link.html) so you can use it in other modules.\n\n\u003e You may need to run the following command as `sudo`\n\n```sh\nnpm link\n```\n\n## Attributions\n\n* [Patrick Stephan](https://www.patrickstephan.me): Original author\n* [Alexandre Germain](https://github.com/GerkinDev/): Current maintainer\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerkindev%2Fvuejs-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerkindev%2Fvuejs-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerkindev%2Fvuejs-datatable/lists"}