Getting Started ​

Overview ​

VueSheetz is a versatile and feature-rich Vue component that provides a powerful spreadsheet-like interface for displaying and manipulating tabular data in web applications.

You can learn more about the project in the What is VueSheetz section.

Trying VueSheetz Online ​

You can try VueSheetz online on StackBlitz. It runs VueSheetz directly in the browser, and it is almost identical to the local setup but doesn't require installing anything on your machine.

Adding VueSheetz to your Project ​

npm install vuesheetz

yarn add vuesheetz

pnpm add vuesheetz

Configuring VueSheetz ​

After install VueSheetz locally using your preferred package manager, import VueSheetz's component and CSS into your application.

import { VueSheetzComponent } from 'vuesheetz'
import 'vuesheetz/dist/style.css'

Here is a full example using a minimal configuration:

<script setup>
import { VueSheetzComponent } from 'vuesheetz'
import 'vuesheetz/dist/style.css'
</script>

<template>
  <VueSheetzComponent
    :data="[
      [1, 2],
      ['Jhon', 'Doe']
    ]"
    height="400px"
    width="100%"
  />
</template>

Result: