# miysortable-vue

> sortable in vue

Latest version **1.2.2** (published 2020-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install miysortable-vue
pnpm add miysortable-vue
yarn add miysortable-vue
bun add miysortable-vue
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-03-04 |
| First published | 2020-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 374.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | miy123 |
| Maintainers | miy123 |
| Keywords | sortable-vue |

## Links

- npm: https://www.npmjs.com/package/miysortable-vue
- Repository: https://github.com/miy123/miysortable-vue
- Homepage: https://github.com/miy123/miysortable-vue#readme
- Issues: https://github.com/miy123/miysortable-vue/issues
- npm.io page: https://npm.io/package/miysortable-vue

## 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.2.2 (latest) — 2020-03-04
- 1.2.1 — 2020-02-20
- 1.2.0 — 2020-02-15
- 1.1.0 — 2020-02-07
- 1.0.3 — 2020-02-06
- 1.0.1 — 2020-02-06
- 1.0.0 — 2020-02-06

## README

# miysortable-vue
sortable in vue

## Installation

```sh
$ npm i miysortable-vue
```

Then, use or import it
```js
// gobal register：
import VueSortable from 'miysortable-vue';
Vue.use(VueSortable)

// Or in your component：
import { sortable } from 'miysortable-vue';

export default {
  directives: {
    sortable
  },
  // ...your code...
}
```

## Usage

Add directives in your element
```html
<th v-sortable:{methodName}.tooltip.enum="{dataName}">name</th>
```

### Argument

#### {methodName}：The method will be call, after process finish.
#### {dataName}：The object in data you set.
#### tooltip：If you want show the tooltip of sort index, add this.
#### enum：The sort description will save int, if not ,save on string(desc/asc).

### Sample
Set data you want to save on, and method will be call
```html
<th v-sortable:search.tooltip="sort.name">name</th>
```
```js
 data() {
    return {
      sort: {} // the place you want to save 
    };
  },
  methods: {
    search() {
      // send this.sort to backend...
    }
  }
```

custom style of arrow and tooltip
```style
.vue-sortable {
  width: auto;
  height: auto;
  background-color: #fff;
  position: relative;
}

.vue-sortable .b-down {
  border-color: #000000 #fff #fff;
  border-style: solid;
  border-width: 4px;
  position: absolute;
  top: 7px;
}

.vue-sortable .b-up {
  border-color: #fff #fff #000000;
  border-style: solid;
  border-width: 4px;
  position: absolute;
  top: 7px;
}

.vue-sortable .tooltiptext {
  font-size: 1px;
  left: 5px;
  top: -9px;
  width: 15px;
  background-color: rgb(82, 72, 72);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 1px 0;

  position: absolute;
  z-index: 1;
}
```

format of transfer data
```
sort:{
 name: {value: "desc", index: 0}
}
```

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