# handsontable-key-value

> Handstontable plugin to handle key-value pair data type.

Latest version **3.0.2** (published 2019-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install handsontable-key-value
pnpm add handsontable-key-value
yarn add handsontable-key-value
bun add handsontable-key-value
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2019-06-14 |
| First published | 2019-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 81.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | KPI Intelligence |
| Maintainers | frankie567 |

## Links

- npm: https://www.npmjs.com/package/handsontable-key-value
- Repository: https://github.com/kpi-intelligence/handsontable-key-value
- Homepage: https://github.com/kpi-intelligence/handsontable-key-value#readme
- Issues: https://github.com/kpi-intelligence/handsontable-key-value/issues
- npm.io page: https://npm.io/package/handsontable-key-value

## Dependencies (1)

- [lodash.deburr](https://npm.io/package/lodash.deburr.md) ^4.1.0

## Recent versions

- 3.0.2 (latest) — 2019-06-14
- 3.0.1 — 2019-03-18
- 3.0.0 — 2019-03-08
- 2.0.2 — 2019-03-07
- 2.0.1 — 2019-03-06
- 2.0.0 — 2019-03-06
- 1.0.3 — 2019-03-05
- 1.0.2 — 2019-02-21
- 1.0.1 — 2019-02-19
- 1.0.0 — 2019-02-18

## README

# handsontable-key-value

[![](https://img.shields.io/npm/v/handsontable-key-value.svg?style=flat)](https://www.npmjs.com/package/handsontable-key-value)

Handsontable plugin allowing to have a key-value pair as a data type. It's built upon the builtin `autocomplete` feature with some small tweaks to make it work with such use-case.

## [Demo](https://stackblitz.com/edit/handsontable-key-value-demo)

## Installation

```bash
npm i handsontable-key-value
```

## Usage

Use it as a column type and provide the required settings:

```js
import 'handsontable-key-value' // Import the module to register the extensions

const settings = {
  columns: [
    {
      type: 'key-value',
      filter: false, // Same parameter as in `autocomplete`
      data: 'status', // The field containing the key value in your data
      // List of source items
      source: [
        {
          id: 1,
          name: 'Ready',
        },
        {
          id: 2,
          name: 'Cancelled',
        },
        {
          id: 3,
          name: 'Done',
        },
      ],
      keyProperty: 'id', // The field containing the key value in your items
      valueProperty: 'name', // The field containing the display value in your items
    },
  ],
};
```

The `source` parameter also accepts a function for loading items asynchronously:

```js
const settings = {
  columns: [
    {
      type: 'key-value',
      filter: false,
      data: 'status',
      source: function(_query, process) {
        const r = [
          {
            id: 1,
            name: 'Ready',
          },
          {
            id: 2,
            name: 'Cancelled',
          },
          {
            id: 3,
            name: 'Done',
          },
        ];
        setTimeout(() => process(r), 1000); // Call the `process` callback with your items.
      },
      keyProperty: 'id',
      valueProperty: 'name',
    },
  ],
};
```

### Filters

We also provide a custom implementation of the [Filters plugin](https://handsontable.com/docs/latest/demo-filtering.html) that works with key-value columns. Enable it in your settings:

```js
const settings = {
  // filters: true <-- Remember to disable the official filters plugin
  filtersKeyValue: true,
}
```

All the options provided by the official plugin are available.

## Limitations

* The sort is done on the **underlying value**, not the displayed one (unless you provide a custom compare function).

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