Svelte Generic Crud Table

Overview

The Svelte Generic CRUD Table is a self-contained sortable table component with an inline edit option. It allows for CRUD operations on Object-Arrays and includes an integrated paginator for pagination. This component can be easily installed and used in Svelte projects.

Features

• Self-containing sortable table component
• Inline edit option
• Integrated paginator for pagination
• Allows CRUD operations for Object-Arrays

Installation

To install the Svelte Generic CRUD Table, follow these steps:

1. Add the package to your project using the command: npm install svelte-generic-crud-table

2. Import the Svelte Generic CRUD Table component in your Svelte project:

   import SvelteGenericCrudTable from 'svelte-generic-crud-table'
   

3. Use the <crud-table></crud-table> tag in your component to show and edit the content of the table.

4. Configure the column settings for the table by specifying the desired behavior for each column:

   • name: The key from your data-array, used as the column name.
   • show: Boolean value to determine if the column should be displayed (optional, default: false).
   • edit: Boolean value to determine if the column should be editable (optional, default: false).
   • width: The width of the column in pixels or ems (optional, default: 100px).
   • description: A tooltip for the column’s name (optional, default: unset).
   • tooltip: Boolean value to determine if the full text should be shown as a tooltip when it doesn’t fit in the field (optional, default: false).
   • type: The type of the column. It can be either ’text’ or ‘html’ (optional, default: text).

Summary

The Svelte Generic CRUD Table is a versatile table component that allows for easy sorting and editing of data in Svelte projects. It provides CRUD operations for Object-Arrays and includes pagination. With customizable column settings, it offers a flexible solution for displaying and manipulating data in a table format.