svelte-generic-crud-table

A self-contained sortable table component with inline edit functionality that supports CRUD operations for object arrays. Available as both a web component (<crud-table>) and a Svelte component.

Key Features:

• Supports Create, Read, Update, Delete (CRUD) operations
• Sortable columns
• Inline editing capability
• Works as both a web component and Svelte component (with special Svelte integration)
• Customizable column settings and display options

Target Audience:
Developers needing a ready-to-use table component with editing capabilities for Svelte applications or web projects.

Configuration Options:

• name: Used as component ID
• options: Enable specific CRUD operations (CREATE, EDIT, DELETE, DETAILS)
• columns_setting: Configure column behavior with properties like:
  • name (required key from data array)
  • displayName (custom header text)
  • show (visibility)
  • edit (editability)
  • width (column sizing)
  • description (tooltip)
  • type (text or HTML content)
• details_text: Custom text replacement for DETAILS action

Event Handling:

• Emits events for create, update, delete, and detail actions
• Event data includes:
  • Original element
  • Modified data (for updates)
  • Table ID reference

Example Usage:
Try out live example
Webcomponents.org listing

Svelte-Specific Notes:

• Recommended to import directly from source for Svelte projects:
  import SvelteGenericCrudTable from "svelte-generic-crud-table/src/SvelteGenericCrudTable.svelte"
• Uses Svelte's event system (on:create, on:update etc.)
• Supports Sapper routing integration