https://github.com/nicholaswmin/editable-list
Light-DOM composed list in Polymer 2.x - [WIP]
https://github.com/nicholaswmin/editable-list
editable-list polymer
Last synced: 4 months ago
JSON representation
Light-DOM composed list in Polymer 2.x - [WIP]
- Host: GitHub
- URL: https://github.com/nicholaswmin/editable-list
- Owner: nicholaswmin
- License: other
- Created: 2016-12-18T15:36:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-23T18:27:22.000Z (about 9 years ago)
- Last Synced: 2025-11-06T09:20:36.927Z (7 months ago)
- Topics: editable-list, polymer
- Language: HTML
- Homepage:
- Size: 1.98 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/nicholaswmin/editable-list)
# editable-list
> CRUD list in [Polymer 2.x][1]
## The markup
There's 2 elements which you need to use:
- ``, the element itself which contains headers & rows
- ``, the repeated row
For example, the following markup creates the list displayed above:
```html
/* You can style headers and/or row content with regular CSS */
editable-item {
display: flex;
align-items: center;
}
.item {
display: inline-block;
width: 25%;
padding: 0.35em;
}
.attachment-btn {
color: #FF9800;
}
Country
City
Verified
```
## View this element
```bash
$ npm install -g polymer-cli@next
$ bower install
$ polymer serve
```
## Running tests
```bash
$ npm install && npm install -g web-component-tester
$ polymer test
# Or run both `$ polymer test && polymer lint`
$ npm test
```
## Why?
Because it uses the [Light DOM][2] to declare headers/rows markup. This
makes it very flexible.
Just declare your headers and/or the DOM of each row in HTML,
apply CSS to them from the host element & call functions of the host element.
The generic stuff are taken care off internally, i.e the delete row buttons,
add new row button, general CRUD functionality and some very generic list CSS.
The Shadow DOM encapsulation principles apply as usual.
## Passing Initial Data
Accepts an object as `data` that looks like this:
```javascript
// `...`
data = {
// Rows are added here.
contents: [
{
id: 1, // Must be a unique identifier
country: "United Kingdom",
city: "London",
verified: true
// .. rest of props
},
{
id: 2,
prop1: "China",
prop2: "Beijing",
verified: false
}
],
/*
* Deleted rows are accumulated here. Keep in mind that rows that weren't
* initially provided in `contents` won't be pushed here.
*/
deletedRows: []
}
```
> Note that the supplied `data` is 2-way data bound. Inline editing of rows
will reflect the changes to the supplied object and the observer firings will
propagate as usual to the host element.
## How it works internally
The `template` of a row, see the `editable-item` immediate parent, is picked up
and appended as the child of a `dom-repeat` that resides inside the element.
This results internally to this:
```html
```
The completed `dom-repeat` structure is then appended in the element's Light DOM,
thus allowing
direct styling and method binding from within the element that actually contains
the `editable-list`.
## License
Read "LICENSE.md" file in root directory
[1]:https://www.polymer-project.org/2.0/docs/about_20
[2]:https://www.polymer-project.org/2.0/docs/devguide/shadow-dom