A simple Excel-like spreadsheet web component built with svelte.
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></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 these:
data() {
return {
columns: [
{
text: 'Fullname',
key: 'fullname',
type: 'input',
width: '200px',
props: {
maxlength: 25
},
params: {
validator: (value, row) => {
const name = (value || '').trim();
if (!name) return 'Please enter Fullname';
if (name.length > 25) return 'Fullname length should less than 25';
}
}
},
{
text: 'Department',
key: 'dept',
type: 'select',
width: '8em',
items: [
{ label: 'Operation', value: 'OP' },
{ label: 'IT Support', value: 'IT' }
]
},
{
text: 'Identity type',
key: 'idType',
type: 'multi-select',
width: '6em',
items: [
{ label: 'ID Card', value: 'ID' },
{ label: 'Passport', value: 'PASSPORT' }
]
},
{
text: 'Identity number',
key: 'idNumber',
type: 'input',
width: '9em',
props: {
maxlength: 18
}
},
{
text: 'Fee',
key: 'fee',
align: 'right',
type: 'input',
width: '5em',
props: {
maxlength: 8
},
params: {
validator: str => {
if (!str) return;
const num = +str;
if (Number.isNaN(num)) return 'Please enter a number';
},
formatter: str => {
const num = +str;
return num.toFixed(2);
}
}
},
{
text: 'Total Fee(+10)',
key: 'totalFee',
align: 'right',
type: 'input',
width: '9em',
props: {
maxlength: 8
},
params: {
validator: str => {
if (!str) return;
const num = +str;
if (Number.isNaN(num)) return 'Please enter a number';
},
formatter: str => {
const num = +str;
return num.toFixed(2);
},
computed: (row, column) => {
const num = +row.fee || 0;
return (num + 10).toFixed(2);
}
}
},
{
text: 'Pictures',
key: 'pics',
type: 'image',
width: '8.5em',
props: {
max: 3, // means can upload 3 pics at most
uploadApi: 'http://192.168.105.11:28080/api/file/common/upload'
}
},
{
text: 'Update Time',
key: 'updateTime',
type: 'date',
width: '8em'
}
],
rows: [
{
fullName: 'Tony Joe',
dept: 'OP',
idType: ['ID', 'PASSPORT'],
idNumber: '12341122234',
fee: 33,
pics: [
'https://github.blog/wp-content/uploads/2019/03/product-social.png?fit=1201%2C630',
'//fpoimg.com/400x400?text=Preview&bg_color=000000',
'//fpoimg.com/400x400?text=Preview&bg_color=ffeeee'
],
updateTime: '2020-02-01'
},
{
fullName: 'Mary Lee',
dept: 'IT',
idType: ['ID'],
idNumber: '6515151374',
fee: 25,
pics: [
'//fpoimg.com/400x400?text=Preview&bg_color=eeffee'
],
updateTime: '2020-02-02'
}
]
}
}
If you want to use it in pure javascript, you can refer the demo page.
<html lang="___">
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-bundle.min.js"></script>
in <head>