VueSheetz

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.

---

Get started with VueSheetz

---

Features

Features of VueSheetz:

  ✓  Intuitive spreadsheet-like interface
  ✓  Convenient API
  ✓  Multiple column sorting
  ✓  Validating data
  ✓  Columns text and number formatting
  ✓  Resizing rows/columns

See the full list of current and future features in the Features Section

Documentation

• Developer guides
• API Reference
• Changelog
• Demo

Get started

Installing VueSheetz in your Project

With NPM:

npm install vuesheetz

With Yarn:

yarn add vuesheetz

With PNPM:

pnpm add vuesheetz

VueSheetz requires Vue >=v3.0.0 and Node >=v14.18

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:

See the list of config options in the Config Reference

Community

If you have questions or need help, reach out to the community at GitHub Discussions.

License

MIT License © 2023-Present Caíque Gaspar