Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vuetable-2

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vuetable-2 - npm Package Compare versions

Comparing version 2.0.0-alpha.22 to 2.0.0-beta.1

dist/static/js/app.9db1018e3de50ced1bc0.js

2

package.json
{
"name": "vuetable-2",
"version": "2.0.0-alpha.22",
"version": "2.0.0-beta.1",
"description": "Datatable component for Vue 2.x",

@@ -5,0 +5,0 @@ "main": "dist/vuetable-2.js",

@@ -1,2 +0,2 @@

[![npm](https://img.shields.io/npm/v/vuetable-2.svg)](https://www.npmjs.com/package/vuetable-2)
[![npm](https://img.shields.io/npm/v/vuetable-2/next.svg)](https://www.npmjs.com/package/vuetable-2)
[![npm](https://img.shields.io/npm/dt/vuetable-2.svg)](https://www.npmjs.com/package/vuetable-2)

@@ -7,49 +7,31 @@ [![npm](https://img.shields.io/npm/l/vuetable-2.svg?maxAge=2592000)](https://github.com/ratiw/vuetable-2/blob/master/LICENSE)

### Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x
> Warning!
>
> This branch is the beta release of v2.0 of Vuetable-2
>
> - If you're looking for Vuetable that works with Vue 1.x, please go [here](https://github.com/ratiw/vue-table)
>
> - If you're looking for the stable release of Vuetable-2, please go [here](https://github.com/ratiw/vuetable-2)
>
If you're looking for the version that's working with Vue 1.x, please go to [`vuetable`](https://github.com/ratiw/vue-table) repo.
# Documentation and Tutorial
---
You can find documentation for v2.0 of Vuetable-2 [here](#)
### Documentation and Tutorial
The tutorial for v2.0 is in the work, so you'll have to wait until I can find the time to finish it, sorry.
Documentation is still under development, but you can view it at [https://ratiw.github.io/vuetable-2](https://ratiw.github.io/vuetable-2). Thanks to @cristijora for the help.
# Sample Codes
Meanwhile, check out
- the [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/wiki)
with follow-along project [here](https://github.com/ratiw/vuetable-2-tutorial). It should be enough to get you started.
I've created a bunch of examples in the [CodeSandbox](https://codesandbox.io/u/ratiw/sandboxes), please have a look.
- [Sample project](https://github.com/ratiw/vuetable-2-with-laravel-5.4) using Vuetable-2 with Laravel 5.4 and Laravel-Mix
If you any question, please post your questions in the "Issues" section of [this Q&A repo](https://github.com/vuetable/Q-and-A/issues). Be sure to put the link to the appropriate CodeSandbox in question, or the one that you forked.
If you've been using Vuetable for Vue 1.x before, checkout [what's changed](https://github.com/ratiw/vuetable-2/blob/master/changes.md) for info on changes from Vuetable for Vue 1.x and the [upgrade guide](https://github.com/ratiw/vuetable-2/blob/master/upgrade-guide.md) on how you could upgrade from Vuetable for Vue 1.x.
You can now make use of Vue's scoped slot using the new `__slot` special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component.
# Breaking Changes
## v2.0.0-beta.1
- Please see the release note.
Use scoped slot in parent when defining the actions [Vue Doc for scopped Slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
e.g.
```html
<template slot="actions" scope="props">
<div class="table-button-container">
<button class="btn btn-default" @click="onClick('edit-item', props.rowData)"><i class="fa fa-edit"></i> View</button>&nbsp;&nbsp;
<button class="btn btn-danger" @click="onClick('delete-item', props.rowData)"><i class="fa fa-remove"></i> Edit</button>&nbsp;&nbsp;
</div>
</template>
```
the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)
The original functionality still works
# Breaking Changes
## v1.6.0
- The `icons` prop of VuetablePagination is now moved into the `css` prop object. See this [codepen](https://codepen.io/ratiw/pen/GmJayw).
# Example Code
- Clone the project
- Go into the cloned directory
- `npm install`
- `npm run dev`
- Open browser to `http://localhost:8080`
# Usage

@@ -59,16 +41,18 @@ ## NPM

```shell
npm install vuetable-2 --save-dev
npm install vuetable-2@next --save-dev
```
## Javascript via CDN
Thanks to @cristijora for providing helps on this.
> Note
>
> This has not been test thoroughly in this beta version, and any help would be much appreciated.
```html
// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>
<script src="https://unpkg.com/vuetable-2@next"></script>
Vue.use(Vuetable)
```
This is demonstrated in this [jsfiddle](http://jsfiddle.net/CristiJ/z11fe07p/1318/).

@@ -79,5 +63,5 @@ The `.use` from above will register all the components globally.

Vue.component("vuetable", Vuetable);
Vue.component("vuetable-pagination", VueTablePagination);
Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
Vue.component("vuetable-pagination", VuetablePagination);
Vue.component("vuetable-pagination-dropdown", VuetablePaginationDropDown);
Vue.component("vuetable-pagination-info", VuetablePaginationInfo);
}

@@ -88,6 +72,6 @@ ```

```javascript
VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown
Vuetable: Vuetable.default/Vuetable.Vuetable,
VuetablePagination: Vuetable.VuetablePagination,
VuetablePaginationInfo: Vuetable.VuetablePaginationInfo,
VuetablePaginationDropdown: Vuetable.VuetablePaginationDropdown
```

@@ -97,14 +81,5 @@

# Contributions
Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome.
Any contribution to the code must be done to the `next` branch.
> __Note__
> For any bug fix, the PR should be forked from the `master` branch. And for any suggestion or additional feature, the PR should be forked from the `develop` branch, where it can be integrated and rolled out in the next release.
>
> If you are not sure, please ask by openning a new issue.
However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.
Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.
# License
Vuetable is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc