Getting Started #

Vue 3 Data Grid component driven by pure CSS Grid Layout helps to display data delivered from API's.

Adding Hora Grid to your Project #

With npm

npm install -D @studioalex/hora-grid
or with yarn

or with yarn

yarn add -D @studioalex/hora-grid
or with pnpm

or with pnpm

pnpm add -D @studioalex/hora-grid

Using Hora Grid in your Component #

Example for Vue Composition API using sugar syntax.

<script setup>
import { HoraGrid } from '@studioalex/hora-grid'
import '@studioalex/hora-grid/style.css'
...
</script>

<template>
  ...
  <hora-grid
    :data="..."
    :fields="...">
  </hora-grid>
  ...
</template>

Configure Hora Grid for the Project #

Installing Hora Grid for the whole Project. The example use vite and Vue 3.

src/main.js

import { createApp } from 'vue'
import HoraGrid from '@studioalex/hora-grid'
import '@studioalex/hora-grid/style.css'
import './style.css'
import App from './App.vue'

createApp(App)
  .use(HoraGrid)
  .mount('#app')