A simple and lightweight Svelte 5 editable table component. It allows users to edit data and perform additional operations through icon selection.
This project originated as a fork of svelte-generic-crud-table, but has since undergone a complete architectural overhaul. The codebase was almost entirely rewritten as part of a focused initiative to introduce new capabilities, optimize performance, and enable full responsiveness. In the process, outdated specifications and incompatible features from the original codebase were removed to ensure consistency, maintainability, and full alignment with Svelte 5 standards.
edit
, width
, and displayName
.autowidth
option.npm install --save svelte5-editable-table
<script>
import { SvelteEditTable } from "svelte5-editable-table";
</script>
<SvelteEditTable
table_config={table_config}
rows_data={rows}
/>
// Sample data (adapted from Kaggle)
const rows = [
{ index: 1, firstname: "Sara", lastname: "Mcguire", sex: "Female", email: "[email protected]", phone: "(971)643-6089x9160", birthdate: "17-08-21" },
{ index: 2, firstname: "Alisha", lastname: "Hebert", sex: "Male", email: "[email protected]", phone: "+1-114-355-1841x78347", birthdate: "28-06-69" },
{ index: 3, firstname: "Gwendolyn", lastname: "Sheppard", sex: "Male", email: "[email protected]", phone: "9017807728", birthdate: "25-09-15" },
{ index: 4, firstname: "Kristine", lastname: "Mccann", sex: "Female", email: "[email protected]", phone: "+1-607-333-9911x59088", birthdate: "27-07-78" },
{ index: 5, firstname: "Bobby", lastname: "Pittman", sex: "Female", email: "[email protected]", phone: "3739847538", birthdate: "17-11-89" },
];
// Column configuration
const columns = [
{ key: 'index', displayName: 'Index' },
{ key: 'firstname', displayName: 'First Name' },
{ key: 'lastname', displayName: 'Last Name' },
{ key: 'sex', displayName: 'Sex' },
{ key: 'email', displayName: 'Email' },
{ key: 'phone', displayName: 'Phone' },
{ key: 'birthdate', displayName: 'Birth Date' }
];
// Table configuration
let table_config = {
columns_setting: columns,
};
columns_setting
Name | Type | Description |
---|---|---|
key |
String | Unique key identifying the column |
displayName |
String | Name for the column header |
width |
Boolean | Width of the column. Only valid when autowidth is set to false |
edit |
Boolean | Optional. Default: false |
table_config
Option | Type | Description |
---|---|---|
columns_setting |
Object[] | Configuration of columns (array) |
autowidth |
Boolean | Automatically adjusts column widths. Default: true |
sortable |
Boolean | Enables sorting. Default: true |
operation |
Boolean | Displays an extra operation icon. Default: false |
style |
Object | Row style configuration. Allows custom styling for rows or cells. See examples below. |
icons |
Object | Optional icons (e.g., emoji) for operations or actions. See examples below. |
iconstip |
Object | Optional tooltip text for icons. See examples below. |
style
, icons
, and iconstip
style
The style
property allows you to define custom styles for rows in the table. You can specify styles for alternate rows, hovered rows, clicked rows, and selected rows. This provides flexibility to customize the appearance of the table.
let table_config = {
...existing code...
style: {
alternateRow: '#fff7fb', // Background color for alternate rows
hoverRow: "yellow", // Background color when a row is hovered
clickRow: "dashed red", // Border style for a clicked row
selectedRow: "#f0f5ff" // Background color for selected rows
},
};
alternateRow
: Sets the background color for alternate rows.hoverRow
: Sets the background color when a row is hovered.clickRow
: Sets the border style for a clicked row.selectedRow
: Sets the background color for selected rows.icons
You can customize icons for actions like edit, operation, confirm, or cancel.
let table_config = {
...existing code...
icons: {
edit: "✏️",
operation: "🗑️",
},
};
edit
: Icon for the edit action.operation
: Icon for the extra operation action.confirm
: Icon for the confirmation action.cancel
: Icon for the cancel action.iconstip
You can define tooltips for the icons to provide different context (e.g., different languages). For example:
let table_config = {
...existing code...
iconstip: {
edit: "Update",
operation: "Delete",
confirm: "確認",
},
};
edit
: Tooltip text for the edit icon.operation
: Tooltip text for the operation icon.confirm
: Tooltip text for the confirmation icon.cancel
: Tooltip text for the cancel icon.Pass the following parameters to the component:
Parameter | Callback | Description |
---|---|---|
onclickCell |
event (id, key, row) |
Triggered when a cell is clicked |
onupdate |
event (id, row) |
Triggered when the edit icon is clicked |
onoperation |
event (id, row) |
Triggered when the operation icon is clicked |
selectedrow |
Pass selected rows (id) | |
table_config |
Configuration of the table, including column settings and additional options like sorting, styling, and icons | |
rows_data |
Data of rows |
onclickCell
event and the selectedrow
property.<script>
import { SvelteEditTable } from 'svelte5-editable-table';
let selectedrow = $state([]);
function handleCell(event) {
selectedrow = [...selectedrow, event.id];
}
</script>
<SvelteEditTable
table_config={table_config}
rows_data={rows}
selectedrow={selectedrow}
onclickCell={handleCell}
/>