Web Spreadsheet
A simple Excel-like spreadsheet web component built with svelte.
Overview
The web-spreadsheet is an innovative and lightweight spreadsheet component designed for developers seeking a simple, Excel-like experience in their web applications. Built using Svelte, this tool is dependency-free and compatible with any JavaScript framework or UI library. With a compact size of just 35KB (around 12KB when gzipped), it ensures fast loading times, making it an excellent choice for performance-conscious projects.
This component supports various cell types, including input fields, selects, multi-selects, images, dates, and times, providing versatility for different data handling needs. With features like custom validation, formatting, and computed functions, web-spreadsheet stands out as a powerful tool for creating interactive and dynamic applications.
Features
- Lightweight Design: At only 35KB (gzipped ~12KB), it loads quickly and integrates seamlessly into applications without adding significant overhead.
- Multiple Cell Types: Supports various cell types—input, select, multi-select, image, date, and time—allowing flexibility in how data is presented and managed.
- Custom Validators and Formatters: You can easily implement custom validators, formatters, and computed functions to tailor the spreadsheet to your specific use cases.
- Undo/Redo Functionality: Built-in support for undo and redo actions using Ctrl+Z and Ctrl+Y, enabling users to easily revert changes.
- Change Event Emission: Automatically emits a "change" event when row data changes, allowing developers to react promptly to updates.
- Image Uploads and Previews: Lets users upload images and preview them directly within the spreadsheet for a more integrated experience.
- Context Menu Options: Right-clicking on row heads provides a context menu that allows for inserting and deleting rows conveniently.
- Keyboard Navigation Support: Mimics Excel’s keypress behavior, supporting arrow keys, escape, tab, delete, and backspace for intuitive navigation.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- Pug
Pug is a high-performance template engine for Node.js and browsers that enables developers to write HTML templates using a concise and intuitive syntax. It supports a range of features, including template inheritance, conditionals, loops, mixins, and more, and can be easily integrated into a variety of web frameworks and build tools.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.