Skip to main content

vue3-table-lite

Vue 3 Table Lite is a data table library designed for the VueJS web framework.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses Vue 3 Table Lite and SheetJS to pull data from a spreadsheet and display the content in a data table. We'll explore how to import data from files into the data grid and how to export modified data from the grid to workbooks.

The "Demo" section includes a complete example that displays data from user-supplied sheets and exports data to XLSX workbooks:

vue3-table-lite screenshot

Tested Deployments

This demo was tested in the following deployments:

BrowserVersionDate
Chromium 1251.4.02024-06-13

Integration Details​

The "Frameworks" section covers installation in ViteJS projects using Vue 3 Table Lite.

Using the npm tool, this command installs SheetJS and Vue 3 Table Lite:

npm i -S https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz vue3-table-lite@1.4.0

Rows and Columns Bindings​

Vue 3 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:

<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:

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:

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:

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:
npm create vite@latest sheetjs-vtl -- --template vue-ts
cd sheetjs-vtl
  1. Install dependencies:
npm i -S https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz vue3-table-lite@1.4.0
  1. Download src/App.vue and replace the contents:
curl -L -o src/App.vue https://docs.sheetjs.com/vtl/App.vue
  1. Start the dev server:
npm run dev
  1. Load the displayed URL (typically http://localhost:5173) in a web browser.

When the page loads, it will try to fetch https://docs.sheetjs.com/pres.numbers and display the data. Click "Export" to generate a workbook.