{"id":15455998,"url":"https://github.com/gr2m/editable-table","last_synced_at":"2025-04-15T05:57:11.514Z","repository":{"id":13822686,"uuid":"16519246","full_name":"gr2m/editable-table","owner":"gr2m","description":"A web component for editing a collection of records","archived":false,"fork":false,"pushed_at":"2022-09-23T19:38:31.000Z","size":1267,"stargazers_count":53,"open_issues_count":1,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T10:43:02.484Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gr2m.github.io/editable-table/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gr2m.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-04T17:21:44.000Z","updated_at":"2025-03-28T13:50:55.000Z","dependencies_parsed_at":"2022-07-12T15:13:08.035Z","dependency_job_id":null,"html_url":"https://github.com/gr2m/editable-table","commit_stats":null,"previous_names":["gr2m/bootstrap-editable-table"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr2m%2Feditable-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr2m%2Feditable-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr2m%2Feditable-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr2m%2Feditable-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gr2m","download_url":"https://codeload.github.com/gr2m/editable-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248721018,"owners_count":21151028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T22:21:50.098Z","updated_at":"2025-04-15T05:57:11.495Z","avatar_url":"https://github.com/gr2m.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Editable Table\n\n\u003e A web component for editing a collection of records\n\n![demo](assets/demo.gif)\n\n## Usage\n\n```html\n\u003c!-- Load `editable-table` directly from Pika's CDN --\u003e\n\u003cscript type=\"module\" src=\"https://cdn.pika.dev/editable-table\"\u003e\u003c/script\u003e\n\n\u003c!-- put a normal \u003ctable\u003e tag inside \u003ceditable-table\u003e tags.\n     The last \u003ctr\u003e in \u003ctbody\u003e becomes the template for new rows --\u003e\n\u003ceditable-table\u003e\n  \u003ctable\u003e\n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003cth\u003eName\u003c/th\u003e\n        \u003cth\u003eE-Mail\u003c/th\u003e\n        \u003cth colspan=\"99\"\u003eBirthday\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003cinput name=\"name\" placeholder=\"Joe Doe\" autocomplete=\"off\" /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003cinput\n            name=\"email\"\n            placeholder=\"joe@example.com\"\n            type=\"email\"\n            autocomplete=\"off\"\n          /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003cinput\n            name=\"birthday\"\n            placeholder=\"10/20/2000\"\n            type=\"date\"\n            required=\"required\"\n            autocomplete=\"off\"\n          /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003cspan data-remove\u003e×\u003c/span\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/editable-table\u003e\n```\n\nYou can get or add records using the JS API:\n\n```js\nconst editableTable = document.querySelector(\"editable-table\");\n// get records out of table\nconst records = editableTable.get();\n// add a new record to the end of the table\neditableTable.add({ name: \"Joe\", email: \"joe@example.com\" });\n// add a new record after the 2nd\neditableTable.add({ name: \"Joe\", email: \"joe@example.com\" }, { at: 2 });\n// add multiple records at once\neditableTable.add(records);\n\n// update 1st row\neditableTable.update({ email: \"new.joe@example.com\" }, { at: 0 });\n// remove 3rd row\neditableTable.remove({ at: 2 });\n```\n\nOr listen to events\n\n```js\neditableTable.addEventListener(\"record:add\", ({ record, index }) {});\neditableTable.addEventListener(\"record:update\", ({ record, index }) {});\neditableTable.addEventListener(\"record:remove\", ({ record, index }) {});\neditableTable.addEventListener(\"record:change\", ({ changeType, record, index }) {});\n```\n\n## Local Setup\n\n```bash\ngit clone git@github.com:gr2m/editable-table.git\ncd editable-table\nnpm install\nnpm start\n```\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr2m%2Feditable-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgr2m%2Feditable-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr2m%2Feditable-table/lists"}