# @parthfaladu/vue-js-datatable

> A Vue.js wrapper component for jquery datatable.

Latest version **1.1.6** (published 2020-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @parthfaladu/vue-js-datatable
pnpm add @parthfaladu/vue-js-datatable
yarn add @parthfaladu/vue-js-datatable
bun add @parthfaladu/vue-js-datatable
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-08-29 |
| First published | 2020-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 29.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Parth Faladu |
| Maintainers | parthpatel003 |
| Keywords | vue, vue-js-datatable, vue js datatable, datatable, datatable.net, table |

## Links

- npm: https://www.npmjs.com/package/@parthfaladu/vue-js-datatable
- Repository: https://github.com/Parthfaladu/vue-js-datatable
- Homepage: https://github.com/Parthfaladu/vue-js-datatable#readme
- Issues: https://github.com/Parthfaladu/vue-js-datatable/issues
- npm.io page: https://npm.io/package/@parthfaladu/vue-js-datatable

## Dependencies (3)

- [jquery](https://npm.io/package/jquery.md) 3.4.1
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [datatables.net](https://npm.io/package/datatables.net.md) ^1.10.21

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2020-08-29
- 1.1.5 — 2020-08-27
- 1.1.4 — 2020-08-26
- 1.1.3 — 2020-08-24
- 1.1.2 — 2020-08-19
- 1.1.1 — 2020-08-19
- 1.1.0 — 2020-08-19
- 1.0.5 — 2020-08-16
- 1.0.4 — 2020-08-16
- 1.0.3 — 2020-08-16
- 1.0.2 — 2020-08-02
- 1.0.1 — 2020-08-02
- 1.0.0 — 2020-08-02

## README

# vue-js-datatable
[![npm version](https://badge.fury.io/js/%40parthfaladu%2Fvue-js-datatable.svg)](https://badge.fury.io/js/%40parthfaladu%2Fvue-js-datatable)

`vue-js-datatable` is wrapper vue package of `datatables.net`

## Installation
```
npm install --save @parthfaladu/vue-js-datatable
```
Or using yarn
```
yarn add @parthfaladu/vue-js-datatable -dev
```

For Installing plugin import `vue-js-datatable` in your component page.

```js
//foo.vue
import VueJsDatatable from "@parthfaladu/vue-js-datatable";
export default {
  components: {
    VueJsDatatable,
  },
}
```

### Note

Please note that this package depends on `jQuery` and `jquery.dataTables.js`, but you won't need to add it to your project manually, `vue-js-datatable` will handle this for you automatically if this dependencies are not detected.


### CSS
For styling of the table import datatable css file.


## Basic Usage

You can pass an array of fullclendar objects through the props

```html
<VueJsDatatable :url="url" type="post" :columns="columns" @gaction="onAction">
    <th>ID</th>
    <th>name</th>
    <th>City</th>
    <th>Action</th>
</VueJsDatatable>
...
<script>
import VueJsDatatable from '@parthfaladu/vue-js-datatable';
...
  components: {
	VueJsDatatable,
  },
  data() {
    return {
        columns: [
          {data:'id', name:'id' , width:"100px"},
          {data:'name', name:'name' , width:"300px"},
          {data:'city', name:'city' , width:"200px"},
          {data:(data) => {
		return "<button class='btn btn-outline-alternate' data-g-action='view' data-g-actiondata="+data.id+">Edit</button>";
	  }, name:'action', width:"150px"}
	],
	url: 'https://example.com/api/v1/get/user'
    }
  },
  ...
  methods: {
    onAction(action) {
	if(action.action === 'view') {
		console.log('view button click.');
	}
    }
  }
...
</script>
```
### Props

| Name                  | Type       | Default        | Description                                                                                                                 |
| --------------------- | ---------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- |
| columns               | `Array`    | []             | Table all columns                                                                                                       |
| url                   | `String`   | null           | Ajax request url
| type                  | `String`   | 'GET'          | Ajax request type
| searching             | `Boolean`  | true           | Feature control search (filtering) abilities
| lengthChange          | `Boolean`  | true           | Feature control the end user's ability to change the paging display length of the table
| paging                | `Boolean`  | true           | Enable or disable table pagination
| ordering              | `Boolean`  | true           | Feature control ordering (sorting) abilities in DataTables
| className             | `String`   | ''             | Table class names
| serverSide            | `Boolean`  | true           | Feature control DataTables' server-side processing mode
| headers               | `Object`   | {}             | Ajax request headers
| order                 | `Array`    | []             | Initial order (sort) to apply to the table


### Events

| Name     | Description               |
| -------- | -------------------------------------------------------------------------------------------------- |
| gaction  |  In button define `data-g-action='view'` attribute and on button click this event will be emitted  |

---
_Source: https://npm.io/package/@parthfaladu/vue-js-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._