svelte-generic-crud-table

    1.5.92 • Public • Published

    svelte-generic-crud-table

    • Web-component: <crud-table></crud-table>
    • or Svelte-component: import SvelteGenericCrudTable from 'svelte-generic-crud-table'

    A self-containing sortable table component with inline edit option. See <table-pager> with integrated paginator for pagination. table-pager

    Allows CRUD-operations for Object-Arrays.

    Try out live example:

    Published on webcomponents.org

    Install

    npm install svelte-generic-crud-table --save-dev
    

    State (master):

    Build Status Coverage Status

    Usage

    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.

    column settings

    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_settings name. All other attributes are optional.

        const table_config = {
            name: 'Awesome',
            options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
            columns_setting: [
                {name: 'id', show: false, edit: true, width: '0px'},
                {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
                {name: 'name', show: true, edit: true, width: '150px', tooltip: true},
                {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
                {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
            ],
            details_text: 'detail'   // replace the standard icon with an text-link
        }
    • name: the key from your data-array. This is used as column name.
    • show: true/false; Should this column displayed? (optional, default: false)
    • edit: true/false; Set this field editable or not. (optional, default: false)
    • width: px/em; set the field width. (optional, default: 100px)
    • description: A tooltip for the columns name. E.g. to see the full name or other description. (optional, default: unset)
    • tooltip: true/false; When the text does not fit into the field you can show the full text as tooltip. (optional, default: false)
    • type: There are two types: (optional, default: text)
      • text: Default.
      • html: The value/text will be interpreted as HTML.

    See example:

    <crud-table></crud-table>

    <custom-element-demo>
    <template>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1'>
        <title>Generic Crud Table</title>
        <link rel='icon' type='image/png' href='favicon.png'>
        <script defer src='https://ivosdc.github.io/svelte-generic-crud-table/build/crud-table.js'></script>
    </head>
    
    <body>
    <hr>
    <crud-table></crud-table>
    <hr>
    </body>
    <script src='https://ivosdc.github.io/svelte-generic-crud-table/test-data.js'></script>
    <script src='https://ivosdc.github.io/svelte-generic-crud-table/crud-table-config-html.js'></script>
    </template>
    </custom-element-demo>
    <crud-table></crud-table>

    Svelte-Component - implementation example:

    <script>
        import SvelteGenericCrudTable from "svelte-generic-crud-table";
        import {onMount} from 'svelte';
        import {goto} from "@sapper/app";
    
        const sortStore = [];
    
        let myData = [];
    
        onMount(reload);
    
        function reload() {
            get().then( (result) => {
                    myData = result;
            });
        }
    
        function handleCreate(event) {
            post({name: "new entry"}).then(() => {
                        reload();
                    });
        }
    
    
        function handleDelete(event) {
            delete(event.detail.body.id).then(() => {
                        reload();
                    });
        }
    
        function handleUpdate(event) {
            update(event.detail.body.id, event.detail.body)
                    .then(() => {
                        reload();
                    });
        }
    
        function handleDetail(event) {
            goto('/project/' + event.detail.body.id);
        }
    
        function handleSort(event) {
            const column = event.detail.column;
            if (sortStore[column] === undefined || sortStore[column] === 'DESC') {
                sortStore[column] = 'ASC';
            } else {
                sortStore[column] = 'DESC';
            }
    
            const tableSort = (a, b) => {
                var keyA = a[column];
                var keyB = b[column];
                if (sortStore[column] === 'ASC') {
                    if (keyA < keyB) return -1;
                    if (keyA > keyB) return 1;
                } else {
                    if (keyA < keyB) return 1;
                    if (keyA > keyB) return -1;
                }
                return 0;
            };
    
            myData = myData.sort(tableSort);
        }
    
        const table_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>
        <SvelteGenericCrudTable on:delete={handleDelete}
                                on:update={handleUpdate}
                                on:create={handleCreate}
                                on:details={handleDetail}
                                on:sort={handleSort}
                                table_config={table_config}
                                table_data={myData}/>
    </main>

    Donate

    Install

    npm i svelte-generic-crud-table

    DownloadsWeekly Downloads

    163

    Version

    1.5.92

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    27

    Last publish

    Collaborators

    • nologin