Svelte Crud Table

keithj2780
2

Download

svelte-CRUD-Table

Lightweight CRUD table written using Svelte.
No dependencies, reasonable functionality and no bloat.
MIT Licence.

Features

Lightweight with no dependencies, less than 200 LOC
data is an array of objects
configurable columns, show/hide, initial width, data type, column name
supports display & edit of several data types - text, HTML, colour, date, time, select/option lists
resizable column widths (any column can have resizing disabled)
double click a row to edit (can be disabled)
Edit & Delete buttons for each row (can be disabled)
Add Row button (can be disabled)
dispatchs events on edit, add row, delete row
only a portion of the rows in the array can be displayed. This facilitates pagination by the parent.
configurable text alignment for each column - left, center, right
data is updated as soon as it is edited
CRUD is optional. This can be used simply to Display an array of objects

Not implemented

In the interests of no bloat, several things are not implemented -

Row sorting
Hiding of columns by user
Filtering of rows
Pagination
Styling
Lazy loading
NPM package. You'll probably want to style it yourself, so copy Table.svelte & svgIcon.js into your project.
number data type

Much of the above could be implemented by the parent.

Data Types

text is just text
email is just text
html is displayed using {@html...} Be very careful
select has the value of the option
date must be format YYYY-MM-DD
colour must be format of #rrggbb

