vue-spreadsheet is a JavaScript library for creating an online spreadsheet data table application using Vue.js.
Must Read: A Powerful and Simple Online Spreadsheet Like Excel | Luckysheet
How to make use of it:
Install and download:
yarn add vuejs-spreadsheet npm i vuejs-spreadsheet
Usages:
<script>
import VueTable from 'vuejs-spreadsheet';
export default {
name: 'app',
data() {
},
components: {
VueTable,
},
};
</script><vue-table
v-model="Array"
:headers="Array"
:custom-options="Object"
:style-wrap-vue-table="Object"
:disable-cells="Array"
:disable-sort-thead="Array"
:loading="Boolean"
:parent-scroll-element="Object"
:select-position="Object"
:submenu-tbody="Array"
:submenu-thead="Array"
@tbody-checked-row="checkedData"
@tbody-all-checked-row="checkedAllData"
@tbody-change-data="changeData"
@tbody-undo-data="undoData"
@tbody-submenu-click-change-color="changeColorTbody"
@tbody-submenu-click-change-value="changeValueTbody"
@thead-submenu-click-change-color="changeColorThead"
@thead-submenu-click-change-value="changeValueThead"
@thead-td-sort="sortProduct">
// if your want to add an specific header
<div slot="header">
Specific Header
</div>
// if your want to add a loader
<div slot="loader">
Loader
</div>
</vue-table>Options
customOptions: {
dragToFill: true,
tbodyCheckbox: false,
tbodyIndex: true,
sortHeader: true,
trad: {
lang: 'fr',
en: {
select: {
placeholder: 'Search by typing',
},
},
fr: {
select: {
placeholder: 'Taper pour chercher',
},
},
},
newData: {
type: 'input',
value: '',
active: false,
style: {
color: '#000',
},
},
fuseOptions: {
shouldSort: true,
threshold: 0.2,
location: 0,
distance: 30,
maxPatternLength: 64,
minMatchCharLength: 1,
findAllMatches: false,
tokenize: false,
keys: [
'value',
],
},
},Props
Must Read: Quick Spreadsheet/CSV Viewer in Vanilla JavaScript | Heihō
| Props | Type | Description |
|---|---|---|
| :headers | Array | That contains headers |
| :custom-options | Object | That contains Options |
| :style-wrap-vue-table | Object | That contains a style of the wrapper tableVue |
| :disable-cells | Array | That contains the headerKey you want to disable |
| :disable-sort-thead | Array | That contains the disabled th |
| :loading | Boolean | True => Hidden TbodyData / show slot loader |
| :parent-scroll-element | Object | That contains the HTML attribute which overflow-y: scroll (by default is ‘html‘) |
| :select-position | Object | That contains a top and left position you want to add to the select |
| :submenu-tbody | Array | That contains the submenu-tbody |
| :submenu-thead | Array | That contains the submenu-thead |
Options
Must Read: Online Spreadsheet for Web Using Javascript | xspreadsheet
| Options | Type | Description |
|---|---|---|
| :fuse-options | Object | That contains an object of fuse configuration |
| :new-data | Object | That contains the type of data when you have an empty cells in a row |
| :sort-header | Boolean | That activates the sort button on the header |
| :tbody-index | Boolean | That displays the index of each row on the left of the table |
| :trad | Object | That contains an object of translating |
Function
Must Read: Angular Handsontable Data Grid with Spreadsheet Component
| Function | Type | Description |
|---|---|---|
| @tbody-all-checked-row | Function | Fired when the checkedAll row has checked |
| @tbody-checked-row | Function | Fired when a row has checked |
| @tbody-change-data | Function | Fired when data undergo modifications |
| @tbody-input-change | Function | When the input changes |
| @tbody-input-keydown | Function | Trigger key down when the input changes |
| @tbody-select-change | Function | When the select change |
| @handle-up-drag-size-header | Function | Fired when the header size changed |
| @thead-td-sort | Function | When you press the button sort |
| @tbody-undo-data | Function | When you hit Ctrl / Cmd + Z to undo |
| @tbody-paste-data | Function | When you paste data into a cell |
| @tbody-up-dragtofill | Function | Fired when pressed up on dragToFill |
| @tbody-move-dragtofill | Function | Fired when moved on dragToFill |
| @tbody-nav-backspace | Function | When you press backspace on a cell (event, actualElement, actualCol, rowIndex, colIndex) |
| @tbody-nav-multiple-backspace | Function | Fired when multiple cells are deleted |
| @tbody-submenu-click-{#} | Function | {#} – Name of the function declared on submenu-tbody |
See Also –
A Tool for Publishing Responsive HTML Tables of a Google Spreadsheet as a CMS
UI Framework Agnostic, Fully Responsive Angular Data Table Spreadsheet | ornamentum
Handles a Table Loading with AJAX | jQuery ajaxTable
See Demo And Download
Official Website(joffreyBerrier): Click Here
This superior jQuery/javascript plugin is developed by joffreyBerrier. For extra advanced usage, please go to the official website.
