Svelte Crud Table
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