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 <textarea>

Known bugs

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.

Example

REPL is here

<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)}
        />

Events

Events dispatched -

requestdeleterow request delete of a row. The parent then deletes the row (or not).
startedit when editing of a row starts.
endedit when editing of a row finishes. This happens either when the user clicks the Save icon or clicks on a different row.
addrow when a row is created. The parent can then populate with default data.

The affected row number is passed in event.detail.
See example above.

Select Options

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[].

The format is -

options = [
    {value:'r' , text:'Red'},
    {value:'g' , text:'Green'},
    {value:'b' , text:'Blue'},
    {value:'y' , text:'Yuck'},
];

Warning

Raw HTML may be displayed & edited using columns_setting[n].type = 'html'.
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.

keithj2780/svelte-CRUD-Table