You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Use the svelte-generic-crud-table in your component to show and, if you like, edit, update and delete it's content.Just include the table as seen in the example below.
name
This is used asid for the component.
options
'CREATE' - activates the add-icon to fire the create-event.
'EDIT' - activates the edit-icon to set the table-row in edit-mode.
'DELETE' - activates the delete-icon to fire the delete-event.
'DETAILS' - activates the details-icon or showa the alternative details_text if configured to fire the details-event.
The events contain the element from thecrud-table with the table-id and eventually made changes to the element. Additionally the original element with all it'shidden fields -> column_setting:show true/false.
As webcomponent useevent.target.As Svelte-Component useevent.detail to fetch the data.
Have a look insideevent.target.body /event.detail.body to see original element.
column setting
All fields are optional.
Settings regarding a column behaviour can be specified in the table_config.Only wanted keys of your source array have to be mapped by columns_settingsname. All other attributes are optional.
<script>importSvelteGenericCrudTablefrom"svelte-generic-crud-table";import{onMount}from'svelte';import{goto}from"@sapper/app";letmyData=[];onMount(reload);functionreload(){get().then((result)=>{myData=result;});}functionhandleCreate(event){post({name:"new entry"}).then(()=>{reload();});}functionhandleDelete(event){delete(event.detail.body.id).then(()=>{reload();});}functionhandleUpdate(event){update(event.detail.body.id,event.detail.body).then(()=>{reload();});}functionhandleDetail(event){goto('/project/'+event.detail.body.id);}consttable_config={name:'Awesome',options:['CREATE','EDIT','DELETE','DETAILS'],columns_setting:[{name:'id',show:false,edit:true,width:'200px'},{name:'job',show:true,edit:true,width:'100px',description:'Your Job'},{name:'name',show:true,edit:true,width:'200px',tooltip:true},{name:'private',show:true,edit:false,width:'200px',description:'Your things'},{name:'html',show:true,edit:true,size:'200px',type:'html',tooltip:true}],details_text:'detail'// replace the standard icon with an text-link}</script><main><SvelteGenericCrudTableon:delete={handleDelete}on:update={handleUpdate}on:create={handleCreate}on:details={handleDetail}table_config={table_config}table_data={myData}/></main>
I recommend for Svelte-Users the direct import of the component source"svelte-generic-crud-table/src/SvelteGenericCrudTable.svelte".
// import SvelteGenericCrudTable from "svelte-generic-crud-table";import SvelteGenericCrudTable from "svelte-generic-crud-table/src/SvelteGenericCrudTable.svelte";
About
Agnostic web-component for object-arrays with CRUD functionality.
