GitHub - gr2m/editable-table: A web component for editing a collection of records (original) (raw)
Editable Table
A web component for editing a collection of records
Usage
| Name | Birthday | ||
|---|---|---|---|
| × |
You can get or add records using the JS API:
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
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
git clone git@github.com:gr2m/editable-table.git cd editable-table npm install npm start