Giter Site home page Giter Site logo

handsontable-key-value's Introduction

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.

Installation

npm i handsontable-key-value

Usage

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

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:

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 that works with key-value columns. Enable it in your settings:

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).

handsontable-key-value's People

Contributors

frankie567 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

handsontable-key-value's Issues

handsontable v. ^9.0.2

Describe the bug
I have a project(react) with the last version of library handsontable.
After i installed the library "handsontable-key-value", I have the following errors:

ERROR in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
Module not found: Error: Can't resolve 'handsontable-key-value/es/i18n/constants' in 'C:\Work\IndirectMaterialPurchasingSelfService\Zobele.SPFX.IMSelfService\node_modules\handsontable-key-value\es\filters'

ERROR in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
Module not found: Error: Can't resolve 'handsontable/es/plugins/filters/component/value' in 'C:\Work\IndirectMaterialPurchasingSelfService\Zobele.SPFX.IMSelfService\node_modules\handsontable-key-value\es\filters'   

ERROR in ./node_modules/handsontable-key-value/es/filters/keyValueMultipleSelectUI.js
Module not found: Error: Can't resolve 'handsontable/es/plugins/filters/ui/multipleSelect' in 'C:\Work\IndirectMaterialPurchasingSelfService\Zobele.SPFX.IMSelfService\node_modules\handsontable-key-value\es\filters' 

ERROR in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
Module not found: Error: Can't resolve 'handsontable/es/plugins/filters/utils' in 'C:\Work\IndirectMaterialPurchasingSelfService\Zobele.SPFX.IMSelfService\node_modules\handsontable-key-value\es\filters'

Probabilly it is due for the missing folder "es" in handsontable v.9.0.2

Thanks

Environment:

  • OS:
  • Browser: Chrome
  • Handsontable version: 9.0.2
  • Webpack: [yes]

Module not found after migrate to handsontable version 8.3.1

Describe the bug
Fail to run the project after migrating from handsontable 7 to 8 with vue wrapper, error shows:

These dependencies were not found:
* handsontable/es/i18n/constants in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
* handsontable/es/plugins/filters/component/value in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
* handsontable/es/plugins/filters/ui/multipleSelect in ./node_modules/handsontable-key-value/es/filters/keyValueMultipleSelectUI.js
* handsontable/es/plugins/filters/utils in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
To install them, you can run: npm install --save handsontable-css handsontable/es/i18n/constants handsontable/es/plugins/filters/component/value handsontable/es/plugins/filters/ui/multipleSelect handsontable/es/plugins/filters/utils

To Reproduce
Steps to reproduce the behavior:

  1. Upgrade the package by entering the command npm install handsontable @handsontable/vue@5
  2. Run the project
  3. Error shows on the console

Expected behavior
Works as expectedly, (before migrated)

Environment:

  • OS: Windows 10 (WSL 2)
  • Browser: Chrome
  • Handsontable version: 8.3.1
  • Framework: Nuxt 2.14.12

Cannot delete the contents of cell once initial value is chosen

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Add a null option to the key-value options so that an empty value is valid.
  2. Pick a value in column A for a row, if not set.
  3. On your keyboard, press Delete or Backspace
  4. Cell value does not reset to null or undefined

Expected behavior
Pressing 'Delete' or 'Backspace' should clear the cell / set to null as if a normal dropdown or autocomplete cell type.

Stackblitz
Stackblitz Example

Module Not Found - Can't resolve Handsontable plugin

I'm trying to use the package and am receiving the following error when I try to build my project:

ERROR in ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js
Module not found: Error: Can't resolve 'handsontable/es/plugins/filters/component/value' in 'C:\Users\AXD2845\Humana\Development\Bulk-Update\node_modules\handsontable-key-value\es\filters'
 @ ./node_modules/handsontable-key-value/es/filters/keyValueComponent.js 26:0-77 136:2-16
 @ ./node_modules/handsontable-key-value/es/filters/keyValueFilters.js
 @ ./node_modules/handsontable-key-value/es/filters/index.js
 @ ./node_modules/handsontable-key-value/es/index.js
 @ ./src/main.js
// main.js

import 'handsontable-key-value';

// .... more code

