# vue-table-editable

> Bootstrap editable table

Latest version **0.0.8** (published 2021-09-10) · 0 weekly downloads

## Install

```sh
npm install vue-table-editable
pnpm add vue-table-editable
yarn add vue-table-editable
bun add vue-table-editable
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2021-09-10 |
| First published | 2021-09-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 91.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | appshells |

## Links

- npm: https://www.npmjs.com/package/vue-table-editable
- npm.io page: https://npm.io/package/vue-table-editable

## Recent versions

- 0.0.8 (latest) — 2021-09-10
- 0.0.7 — 2021-09-10
- 0.0.6 — 2021-09-07
- 0.0.5 — 2021-09-07
- 0.0.4 — 2021-09-07
- 0.0.3 — 2021-09-07
- 0.0.2 — 2021-09-07
- 0.0.1 — 2021-09-07

## README

# Vue Editable Table Component

#### Project Details

Publish a `b-table` customized editable component **vue-table-editable** as a **NPM** module

Module Name: `vue-table-editable`
Latest version: `0.0.5`

####Component main configurations
* **tableOptions**

    name | feature descriptions | value
    ------ | -------| -------
   `ttAlign` | Table title alignment| `left` or `center`
   `ttText` | Table title text| any `text` can use 
   `ttFontsize` | Table title font size| any number with `px` (ex:`15px`)
   `ttColor` | Table title text color| act as css `color` property`
   `rHover` | Table rows hover| `true` or `false`
   `tBorder` | Table cells seperate with border| `true` or `false`
   `thColor` | Table header background color| `dark`,`light` and `none`
   `deleteAlertTitle` | Table row action confirmation alert message| ant text with type `string`
   `editable` | Table rows edit button show or hide| `true` or `false`
   `deletable` | Table rows delete button show or hide| `true` or `false`
   `filterFloats` | Table filter align direction| `left`, `center` or `right`
   `pgAlign` | Table pagination section alignment| `left`, `center` or `right`
   `pgPosition` | Table pagination display position| `top` or `bottom`
   `pgPerPage` | Table rows per page| use a `number` which more than 1
   `pgSize` | Table pagination display size| `sm`,`md` or `lg`
   `imgSize` | Table rows loading images size| `sm`,`md` or `lg`
    
* **items**
    * The type of the Data which pass to components should be an `Array` 

* **fields**

    name | feature descriptions | value
     ------ | -------| -------
     `key` | Table header map to items| any `text` that show the items data
     `label` | Table header show name| any `text` can use 
     `type` | Table column data type| `text`,`number` and `img`
     `sortable` | Table column want to sort|`true` or `false`
     `filterOn` | Column data want to filter| `true` or `false`

* **output-change**
    
    After edit or delete, a row in table sends an event called  `output-change` 
    * Return action `save` when row save after edit
    * Return action `delete` when row delete success
    

#####How to use editable table component
````    
First add <TableComponent></TableComponent> to vue file
Add props as below

                <TableComponent
                :items="itemsSet"
                :fields="fieldSet"
                :tableOptions="tableOptions"
                @output-change="handleOutput">
                </TableComponent> 
                
Update database when change happened in table rows (Edit or Delete)

                handleOutput(action, data) {
                    if (action === "delete") {
                        // remove data from database
                   } else if (action === "save) {
                        // update data in database
                    }
                }   
                
Test node version: v10.17.0                                  

````


#####Use only edit button and hide delete button. Table title color change into green 
![Image of Yaktocat](src/assets/table1.png)


#####Use only edit and delete buttons. Filter and pagination both are in top of the table
![Image of Yaktocat](src/assets/table2.png)

#####Edit the row when click the edit button
![Image of Yaktocat](src/assets/table3.png)


#####Load images in a table
![Image of Yaktocat](src/assets/table4.png)

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