Intro
A simple Excel-like spreadsheet web component built with svelte.
- dependency free
- compatible with any javascript framework/UI library
- light-weighted (size: 35KB, gzip: ~12KB)
- multiple cell type supported (input, select, multi-select, image, date, time)
- support customized validator, formatter and computed function
- support UNDO/REDO with ctrl+Z & ctrl+Y
How to use
Install with npm:
npm install web-spreadsheet --save
and import it in your code:
import 'web-spreadsheet';
You can also load the code from a CDN such as jsdelivr:
<script src="https://cdn.jsdelivr.net/npm/web-spreadsheet@latest/lib/index.min.js"></script>
then you can use the customElement <spread-sheet /> in your HTML code.
If you're using it in a Vue.js project, you can pass proper props columns and data into customElement such as <spread-sheet :columns="columns" :data="rows"/> Then your spreadsheet will come into view.
The columns and data props look like the code on the left←
FEATURES
- cell type: input, select, multi-select, image, date, time (depends on columns array)
- when the row data changed, it will automaticly emit a "change" event, so you can handle the newest row data
- validator / formatter / computed functions can be added in column.params object
- log at most 20 change history in memory, so you can press ctrl+Z/Y to UNDO/REDO
- right clicking the row head can call the context menu which can insert/delete the row
- upload images and preview images
- support sort by column
- auto switch languages(CN or EN) depends on your <html lang="___"></html>
- keypress behavior like Excel (arrows, escape, tab, delete, backspace etc)
- pasted letters by ctrl+V will fill current highlighted input cell
- for those non-modern browsers which don't support shadowDOM or customElement, you can use polyfill to let them support: just add a <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.min.js"></script> in <head>
TODO
- column actions such as insert/delete column
- ...