https://github.com/gr2m/editable-table
A web component for editing a collection of records
https://github.com/gr2m/editable-table
Last synced: about 1 year ago
JSON representation
A web component for editing a collection of records
- Host: GitHub
- URL: https://github.com/gr2m/editable-table
- Owner: gr2m
- License: mit
- Created: 2014-02-04T17:21:44.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2022-09-23T19:38:31.000Z (almost 4 years ago)
- Last Synced: 2025-04-10T10:43:02.484Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://gr2m.github.io/editable-table/
- Size: 1.21 MB
- Stars: 53
- Watchers: 8
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Editable Table
> A web component for editing a collection of records
## Usage
```html
Name
E-Mail
Birthday
×
```
You can get or add records using the JS API:
```js
const editableTable = document.querySelector("editable-table");
// get records out of table
const records = editableTable.get();
// add a new record to the end of the table
editableTable.add({ name: "Joe", email: "joe@example.com" });
// add a new record after the 2nd
editableTable.add({ name: "Joe", email: "joe@example.com" }, { at: 2 });
// add multiple records at once
editableTable.add(records);
// update 1st row
editableTable.update({ email: "new.joe@example.com" }, { at: 0 });
// remove 3rd row
editableTable.remove({ at: 2 });
```
Or listen to events
```js
editableTable.addEventListener("record:add", ({ record, index }) {});
editableTable.addEventListener("record:update", ({ record, index }) {});
editableTable.addEventListener("record:remove", ({ record, index }) {});
editableTable.addEventListener("record:change", ({ changeType, record, index }) {});
```
## Local Setup
```bash
git clone git@github.com:gr2m/editable-table.git
cd editable-table
npm install
npm start
```
## LICENSE
[MIT](LICENSE)