// Inside my columns settings
columns: [
    {
        type: 'key-value',
        filter: false,
        data: 'inquiry_category',
        source: (_query, process) => {
            let categories
            API.getCategoryOptions(1).then((response) => {
                categories = response
                process(categories)
            })
        },
        keyProperty: 'id',
        valueProperty: 'name',
    }
]

All values are checked in dropdown if the filter 'by_value' has been set programmatically

Describe the bug
All values are checked in dropdown if the filter 'by_value' has been set programmatically

To Reproduce
Steps to reproduce the behavior:

  1. Set a filter condition 'by_value' programatically on a key-value column
  2. Click on the column header to change the filter
  3. All boxes are checked even if only one value has been filtered

Expected behavior
The checked boxes should correspond to the displayed values

Stackblitz
https://stackblitz.com/edit/handsontable-key-value-demo-spcjbp

Environment:

  • OS: Linux
  • Browser: Firefox & Chrome
  • Handsontable version: 7.0.0
  • Webpack: yes

I have figured out how to fix it, so i will open a PR soon

Changing data after filtering makes the filters show the key value

Describe the bug

After changing data while a filter is enabled, opening again the filters menu will display the key value of the options, not the displayed one.

To Reproduce

Steps to reproduce the behavior:

  1. Open the filter menu on a key-value column
  2. Deselect some options and validate
  3. Change some data in this same column
  4. Open again the filter menu
  5. The list of available values shows the keys, not the display values

Expected behavior

The displayed values should be displayed.

Stackblitz

https://stackblitz.com/edit/handsontable-key-value-demo

Environment:

  • OS: macOS 10.14.4
  • Browser: Chrome 75
  • Handsontable version: 7.0.2
  • Webpack: No

Wrong value display when source exists 0 as the key

Describe the bug
When setting source has item with key is 0 then display value of null and 0 is the display value of the item with key 0

Stackblitz
https://stackblitz.com/edit/handsontable-key-value-demo-1xcp3d

You can see that item 1 and 2 both display value 'Ford' in column A, although brand of item 1 is null

My solution
Update function _getSourceItem in handsontable-key-value/commonjs/common/getSourceItem.js when value is null or undefined

function _getSourceItem(items, keyProperty, keyValue) {
  return items.find(function(item) {
    const key = item[keyProperty]
    let castedKeyValue = keyValue
    if (keyValue === null && key !== null) {
      return false
    }
    if (keyValue === undefined && key !== undefined) {
      return false
    }
    if (typeof castedKeyValue !== typeof key) {
      if (typeof key === 'number') {
        castedKeyValue = Number(keyValue)
      } else if (typeof key === 'boolean') {
        castedKeyValue = keyValue === 'true'
      }
    }

    return key === castedKeyValue
  })
}

angular v14 handsontable 12.1 not run.

Describe the bug
A clear and concise description of what the bug is.

./node_modules/handsontable-key-value/es/filters/keyValueComponent.js:117:0-77 - Error: Module not found: Error: Package path ./es/plugins/filters/component/value is not exported from package D:\sheet\HtDemo\node_modules\handsontable (see exports field in D:\sheet\HtDemo\node_modules\handsontable\package.json)

./node_modules/handsontable-key-value/es/filters/keyValueComponent.js:119:0-89 - Error: Module not found: Error: Package path ./es/plugins/filters/utils is not exported from package D:\sheet\HtDemo\node_modules\handsontable (see exports field in D:\sheet\HtDemo\node_modules\handsontable\package.json)

./node_modules/handsontable-key-value/es/filters/keyValueMultipleSelectUI.js:107:0-81 - Error: Module not found: Error: Package path ./es/plugins/filters/ui/multipleSelect is not exported from package D:\sheet\HtDemo\node_modules\handsontable (see exports field in D:\sheet\HtDemo\node_modules\handsontable\package.json)

./node_modules/handsontable-key-value/es/filters/utils.js:2:0-92 - Error: Module not found: Error: Package path ./es/plugins/filters/utils is not exported from package D:\sheet\HtDemo\node_modules\handsontable (see exports field in D:\sheet\HtDemo\node_modules\handsontable\package.json)

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Stackblitz
If possible, please reproduce the issue in a minimal Stackblitz example. Starter project: https://stackblitz.com/edit/handsontable-key-value-demo

Environment:
angular v14
handsontable 12.1

  • OS:
  • Browser:
  • Handsontable version:
  • Webpack: [yes/no]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.