2023-04-24 08:50:42 +00:00
|
|
|
---
|
|
|
|
title: vue3-table-lite
|
|
|
|
pagination_prev: demos/frontend/index
|
|
|
|
pagination_next: demos/net/index
|
|
|
|
---
|
|
|
|
|
2023-04-27 09:12:19 +00:00
|
|
|
import current from '/version.js';
|
2023-04-29 11:21:37 +00:00
|
|
|
import CodeBlock from '@theme/CodeBlock';
|
2023-04-27 09:12:19 +00:00
|
|
|
|
2023-04-24 08:50:42 +00:00
|
|
|
:::note
|
|
|
|
|
|
|
|
This demo was tested against `vue3-table-lite 1.2.4`, VueJS `3.2.47`, ViteJS
|
|
|
|
4.3.1, and `@vitejs/plugin-vue` 4.1.0 on 2023 April 24
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
The demo creates a site that looks like the screenshot below:
|
|
|
|
|
|
|
|
![vue3-table-lite screenshot](pathname:///vtl/vtl1.png)
|
|
|
|
|
|
|
|
## Integration Details
|
|
|
|
|
|
|
|
#### Rows and Columns Bindings
|
|
|
|
|
|
|
|
`vue3-table-lite` presents two attribute bindings: an array of column metadata
|
|
|
|
(`columns`) and an array of objects representing the displayed data (`rows`).
|
|
|
|
Typically both are `ref` objects:
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { ref } from "vue";
|
|
|
|
import VueTableLite from "vue3-table-lite/ts";
|
|
|
|
|
|
|
|
/* rows */
|
|
|
|
type Row = any[];
|
|
|
|
const rows = ref<Row[]>([]);
|
|
|
|
|
|
|
|
/* columns */
|
|
|
|
type Column = { field: string; label: string; };
|
|
|
|
const columns = ref<Column[]>([]);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<vue-table-lite :columns="columns" :rows="rows"></vue-table-lite>
|
|
|
|
</template>
|
|
|
|
```
|
|
|
|
|
|
|
|
These can be mutated through the `value` property in VueJS lifecycle methods:
|
|
|
|
|
|
|
|
```ts
|
|
|
|
import { onMounted } from "vue";
|
|
|
|
onMounted(() => {
|
|
|
|
columns.value = [ { field: "name", label: "Names" }];
|
|
|
|
rows.value = [ { name: "SheetJS" }, { name: "VueJS" } ];
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
|
|
|
The most generic data representation is an array of arrays. To sate the grid,
|
|
|
|
columns must be objects whose `field` property is the index converted to string:
|
|
|
|
|
|
|
|
```js
|
|
|
|
import { ref } from "vue";
|
|
|
|
import { utils } from 'xlsx';
|
|
|
|
|
|
|
|
/* generate row and column data */
|
|
|
|
function ws_to_vtl(ws) {
|
|
|
|
/* create an array of arrays */
|
|
|
|
const rows = utils.sheet_to_json(ws, { header: 1 });
|
|
|
|
|
|
|
|
/* create column array */
|
|
|
|
const range = utils.decode_range(ws["!ref"]||"A1");
|
|
|
|
const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
|
|
|
|
field: String(i), // vtl will access row["0"], row["1"], etc
|
|
|
|
label: utils.encode_col(i), // the column labels will be A, B, etc
|
|
|
|
}));
|
|
|
|
|
|
|
|
return { rows, columns };
|
|
|
|
}
|
|
|
|
|
|
|
|
const rows = ref([]);
|
|
|
|
const columns = ref([]);
|
|
|
|
|
|
|
|
/* update refs */
|
|
|
|
function update_refs(ws) {
|
|
|
|
const data = ws_to_vtl(ws);
|
|
|
|
rows.value = data.rows;
|
|
|
|
columns.value = data.columns;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
In the other direction, a worksheet can be generated with `aoa_to_sheet`:
|
|
|
|
|
|
|
|
```js
|
|
|
|
import { utils } from 'xlsx';
|
|
|
|
|
|
|
|
const rows = ref([]);
|
|
|
|
|
|
|
|
function vtl_to_ws(rows) {
|
|
|
|
return utils.aoa_to_sheet(rows.value);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Demo
|
|
|
|
|
|
|
|
1) Create a new ViteJS App using the VueJS + TypeScript template:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm create vite@latest sheetjs-vtl -- --template vue-ts
|
|
|
|
cd sheetjs-vtl
|
|
|
|
```
|
|
|
|
|
|
|
|
2) Install dependencies:
|
|
|
|
|
2023-04-29 11:21:37 +00:00
|
|
|
<CodeBlock language="bash">{`\
|
|
|
|
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.2.4`}
|
|
|
|
</CodeBlock>
|
2023-04-24 08:50:42 +00:00
|
|
|
|
|
|
|
3) Download [`src/App.vue`](pathname:///vtl/App.vue) and replace the contents:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
curl -L -o src/App.vue https://docs.sheetjs.com/vtl/App.vue
|
|
|
|
```
|
|
|
|
|
|
|
|
4) run `npm run dev`. When you load the page in the browser, it will try to
|
|
|
|
fetch <https://sheetjs.com/pres.numbers> and load the data.
|