svelte5-editable-table

A simple and small Svelte 5 editable table component. It allows editing data and performing extra operations through icon selection.

This project started as a fork of svelte-generic-crud-table. However, almost all the code has been rewritten to improve performance, add new features, and remove outdated ones.

Feature

• Editable Cells: Allows users to edit specific cells in the table.
• Customizable Columns: Configure columns with options like edit, width, and displayName.
• Row Selection: Supports single and multiple row selection.
• Custom Styles: Define styles for rows, including hover, click, and alternate row styles.
• Icons and Tooltips: Customize icons and tooltips for actions like edit, operation, confirm, and cancel.
• Sorting: Enable or disable sorting for columns.
• Responsive Design: Automatically adjusts column widths with the autowidth option.
• Event Callbacks: Handle events like cell clicks, updates, and operations with custom callbacks.

Install

npm install -save svelte5-editable-table 

Usage

<script> 
  import {SveltEditeTable} from "svelte5-editable-table";  
</script> 

<SvelteEditTable  
               table_config={table_config}
               rows_data={rows}/>  

Sample Data and config

// define sample data (below data are from kaggle web site)...

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" }, 
 ];


// define column configures
const columns = [            
        {key: 'index', displayName:'Index'},
        {key: 'firstname', displayName: 'FirstName'},
        {key: 'lastname', displayName: 'LastName'},
        {key: 'sex', displayName: 'Sex'},
        {key: 'email', displayName: 'Email', edit: true},
        {key: 'phone', displayName: 'Phone'},
        {key: 'birthdate', displayName:'BirthDate'}
        ];

// define table configuration
 let table_config = {             
        columns_setting: columns,        
      }        

Props of columns_setting

Props of table_config

Examples for 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.

For example:

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. For example:

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.

Props of component

Pass the following parameters to the component:

Selecting multiple Rows

• By default, single row selection is handled by clicking on a row. However, multiple row selection is managed through the 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}  
/>