The data types date, color and email are edited using <input type="xxx">. text & html use </p> <h2 id="known-bugs">Known bugs</h2> <ul> <li>Resizable div doesn't extend to fill the header div. This happens when some headers are 2 or more lines high, and some aren't.</li> </ul> <h2 id="example">Example</h2> <p>REPL is <a target="_blank" rel="nofollow noreferrer noopener external" href="https://svelte.dev/repl/1d086bc8c4c3413e950b8f9ee644e267?version=3.46.2" title="svelte theme">here</a></p> <pre><code><script> import Table from './Table.svelte'; const table_config = { // remove any of these to prevent that user action options: ['CREATE', 'EDIT', 'DELETE','DBLCLICKEDIT'], row_settings : { firstRow: 0, // pagination is implemented by parent lastRow:9999, }, columns_setting: [ {name: 'name', show: true, resizable:true, edit: true, width: 150, type:'text', align:'left', description:'Name'}, {name: 'role', show: true, resizable:true, edit: true, width: 350, type:'html', align:'left', description: 'Role'}, {name: 'email', show: true, resizable:true, edit: true, width: 350, type:'email', align:'right', description: 'Email'}, {name: 'favCol', show: true, resizable:true, edit: true, width: 150, type: 'select', options:[], align:'center', description: 'Fav Colour'}, {name: 'color', show: true, resizable:true, edit: true, width: 100, type: 'color', align:'center', description: 'Assigned Colour', }, {name: 'dt', show: true, resizable:true, edit: true, width: 140, type: 'date', align:'center', description: 'Date', } ], }; table_config.columns_setting[3].options = [ {value:'r' , text:'Rouge'}, {value:'g' , text:'Green'}, {value:'b' , text:'Bleu'}, {value:'y' , text:'Yuck'} ]; let myData = [ {name:"Name 43 is Fred",email:"fred33@myco.com",role:"DevOps Engineer",favCol:"b",color:"#c99f84",dt:"2009-08-29"}, {name:"Name 44 is Fred",email:"fred44@myco.com",role:"DevOps Engineer",favCol:"g",color:"#a0e3be",dt:"2011-09-27"}, {name:"Name 45 is Fred",email:"fred@myco.com",role:"Application Developer",favCol:"r",color:"#c89aab",dt:"2000-05-10"}, {name:"Name 46 is Fred",email:"fred@myco.com",role:"Data Entry",favCol:"g",color:"#89f0eb",dt:"1997-05-07"}, {name:"Name 47 is Fred",email:"fred@myco.com",role:"UX Designer & UI Developer",favCol:"r",color:"#d7beb9",dt:"2001-08-05"}, {name:"Name 48 is Fred",email:"fred@myco.com",role:"Web Developer",favCol:"y",color:"#c6a2a6",dt:"2003-08-13"}, {name:"Name 49 is Fred",email:"fred@myco.com",role:"SQL Developer",favCol:"y",color:"#b4b6de",dt:"1999-02-27"}, {name:"Name 50 is Fred",email:"fred@myco.com",role:"Web Designer",favCol:"b",color:"#d1d2ad",dt:"1997-07-27"}, {name:"Name 51 is Fred",email:"fred@myco.com",role:"Application Developer",favCol:"r",color:"#febb87",dt:"2001-11-19"}, ]; function onStartEdit(e) {console.log('start edit',e.detail);} function onEndEdit(e) {console.log('end edit ',e.detail);} function onAddRow() {console.log('addrow ',e.detail);} function requestdeleterow(e) {console.log('request delete row ',e.detail);} </script> <Table config={table_config} bind:data={myData} on:startedit={onStartEdit} on:endedit={onEndEdit} on:addrow={onAddRow} on:requestdeleterow={(e)=>requestdeleterow(e)} /> </code></pre> <h2 id="events">Events</h2> <p>Events dispatched -</p> <ul> <li><em>requestdeleterow</em> request delete of a row. The parent then deletes the row (or not).</li> <li><em>startedit</em> when editing of a row starts.</li> <li><em>endedit</em> when editing of a row finishes. This happens either when the user clicks the <em>Save</em> icon or clicks on a different row.</li> <li><em>addrow</em> when a row is created. The parent can then populate with default data.</li> </ul> <p>The affected row number is passed in event.detail.<br>See example above. </p> <h2 id="select-options">Select Options</h2> <p>A column can have type = 'select'. This will allow the values to be selected from a dropdown list. The content and values of this list are specified in columns_setting[n].options[]. </p> <p>The format is - </p> <pre><code>options = [ {value:'r' , text:'Red'}, {value:'g' , text:'Green'}, {value:'b' , text:'Blue'}, {value:'y' , text:'Yuck'}, ]; </code></pre> <h2 id="warning">Warning</h2> <p>Raw HTML may be displayed & edited using columns_setting[n].type = 'html'.<br>Sanitise it first or don't allow edit or don't use type='html'! Or even better, delete that line of code from Table.svelte.</p> </div> <div><h2 class="text-xl font-bold" data-svelte-h="svelte-1mna9pd">Top categories</h2> <div class="categories grid grid-cols-1 md:grid-cols-3 gap-1 lg:grid-cols-4 mt-3"><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/tailwind">tailwind </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/daisyui">daisyui </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/admin template">admin template </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/popup">popup </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/mdsvex">mdsvex </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/portfolio">portfolio </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/blog">blog </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/form">form </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ecommerce">ecommerce </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ui">ui </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/carousel">carousel </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/auth">auth </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/dark">dark </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/seo">seo </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/image">image </a><a data-sveltekit-prefetch class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/routing">routing </a></div></div> <footer class="border-t border-gray-400 mt-20 py-4"><ul class="md:flex items-center"><li class="mr-3"><a class="underline hover:text-red-500" href="/" title="Themes">Themes</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/resources" title="Resources">Resources</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/jobs" title="Jobs">Jobs</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="https://1.envato.market/4Pe0Br" title="Premium Templates">Premium Templates</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/category" title="Categories">Categories</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/blog" title="Blog">Blog</a> </li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit" title="Submit">Submit</a> </li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit?hire=true" title="Hire">Hire</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/sitemap.xml" title="Sitemap">Sitemap</a> </li></ul></footer></div> <div class="loader-animation svelte-1w762av" data-svelte-h="svelte-10saoxn"><img src="/loader.svg" alt="Loading Svelte Themes"></div> <script type="application/json" data-sveltekit-fetched data-url="/api/keithj2780/svelte-CRUD-Table.json" data-ttl="2592000">{"status":200,"statusText":"","headers":{},"body":"{\"id\":\"R_kgDOGiH-rw\",\"stargazerCount\":2,\"updatedAt\":\"2022-12-20T21:42:29Z\",\"homepageUrl\":null,\"openGraphImageUrl\":\"https://opengraph.githubassets.com/f450c0464723d7d56eda08f5567da5668b297970553ee0236d5af1d6d86dfc9f/keithj2780/svelte-CRUD-Table\",\"description\":null,\"descriptionHTML\":\"\u003Cdiv>\u003C/div>\",\"forkCount\":0,\"url\":\"https://github.com/keithj2780/svelte-CRUD-Table\",\"nameWithOwner\":\"keithj2780/svelte-CRUD-Table\",\"name\":\"svelte-CRUD-Table\",\"readme1\":{\"text\":\"# svelte-CRUD-Table\\n\\nLightweight CRUD table written using Svelte. \\nNo dependencies, reasonable functionality and no bloat. \\nMIT Licence. \\n\\n## Features\\n\\n- Lightweight with no dependencies, less than 200 LOC\\n- data is an array of objects\\n- configurable columns, show/hide, initial width, data type, column name\\n- supports display & edit of several data types - text, HTML, colour, date, time, select/option lists\\n- resizable column widths (any column can have resizing disabled)\\n- double click a row to edit (can be disabled)\\n- *Edit* & *Delete* buttons for each row (can be disabled)\\n- *Add Row* button (can be disabled)\\n- dispatchs events on edit, add row, delete row\\n- only a portion of the rows in the array can be displayed. This facilitates pagination by the parent.\\n- configurable text alignment for each column - left, center, right\\n- data is updated as soon as it is edited\\n- CRUD is optional. This can be used simply to Display an array of objects\\n\\n## Not implemented\\n\\nIn the interests of *no bloat*, several things are not implemented - \\n\\n- Row sorting\\n- Hiding of columns by user\\n- Filtering of rows\\n- Pagination\\n- Styling\\n- Lazy loading\\n- NPM package. You'll probably want to style it yourself, so copy Table.svelte & svgIcon.js into your project.\\n- *number* data type\\n\\nMuch of the above could be implemented by the parent. \\n\\n## Data Types\\n\\n- text is just text\\n- email is just text\\n- html is displayed using {@html...} **Be very careful**\\n- select has the value of the option\\n- date must be format YYYY-MM-DD\\n- colour must be format of #rrggbb\\n\\nThe data types date, color and email are edited using <input type=\\\"xxx\\\">. \\ntext & html use \u003Ctextarea>\\n\\n## Known bugs\\n\\n- Resizable div doesn't extend to fill the header div. This happens when some headers are 2 or more lines high, and some aren't.\\n\\n## Example\\n\\nREPL is [here](https://svelte.dev/repl/1d086bc8c4c3413e950b8f9ee644e267?version=3.46.2)\\n\\n```\\n\u003Cscript>\\n import Table from './Table.svelte';\\n\\n const table_config = {\\n // remove any of these to prevent that user action\\n options: ['CREATE', 'EDIT', 'DELETE','DBLCLICKEDIT'],\\n row_settings : {\\n firstRow: 0, // pagination is implemented by parent\\n lastRow:9999,\\n },\\n columns_setting: [\\n {name: 'name', show: true, resizable:true, edit: true, width: 150, type:'text', align:'left', description:'Name'},\\n {name: 'role', show: true, resizable:true, edit: true, width: 350, type:'html', align:'left', description: 'Role'},\\n {name: 'email', show: true, resizable:true, edit: true, width: 350, type:'email', align:'right', description: 'Email'},\\n {name: 'favCol', show: true, resizable:true, edit: true, width: 150, type: 'select', options:[], align:'center', description: 'Fav Colour'},\\n {name: 'color', show: true, resizable:true, edit: true, width: 100, type: 'color', align:'center', description: 'Assigned Colour', },\\n {name: 'dt', show: true, resizable:true, edit: true, width: 140, type: 'date', align:'center', description: 'Date', }\\n ],\\n };\\n\\n table_config.columns_setting[3].options = [\\n {value:'r' , text:'Rouge'},\\n {value:'g' , text:'Green'},\\n {value:'b' , text:'Bleu'},\\n {value:'y' , text:'Yuck'}\\n ];\\n\\n let myData = [\\n {name:\\\"Name 43 is Fred\\\",email:\\\"fred33@myco.com\\\",role:\\\"DevOps Engineer\\\",favCol:\\\"b\\\",color:\\\"#c99f84\\\",dt:\\\"2009-08-29\\\"},\\n {name:\\\"Name 44 is Fred\\\",email:\\\"fred44@myco.com\\\",role:\\\"DevOps Engineer\\\",favCol:\\\"g\\\",color:\\\"#a0e3be\\\",dt:\\\"2011-09-27\\\"},\\n {name:\\\"Name 45 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"Application Developer\\\",favCol:\\\"r\\\",color:\\\"#c89aab\\\",dt:\\\"2000-05-10\\\"},\\n {name:\\\"Name 46 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"Data Entry\\\",favCol:\\\"g\\\",color:\\\"#89f0eb\\\",dt:\\\"1997-05-07\\\"},\\n {name:\\\"Name 47 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"UX Designer & UI Developer\\\",favCol:\\\"r\\\",color:\\\"#d7beb9\\\",dt:\\\"2001-08-05\\\"},\\n {name:\\\"Name 48 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"Web Developer\\\",favCol:\\\"y\\\",color:\\\"#c6a2a6\\\",dt:\\\"2003-08-13\\\"},\\n {name:\\\"Name 49 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"SQL Developer\\\",favCol:\\\"y\\\",color:\\\"#b4b6de\\\",dt:\\\"1999-02-27\\\"},\\n {name:\\\"Name 50 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"Web Designer\\\",favCol:\\\"b\\\",color:\\\"#d1d2ad\\\",dt:\\\"1997-07-27\\\"},\\n {name:\\\"Name 51 is Fred\\\",email:\\\"fred@myco.com\\\",role:\\\"Application Developer\\\",favCol:\\\"r\\\",color:\\\"#febb87\\\",dt:\\\"2001-11-19\\\"},\\n ];\\n\\n function onStartEdit(e) {console.log('start edit',e.detail);}\\n function onEndEdit(e) {console.log('end edit ',e.detail);}\\n function onAddRow() {console.log('addrow ',e.detail);}\\n function requestdeleterow(e) {console.log('request delete row ',e.detail);}\\n\u003C/script>\\n\\n \u003CTable\\n config={table_config}\\n bind:data={myData}\\n on:startedit={onStartEdit}\\n on:endedit={onEndEdit}\\n on:addrow={onAddRow}\\n on:requestdeleterow={(e)=>requestdeleterow(e)}\\n />\\n\\n```\\n\\n## Events\\n\\nEvents dispatched -\\n\\n- *requestdeleterow* request delete of a row. The parent then deletes the row (or not).\\n- *startedit* when editing of a row starts.\\n- *endedit* when editing of a row finishes. This happens either when the user clicks the *Save* icon or clicks on a different row.\\n- *addrow* when a row is created. The parent can then populate with default data.\\n\\nThe affected row number is passed in event.detail. \\nSee example above. \\n\\n## Select Options\\n\\nA column can have type = 'select'. This will allow the values to be selected from a dropdown list. The content and values of this list are specified in columns_setting[n].options[]. \\n\\nThe format is - \\n\\n```\\noptions = [\\n {value:'r' , text:'Red'},\\n {value:'g' , text:'Green'},\\n {value:'b' , text:'Blue'},\\n {value:'y' , text:'Yuck'},\\n];\\n```\\n\\n## Warning\\n\\nRaw HTML may be displayed & edited using columns_setting[n].type = 'html'. \\nSanitise it first or don't allow edit or don't use type='html'! Or even better, delete that line of code from Table.svelte.\\n\"},\"readme2\":null,\"readme3\":null,\"readme4\":null,\"readme5\":null,\"repositoryTopics\":{\"nodes\":[]},\"owner\":{\"avatarUrl\":\"https://avatars.githubusercontent.com/u/12192088?s=30&v=4\",\"url\":\"https://github.com/keithj2780\",\"login\":\"keithj2780\"},\"htmlContent\":\"\u003Ch1 id=\\\"svelte-crud-table\\\">svelte-CRUD-Table\u003C/h1>\\n\u003Cp>Lightweight CRUD table written using Svelte.\u003Cbr>No dependencies, reasonable functionality and no bloat.\u003Cbr>MIT Licence. \u003C/p>\\n\u003Ch2 id=\\\"features\\\">Features\u003C/h2>\\n\u003Cul>\\n\u003Cli>Lightweight with no dependencies, less than 200 LOC\u003C/li>\\n\u003Cli>data is an array of objects\u003C/li>\\n\u003Cli>configurable columns, show/hide, initial width, data type, column name\u003C/li>\\n\u003Cli>supports display & edit of several data types - text, HTML, colour, date, time, select/option lists\u003C/li>\\n\u003Cli>resizable column widths (any column can have resizing disabled)\u003C/li>\\n\u003Cli>double click a row to edit (can be disabled)\u003C/li>\\n\u003Cli>\u003Cem>Edit\u003C/em> & \u003Cem>Delete\u003C/em> buttons for each row (can be disabled)\u003C/li>\\n\u003Cli>\u003Cem>Add Row\u003C/em> button (can be disabled)\u003C/li>\\n\u003Cli>dispatchs events on edit, add row, delete row\u003C/li>\\n\u003Cli>only a portion of the rows in the array can be displayed. This facilitates pagination by the parent.\u003C/li>\\n\u003Cli>configurable text alignment for each column - left, center, right\u003C/li>\\n\u003Cli>data is updated as soon as it is edited\u003C/li>\\n\u003Cli>CRUD is optional. This can be used simply to Display an array of objects\u003C/li>\\n\u003C/ul>\\n\u003Ch2 id=\\\"not-implemented\\\">Not implemented\u003C/h2>\\n\u003Cp>In the interests of \u003Cem>no bloat\u003C/em>, several things are not implemented - \u003C/p>\\n\u003Cul>\\n\u003Cli>Row sorting\u003C/li>\\n\u003Cli>Hiding of columns by user\u003C/li>\\n\u003Cli>Filtering of rows\u003C/li>\\n\u003Cli>Pagination\u003C/li>\\n\u003Cli>Styling\u003C/li>\\n\u003Cli>Lazy loading\u003C/li>\\n\u003Cli>NPM package. You'll probably want to style it yourself, so copy Table.svelte & svgIcon.js into your project.\u003C/li>\\n\u003Cli>\u003Cem>number\u003C/em> data type\u003C/li>\\n\u003C/ul>\\n\u003Cp>Much of the above could be implemented by the parent. \u003C/p>\\n\u003Ch2 id=\\\"data-types\\\">Data Types\u003C/h2>\\n\u003Cul>\\n\u003Cli>text is just text\u003C/li>\\n\u003Cli>email is just text\u003C/li>\\n\u003Cli>html is displayed using {@html...} \u003Cstrong>Be very careful\u003C/strong>\u003C/li>\\n\u003Cli>select has the value of the option\u003C/li>\\n\u003Cli>date must be format YYYY-MM-DD\u003C/li>\\n\u003Cli>colour must be format of #rrggbb\u003C/li>\\n\u003C/ul>\\n\u003Cp>The data types date, color and email are edited using <input type="xxx">. \\ntext & html use \u003Ctextarea>\u003C/p>\\n\u003Ch2 id=\\\"known-bugs\\\">Known bugs\u003C/h2>\\n\u003Cul>\\n\u003Cli>Resizable div doesn't extend to fill the header div. This happens when some headers are 2 or more lines high, and some aren't.\u003C/li>\\n\u003C/ul>\\n\u003Ch2 id=\\\"example\\\">Example\u003C/h2>\\n\u003Cp>REPL is \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://svelte.dev/repl/1d086bc8c4c3413e950b8f9ee644e267?version=3.46.2\\\" title=\\\"svelte theme\\\">here\u003C/a>\u003C/p>\\n\u003Cpre>\u003Ccode><script>\\n import Table from './Table.svelte';\\n\\n const table_config = {\\n // remove any of these to prevent that user action\\n options: ['CREATE', 'EDIT', 'DELETE','DBLCLICKEDIT'],\\n row_settings : {\\n firstRow: 0, // pagination is implemented by parent\\n lastRow:9999,\\n },\\n columns_setting: [\\n {name: 'name', show: true, resizable:true, edit: true, width: 150, type:'text', align:'left', description:'Name'},\\n {name: 'role', show: true, resizable:true, edit: true, width: 350, type:'html', align:'left', description: 'Role'},\\n {name: 'email', show: true, resizable:true, edit: true, width: 350, type:'email', align:'right', description: 'Email'},\\n {name: 'favCol', show: true, resizable:true, edit: true, width: 150, type: 'select', options:[], align:'center', description: 'Fav Colour'},\\n {name: 'color', show: true, resizable:true, edit: true, width: 100, type: 'color', align:'center', description: 'Assigned Colour', },\\n {name: 'dt', show: true, resizable:true, edit: true, width: 140, type: 'date', align:'center', description: 'Date', }\\n ],\\n };\\n\\n table_config.columns_setting[3].options = [\\n {value:'r' , text:'Rouge'},\\n {value:'g' , text:'Green'},\\n {value:'b' , text:'Bleu'},\\n {value:'y' , text:'Yuck'}\\n ];\\n\\n let myData = [\\n {name:"Name 43 is Fred",email:"fred33@myco.com",role:"DevOps Engineer",favCol:"b",color:"#c99f84",dt:"2009-08-29"},\\n {name:"Name 44 is Fred",email:"fred44@myco.com",role:"DevOps Engineer",favCol:"g",color:"#a0e3be",dt:"2011-09-27"},\\n {name:"Name 45 is Fred",email:"fred@myco.com",role:"Application Developer",favCol:"r",color:"#c89aab",dt:"2000-05-10"},\\n {name:"Name 46 is Fred",email:"fred@myco.com",role:"Data Entry",favCol:"g",color:"#89f0eb",dt:"1997-05-07"},\\n {name:"Name 47 is Fred",email:"fred@myco.com",role:"UX Designer & UI Developer",favCol:"r",color:"#d7beb9",dt:"2001-08-05"},\\n {name:"Name 48 is Fred",email:"fred@myco.com",role:"Web Developer",favCol:"y",color:"#c6a2a6",dt:"2003-08-13"},\\n {name:"Name 49 is Fred",email:"fred@myco.com",role:"SQL Developer",favCol:"y",color:"#b4b6de",dt:"1999-02-27"},\\n {name:"Name 50 is Fred",email:"fred@myco.com",role:"Web Designer",favCol:"b",color:"#d1d2ad",dt:"1997-07-27"},\\n {name:"Name 51 is Fred",email:"fred@myco.com",role:"Application Developer",favCol:"r",color:"#febb87",dt:"2001-11-19"},\\n ];\\n\\n function onStartEdit(e) {console.log('start edit',e.detail);}\\n function onEndEdit(e) {console.log('end edit ',e.detail);}\\n function onAddRow() {console.log('addrow ',e.detail);}\\n function requestdeleterow(e) {console.log('request delete row ',e.detail);}\\n</script>\\n\\n <Table\\n config={table_config}\\n bind:data={myData}\\n on:startedit={onStartEdit}\\n on:endedit={onEndEdit}\\n on:addrow={onAddRow}\\n on:requestdeleterow={(e)=>requestdeleterow(e)}\\n />\\n\u003C/code>\u003C/pre>\\n\u003Ch2 id=\\\"events\\\">Events\u003C/h2>\\n\u003Cp>Events dispatched -\u003C/p>\\n\u003Cul>\\n\u003Cli>\u003Cem>requestdeleterow\u003C/em> request delete of a row. The parent then deletes the row (or not).\u003C/li>\\n\u003Cli>\u003Cem>startedit\u003C/em> when editing of a row starts.\u003C/li>\\n\u003Cli>\u003Cem>endedit\u003C/em> when editing of a row finishes. This happens either when the user clicks the \u003Cem>Save\u003C/em> icon or clicks on a different row.\u003C/li>\\n\u003Cli>\u003Cem>addrow\u003C/em> when a row is created. The parent can then populate with default data.\u003C/li>\\n\u003C/ul>\\n\u003Cp>The affected row number is passed in event.detail.\u003Cbr>See example above. \u003C/p>\\n\u003Ch2 id=\\\"select-options\\\">Select Options\u003C/h2>\\n\u003Cp>A column can have type = 'select'. This will allow the values to be selected from a dropdown list. The content and values of this list are specified in columns_setting[n].options[]. \u003C/p>\\n\u003Cp>The format is - \u003C/p>\\n\u003Cpre>\u003Ccode>options = [\\n {value:'r' , text:'Red'},\\n {value:'g' , text:'Green'},\\n {value:'b' , text:'Blue'},\\n {value:'y' , text:'Yuck'},\\n];\\n\u003C/code>\u003C/pre>\\n\u003Ch2 id=\\\"warning\\\">Warning\u003C/h2>\\n\u003Cp>Raw HTML may be displayed & edited using columns_setting[n].type = 'html'.\u003Cbr>Sanitise it first or don't allow edit or don't use type='html'! Or even better, delete that line of code from Table.svelte.\u003C/p>\\n\"}"}</script> <script> { __sveltekit_2vl76k = { base: new URL("..", location).pathname.slice(0, -1), env: {} }; const element = document.currentScript.parentElement; const data = [null,null]; Promise.all([ import("../_app/immutable/entry/start.da83271d.js"), import("../_app/immutable/entry/app.509a79e0.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 6], data, form: null, error: null }); }); if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('../service-worker.js'); }); } } </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" crossorigin="anonymous" ></script> </div> </body> </html>