{"id":13657825,"url":"https://github.com/ivosdc/svelte-generic-crud-table","last_synced_at":"2025-03-05T17:14:42.774Z","repository":{"id":41276864,"uuid":"266294993","full_name":"ivosdc/svelte-generic-crud-table","owner":"ivosdc","description":"Agnostic web-component for object-arrays with CRUD functionality.","archived":false,"fork":false,"pushed_at":"2024-08-30T17:23:28.000Z","size":1703,"stargazers_count":66,"open_issues_count":3,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-26T16:18:22.160Z","etag":null,"topics":["crud-operation","svelte","table"],"latest_commit_sha":null,"homepage":"","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/ivosdc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-23T08:29:51.000Z","updated_at":"2025-02-11T17:37:09.000Z","dependencies_parsed_at":"2024-01-07T10:27:20.825Z","dependency_job_id":"ea5e9c00-a8e5-4652-8093-ce0c00523178","html_url":"https://github.com/ivosdc/svelte-generic-crud-table","commit_stats":{"total_commits":198,"total_committers":6,"mean_commits":33.0,"dds":0.06060606060606055,"last_synced_commit":"3dd883df42898f3e8e0423fdc22500b4063441b9"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-crud-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-crud-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-crud-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-crud-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivosdc","download_url":"https://codeload.github.com/ivosdc/svelte-generic-crud-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242067708,"owners_count":20066751,"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":["crud-operation","svelte","table"],"created_at":"2024-08-02T05:00:51.676Z","updated_at":"2025-03-05T17:14:42.746Z","avatar_url":"https://github.com/ivosdc.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components"],"sub_categories":["Table"],"readme":"# svelte-generic-crud-table\n- Web-component: `\u003ccrud-table\u003e\u003c/crud-table\u003e`\n- or Svelte-component: `import SvelteGenericCrudTable from 'svelte-generic-crud-table'`\n\nA self-containing sortable table component with inline edit option.\n\nAllows CRUD-operations for Object-Arrays.\n\n[Try out live example:](https://ivosdc.github.io/svelte-generic-crud-table/ \"GeneralCrudTable Example\")\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/svelte-generic-crud-table)\n\n\n## Install\n\n```\nnpm install svelte-generic-crud-table --save-dev\n```\n\n\n# Usage - table_config\nUse the svelte-generic-crud-table in your component to show and, if you like, edit, update and delete it's content.\nJust include the table as seen in the example below.\n\n## name\nThis is used as `id` for the component.\n\n## options\n- 'CREATE' - activates the add-icon to fire the create-event.\n- 'EDIT' - activates the edit-icon to set the table-row in edit-mode.\n- 'DELETE' - activates the delete-icon to fire the delete-event.\n- 'DETAILS' - activates the details-icon or showa the alternative details_text if configured to fire the details-event.\n\n\nThe events contain the element from the `crud-table` with the table-id and eventually made changes to the element. Additionally the original element with all it's `hidden fields -\u003e column_setting:show true/false`.\n\nAs webcomponent use `event.target`.\nAs Svelte-Component use `event.detail` to fetch the data.\n\nHave a look inside `event.target.body` / `event.detail.body` to see original element.\n\n\n## column setting\nAll fields are optional.\n\nSettings regarding a column behaviour can be specified in the table_config.\nOnly wanted keys of your source array have to be mapped by columns_settings *name*. All other attributes are optional.\n```html\n    const table_config = {\n        name: 'Awesome',\n        options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],\n        columns_setting: [\n            {name: 'id', show: false, edit: true, width: '0px'},\n            {name: 'job', displayName: 'Top-Jobs', show: true, edit: true, width: '150px', description: 'The job'},\n            {name: 'name', displayName: 'Account-ID', show: true, edit: true, width: '150px', tooltip: true},\n            {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},\n            {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}\n        ],\n        details_text: 'detail'   // replace the standard icon with an text-link\n    }\n```\n- \u003cb\u003e*name*\u003c/b\u003e: the key from your data-array. This is used as column name.\n- *displayName*: An alternative column header if *name* is not matching the needs.\n- *show*: true/false; Should this column displayed? (optional, default: false)\n- *edit*: true/false; Set this field editable or not. (optional, default: false)\n- *width*: px/em; set the field width.  (optional, default: 100px)\n- *description*: A tooltip for the columns name. E.g. to see the full name or other description.  (optional, default: unset)\n- *tooltip*: true/false; When the text does not fit into the field you can show the full text as tooltip.  (optional, default: false) \n- *type*: There are two types:  (optional, default: text)\n    - *text*: Default.\n    - *html*: The value/text will be interpreted as HTML.\n\n## details_text\nYou can replace the icon for \"DETAILS\" by a text. Perhaps you like to specify the acvtion behind the button more concrete.\n\n\n\n[See example:](https://ivosdc.github.io/svelte-generic-crud-table/ \"GeneralCrudTable Example\")\n\n### `\u003ccrud-table\u003e\u003c/crud-table\u003e`\n```html\n\u003ccustom-element-demo\u003e\n\u003ctemplate\u003e\n\u003chead\u003e\n    \u003cmeta charset='utf-8'\u003e\n    \u003cmeta name='viewport' content='width=device-width,initial-scale=1'\u003e\n    \u003ctitle\u003eGeneric Crud Table\u003c/title\u003e\n    \u003clink rel='icon' type='image/png' href='favicon.png'\u003e\n    \u003cscript defer src='https://ivosdc.github.io/svelte-generic-crud-table/build/crud-table.js'\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\u003chr\u003e\n\u003ccrud-table\u003e\u003c/crud-table\u003e\n\u003chr\u003e\n\u003c/body\u003e\n\u003cscript src='https://ivosdc.github.io/svelte-generic-crud-table/test-data.js'\u003e\u003c/script\u003e\n\u003cscript src='https://ivosdc.github.io/svelte-generic-crud-table/crud-table-config-html.js'\u003e\u003c/script\u003e\n\u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n\n```html\n\u003ccrud-table\u003e\u003c/crud-table\u003e\n```\n\n###  Svelte-Component - implementation example:\n```html\n\u003cscript\u003e\n    import SvelteGenericCrudTable from \"svelte-generic-crud-table\";\n    import {onMount} from 'svelte';\n    import {goto} from \"@sapper/app\";\n\n    let myData = [];\n\n    onMount(reload);\n\n    function reload() {\n        get().then( (result) =\u003e {\n                myData = result;\n        });\n    }\n\n    function handleCreate(event) {\n        post({name: \"new entry\"}).then(() =\u003e {\n                    reload();\n                });\n    }\n\n\n    function handleDelete(event) {\n        delete(event.detail.body.id).then(() =\u003e {\n                    reload();\n                });\n    }\n\n    function handleUpdate(event) {\n        update(event.detail.body.id, event.detail.body)\n                .then(() =\u003e {\n                    reload();\n                });\n    }\n\n    function handleDetail(event) {\n        goto('/project/' + event.detail.body.id);\n    }\n\n    \n    const table_config = {\n        name: 'Awesome',\n        options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],\n        columns_setting: [\n            {name: 'id', show: false, edit: true, width: '200px'},\n            {name: 'job', show: true, edit: true, width: '100px', description: 'Your Job'},\n            {name: 'name', show: true, edit: true, width: '200px', tooltip: true},\n            {name: 'private', show: true, edit: false, width: '200px', description: 'Your things'},\n            {name: 'html', show: true, edit: true, size: '200px', type: 'html', tooltip: true}\n        ],\n        details_text: 'detail'   // replace the standard icon with an text-link\n    }\n\n\u003c/script\u003e\n\n\u003cmain\u003e\n    \u003cSvelteGenericCrudTable on:delete={handleDelete}\n                            on:update={handleUpdate}\n                            on:create={handleCreate}\n                            on:details={handleDetail}\n                            table_config={table_config}\n                            table_data={myData}/\u003e\n\u003c/main\u003e\n\n```\n\nI recommend for Svelte-Users the direct import of the component source `\"svelte-generic-crud-table/src/SvelteGenericCrudTable.svelte\"`.\n```html\n// import SvelteGenericCrudTable from \"svelte-generic-crud-table\";\nimport SvelteGenericCrudTable from \"svelte-generic-crud-table/src/SvelteGenericCrudTable.svelte\";\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivosdc%2Fsvelte-generic-crud-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivosdc%2Fsvelte-generic-crud-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivosdc%2Fsvelte-generic-crud-table/lists"}