# @quanzo/vue-table

> Table - component for Vue.js ============================

Latest version **1.0.4** (published 2019-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @quanzo/vue-table
pnpm add @quanzo/vue-table
yarn add @quanzo/vue-table
bun add @quanzo/vue-table
```

## 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.4 |
| Published | 2019-09-22 |
| First published | 2019-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Quanzo |
| Maintainers | quanzo |
| Keywords | vue.js component, vue.js |

## Links

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

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.17

## Recent versions

- 1.0.4 (latest) — 2019-09-22
- 1.0.3 — 2019-09-22
- 1.0.2 — 2019-09-17
- 1.0.1 — 2019-09-16
- 1.0.0 — 2019-09-15

## README

Table - component for Vue.js
============================

The component allows you to display tabular data. Sort by columns. Select lines.
Edit data directly in the table. Block columns or rows from changing.

[Demo](https://quanzo.github.io/vue-table/)

 

Install via NPM
---------------

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm i --save-dev @quanzo/vue-table
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Load from CDN
-------------

You can load specific version of package from [jsDelivr
CDN](https://cdn.jsdelivr.net/npm/@quanzo/vue-table).

`<script src="https://cdn.jsdelivr.net/npm/@quanzo/vue-table"></script>`

 

Methods provided by the component Table
---------------------------------------

| provide                                | return        | description                                                                                                                |
|----------------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------|
| registerEventListener(eventName, func) |               |                                                                                                                            |
| load(tableData)                        |               | Upload new data to the table.                                                                                              |
| getColumnConfig(col)                   | Object        |                                                                                                                            |
| isRow(row)                             | boolean       | Checks for row presence                                                                                                    |
| isCell(row, col)                       | boolean       | Checks for cell presence                                                                                                   |
| cell(row, col)                         | mixed         |                                                                                                                            |
| setCell(row, col, value)               | boolean       |                                                                                                                            |
| rows()                                 | integer       | Total count rows in table                                                                                                  |
| row(row)                               | array\|object | Get row data                                                                                                               |
| setRow(row, value)                     | boolean       | Set row data. Value is array or object/                                                                                    |
| insertRow(afterRow, ...value)          |               | Insert rows after row. afterRow =-1 then insert at the beginning of the array                                              |
| deleteRow(row, count = 1)              |               | Delete lines starting from this                                                                                            |
| getCellClasses(row, col)               | string        | Get cell classes                                                                                                           |
| getRowClasses                          | string        | Get row classes                                                                                                            |
| setCellClasses(row, col, classes)      |               | Set cell classes                                                                                                           |
| setRowClasses(row, classes)            |               | Set row classes                                                                                                            |
| getChecked()                           | array         | Returns the status checked of each row in an array. Array index - line number. Value - if checked = true, other = false    |
| checkRow(row, status = null)           | boolean       | Get or set selection mark. If status == true/false - set or reset mark                                                     |
| blockRow                               | boolean       | Set or reset row lock. If the line is locked, then its editing is prohibited. If status == true/false - set or reset block |
|                                        |               |                                                                                                                            |

 

Events
------

| event               | \$emit | event params                                                            | description                                         |
|---------------------|--------|-------------------------------------------------------------------------|-----------------------------------------------------|
| event-end-edit-cell | yes    | {row: ..., col: ..., initial: ..., result: ..., data: ...}              | The event will be triggered after editing the cell. |
| event-sort-table    | yes    | [{col: ..., direct: "asc\|desc"}, ... {col: ..., direct: "asc\|desc"} ] | The event will be triggered after sorting.          |
| event-checked       | yes    | {current: []}                                                           | The event will be triggered after checked row.      |
|                     |        |                                                                         |                                                     |

 

Options
-------

| param         | type    | default | sample                                                                                                                                                                                                           | description                                                                                                                                                         |
|---------------|---------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| data          | array   | []      |                                                                                                                                                                                                                  | Data to display in the table. Array of strings. A string can be an array or a data object.                                                                          |
| columns       | array   | false   | [”ID”, “Name”, “Family”]                                                                                                                                                                                         | Data on the columns of the table. If an array, then these are the column headers. If the object is advanced settings. If not, column headers will not be displayed. |
| columns       | object  | false   | {ID: {name:”Identify”, enableEdit: false, enableSort: false, type:”number”}, town: {name:”Company town”, enableEdit: true, enableSort: true, type: “select”, options: {msk: “Moscow”, spb: “Snakt-Petersburg”}}} | Данные по колонкам таблицы. Если массив, то это заголовки колонок. Если объект - то это расширенные настройки. Если нет - заголовоки колонок выведены не будут.     |
| useUndo       | boolean | true    |                                                                                                                                                                                                                  | Activate ctrl+z                                                                                                                                                     |
| defEnableEdit | boolean | true    |                                                                                                                                                                                                                  | Default value enableEdit param for column                                                                                                                           |
| enableEdit    | boolean | true    |                                                                                                                                                                                                                  | Enable/disable edit all cell                                                                                                                                        |
| defEnableSort | boolean | true    |                                                                                                                                                                                                                  | Default value enableSort param for column                                                                                                                           |
| enableSort    | boolean | true    |                                                                                                                                                                                                                  | Enable/disable all row in table                                                                                                                                     |
| enableChecked | boolean | true    |                                                                                                                                                                                                                  | Whether or not line marking is available.                                                                                                                           |
| sort          | array   | []      | [{col:”name”, direct:”asc”}, {col:”id”, direct:”desc”}]                                                                                                                                                          |                                                                                                                                                                     |
| checkedRows   | array   | []      | [false, true]                                                                                                                                                                                                    | Checked row number 1.                                                                                                                                               |
| blockedRows   | array   | []      | [false, false, true]                                                                                                                                                                                             | Block row number 2                                                                                                                                                  |
| cellClasses   | array   | []      |                                                                                                                                                                                                                  |                                                                                                                                                                     |
| rowClasses    | array   | []      | [”marked checked”, ”not-marked”, “”, “”]                                                                                                                                                                         |                                                                                                                                                                     |
|               |         |         |                                                                                                                                                                                                                  |                                                                                                                                                                     |

 

Available types of columns
--------------------------

### type = string

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
name: {
    name:”User name”,
    enableEdit: false,
    enableSort: false,
    type:”string”, // or do not set the parameter
    default: "" // or not set
}
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

### type = number

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
id: {
    name:”Identify”,
    enableEdit: false,
    enableSort: false,
    type:”number”,
    default: 0 // or not set
}
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

### type = select

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
town: {
    name:”Company town”,
    enableEdit: true,
    enableSort: true,
    type: “select”,
    options: {
        msk: “Moscow”,
        spb: “Sankt-Petersburg”
    },
    default: "spb"
}
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

### type = image

edit as string, view as image

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