# vue-crud-tables

> Smart Vue table component with CRUD functionality

Latest version **1.0.7** (published 2018-01-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-crud-tables
pnpm add vue-crud-tables
yarn add vue-crud-tables
bun add vue-crud-tables
```

## 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.0.7 |
| Published | 2018-01-08 |
| First published | 2018-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Mateusz Hackiewicz |
| Maintainers | mhackiewicz |
| Keywords | vue, vue2, crud, table, tables, vue crud, vue tables, javascript |

## Links

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

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) 0.17.1

## 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.0.7 (latest) — 2018-01-08
- 1.0.5 — 2018-01-05
- 1.0.4 — 2018-01-05
- 1.0.3 — 2018-01-05
- 1.0.2 — 2018-01-05
- 1.0.0 — 2018-01-05

## README

# vue-crud-tables
Smart Vue table component with crud functionality
## Example

Demo: https://vue-crud-tables.herokuapp.com


## Uses

``` bash
    npm install vue-crud-tables
```

```javascript
    import VueTables from 'vue-crud-tables'
    
    Vue.use(VueTables);
```
```html
     <vue-table :columns="my-columns" :data="my-data" :options="table-options"></vue-table>
```

## Documentation

### vue-crud-tables props

#### :columns (type: Array) 

| Option        | Type    | Values(default)           | Description  |
| ------------- |---------|---------------------------| -------------|
| **name**          | String  |(empty string)             | Name of column. It must be the same as the corresponding attribute name i data props  |
| **label**         | String  |(empty string)             | Column label in table header |
| **type**          | String  |text(default), select           | Type of table cell|
| **require**       | Boolean |true(default), false               | If cell is required before save|
| **filtrable**       | Boolean |true, false(default)              | If column is filtrable|
| **sortable**       | Boolean |true, false(default)               | If column is sortable|
| **editable**       | Boolean |true, false(default)               | If column is editable|
| **data**       | Array |[{id: Number,label: String}] (empty array) | Array of options to select in editable mode|

#### Example

```javascript
    var columns = [
        {
          name: 'firstName',
          label: 'First name',
          type: 'text',
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        },
        {
          name: 'lastName',
          label: 'Last name',
          type: 'text',
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        },
        {
          name: 'city',
          label: 'City',
          type: 'select',
          data: [
            {
              id: 1,
              label: 'Warsaw'
            },{
              id: 2,
              label: 'New York'
            },{
              id: 3,
              label: 'Moscow'
            }
          ],
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        }
    ]
```
#### :data (type: Array) 
Array of data objects. Object attributes must be the same as names attributes in columns.


#### :options (type: Object) 


| Option        | Type    | Values(default)           | Description  |
| ------------- |---------|---------------------------| -------------|
| **tableName**          | String  |"table"(default)             | Name of table|
| **style**          | String  |"bootstrap"(default)          | Choose default style of table |
| **classes**       | String |"table"(default) | class attribute in table tag|
| **url**       | String |null(default) |Url it is address of endpoint for table data. It can also be an address to the CRUD operations  API implemented same like below example:<br> ```Fetch table data  GET     /post``` <br>  ```Add new row       POST    /posts``` <br>``` Edit Row        PUT     /posts/1```<br>``` Delete row        DELETE  /posts/1``` |
| **editMode**       | String |"row"(default), "modal"           | Choose method of editing row, "modal" option is aviable only for "bootstrap" style |
| **editButtonTmp**       | String |``` <a href="#">edit</a> ```  (default)            | Edit button template|
| **deleteButtonTmp**       | String |``` <a href="#">delete</a>```  (default)               | Delete button template|
| **cancelButtonTmp**       | String |``` <a href="#">cancel</a> ```  (default)               | Cancel button template|
| **saveButtonTmp**       | String |``` <a href="#">save</a> ```  (default)               | Save button template|
| **customActionTmp**       | String |(empty string)                   | Custom buttons template|
| **buttonsFloat**       | String |"left"(default), "right" |Location of action buttons in table |
| **deleteFn**       | Function |(default  function) | Default delete method|
| **saveFn**       | Function |(default  function) | Default save method|
| **deleteCallbackFn**       | Function |(default callback function) | Default delete callback method|
| **saveCallBackFn**        | Function |(default callback function) | Default save callback method|

#### Example

```javascript
 var options = {       
        classes: 'table',
        tableName: 'my-table',
        editMode: 'row',  
        url: 'https://jsonplaceholder.typicode.com/posts',             
        customActionTmp: '', 
        buttonsFloat: 'left'
  }
```

### Extra functions

| Function        | Parameters(Type)    |   Description  | Example |
| ------------- |--------- |-------------|------------- |
| **addRow**         | tableName(String)  |Adding new row to table           | ```this.$VueTable.addRow('my-table'); ``` |

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