svelte-generic-crud-table
Advanced tools
Readme
<crud-table></crud-table>import SvelteGenericCrudTable from 'svelte-generic-crud-table'A self-containing sortable table component with inline edit option.
Allows CRUD-operations for Object-Arrays.
npm install svelte-generic-crud-table --save-dev
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.
This is used as id for the component.
The 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 -> column_setting:show true/false.
As webcomponent use event.target.
As Svelte-Component use event.detail to fetch the data.
Have a look inside event.target.body / event.detail.body to see original element.
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', displayName: 'Top-Jobs', show: true, edit: true, width: '150px', description: 'The job'},
{name: 'name', displayName: 'Account-ID', 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
}
You can replace the icon for "DETAILS" by a text. Perhaps you like to specify the acvtion behind the button more concrete.
<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>
<script>
import SvelteGenericCrudTable from "svelte-generic-crud-table";
import {onMount} from 'svelte';
import {goto} from "@sapper/app";
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);
}
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}
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";
FAQs
<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB
The npm package svelte-generic-crud-table receives a total of 19 weekly downloads. As such, svelte-generic-crud-table popularity was classified as not popular.
We found that svelte-generic-crud-table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.