Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buschtoens/ember-light-table-cell-type-multi-value
Pass an array of values to your cell
https://github.com/buschtoens/ember-light-table-cell-type-multi-value
ember ember-addon ember-light-table-addon
Last synced: 2 months ago
JSON representation
Pass an array of values to your cell
- Host: GitHub
- URL: https://github.com/buschtoens/ember-light-table-cell-type-multi-value
- Owner: buschtoens
- License: mit
- Created: 2017-07-20T13:28:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T08:46:44.000Z (about 1 year ago)
- Last Synced: 2024-04-09T22:23:37.208Z (9 months ago)
- Topics: ember, ember-addon, ember-light-table-addon
- Language: JavaScript
- Homepage: https://buschtoens.github.io/ember-light-table-cell-type-multi-value/
- Size: 2.07 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-light-table-cell-type-multi-value
[](https://travis-ci.org/buschtoens/ember-light-table-cell-type-multi-value)
[](http://badge.fury.io/js/ember-light-table-cell-type-multi-value)
[](http://badge.fury.io/js/ember-light-table-cell-type-multi-value)
[](https://emberobserver.com/addons/ember-light-table-cell-type-multi-value)
[](https://greenkeeper.io/)
[](https://david-dm.org/buschtoens/ember-light-table-cell-type-multi-value)
[](https://david-dm.org/buschtoens/ember-light-table-cell-type-multi-value?type=dev)
> Pass an array of values to your cell
This is an addon for [**ember-light-table**][elt]. It adds the
[cell type][cellType] `multi-value`, which enables you to specify an array of `valuePaths` instead of a single [`valuePath`][valuePath].
[elt]: https://github.com/offirgolan/ember-light-table
[cellType]: https://offirgolan.github.io/ember-light-table/docs/classes/Column.html#property_cellType
[valuePath]: https://offirgolan.github.io/ember-light-table/docs/classes/Column.html#property_valuePath
## Installation
```
ember install ember-light-table-cell-type-multi-value
```
## Usage
In your column definition, just replace `valuePath` with `valuePaths`, which can
now be an array of paths. The `value` property passed to your cell will now be
an array of values. Simple as that! :wink:
For maximized backwards compatibility, `valuePaths` may also be a string. In
that case, you'll get a single `value`, not an array. If no `valuePaths` were
specified, `multi-value` falls back to the default behavior of the `base` cell
and attempts to read `valuePath`.
*However*, `valuePath` *must* be a `String`. This means no fancy multiple
values in that case. This limitation and the need to use `valuePaths` instead of
`valuePath` in the first place, stem from the fact that ember-light-table uses
the `{{get}}` helper like so: [`{{get row valuePath}}`](https://github.com/offirgolan/ember-light-table/blob/71b76d2e5c5e737dd8072787d1484155db2883f7/addon/templates/components/lt-row.hbs#L4)
We might change that in the future.
### Example
```js
function format(value) {
return JSON.stringify(value);
}
export default Component.extends({
columns: computed(function() {
return [{
label: 'First Name',
valuePath: 'firstName', // fallback to `valuePath`
cellType: 'multi-value',
format
}, {
label: 'Last Name',
valuePaths: 'lastName', // singular string is also accepted
cellType: 'multi-value',
format
}, {
label: 'Favorite colors',
valuePaths: ['firstColor', 'secondColor', 'thirdColor']
cellType: 'multi-value',
format
}, {
label: 'Youngest Siblings',
valuePaths: ['siblings.youngestSister', 'siblings.youngestBrother']
cellType: 'multi-value',
format
}];
}),
rows: computed(function() {
return [{
firstName: 'Jan',
lastName: 'Buschtöns',
firstColor: 'pink',
secondColor: 'green',
thirdColor: 'blue',
siblings: {
youngestBrother: 'Robin'
}
}];
}),
init() {
this._super(...arguments);
const columns = get(this, 'columns');
const rows = get(this, 'rows');
set(this, 'table', new Table(columns, rows));
}
});
```
```html
"Jan"
"Buschtöns"
["pink", "green", "blue"]
[null, "Robin"]
```