RevoGrid

Appearance

Vue 3 Data Grid ​

RevoGrid fits naturally into Vue 3 applications when you need a fast grid with native component integrations. You can use it from either the Composition API or the Options API, and still rely on the same core RevoGrid methods and events.

INFO

This guide assumes your Vue project already exists. If not, start with the official Vue quick start.

Install your Vue Data Grid ​

Install RevoGrid for Vue using the following command:

npm
npm i @revolist/vue3-datagrid
pnpm
pnpm add @revolist/vue3-datagrid
yarn
yarn add @revolist/vue3-datagrid
bun
bun add @revolist/vue3-datagrid

Composition API setup ​

vue
<template>
    <RevoGrid :columns="columns" :source="rows" />
</template>

<script setup>
import { ref } from 'vue'
import RevoGrid from '@revolist/vue3-datagrid'
const columns = ref([
    { prop: 'name', name: 'A' },
    { prop: 'details', name: 'B' },
])
const rows = ref([
    {
        name: '1',
        details: 'Item 1',
    },
])
</script>

Options API setup ​

vue
<template>
    <div id="app">
        <RevoGrid theme="compact" :source="rows" :columns="columns" />
    </div>
</template>

<script>
import RevoGrid from '@revolist/vue3-datagrid'
export default {
    name: 'App',
    data() {
        return {
            columns: [{ prop: 'name' }, { prop: 'details' }],
            rows: [
                {
                    name: '1',
                    details: 'Item 1',
                },
            ],
        }
    },
    components: {
        RevoGrid,
    },
}
</script>

Passing columns and source ​

The most common Vue pattern is:

  • keep columns in component state
  • pass source as reactive data
  • use grid methods when you need imperative actions like scrolling, focusing, or opening an editor

Source code Git Codesandbox
vue
<template>
    <div id="app">
        <RevoGrid
            hide-attribution
            :source="rows"
            :columns="columns"
            :theme="isDark ? 'darkCompact' : 'compact'"
        />
    </div>
</template>

<script>
import { useData } from 'vitepress'
import RevoGrid from '@revolist/vue3-datagrid'
export default {
    name: 'App',
    data() {
        return {
            columns: [
                { prop: 'name', name: 'First' },
                { prop: 'details', name: 'Second' },
            ],
            rows: [
                {
                    name: '1',
                    details: 'Item 1',
                },
            ],
            isDark: useData().isDark,
        }
    },
    components: {
        RevoGrid,
    },
}
</script>

Accessing grid instance methods ​

To call a method on the underlying grid, use the wrapped Web Component instance:

js
// ✅ Correct
myComponentRef.value.$el.someMethod();

// ❌ Incorrect
myComponentRef.value.someMethod();

This matters for methods like setCellEdit, scrollToRow, setCellsFocus, and getVisibleSource.

Custom renderers and editors ​

Use these guides for framework-native customization:

Event handling ​

For application workflows, the most useful events are:

  • beforeedit
  • afteredit
  • beforefilterapply
  • beforecellfocus

SSR and client-only behavior ​

Like the core Web Component, RevoGrid depends on browser APIs. If you use Vue in an SSR setup, render the grid on the client side or guard the component load accordingly.

Check out our Vue Data Grid examples