RevoGrid

Appearance

Vue 3 Data Grid ​

This page covers the key concepts of RevoGrid - a high-performance, customizable Vue Table and Vue Data Grid for managing large datasets.

So, why RevoGrid?

Well, let's say you've got a ton of data to display on your web app. It's all about letting you throw in loads of data and manipulate it any way you fancy—without breaking a sweat. Read more about how and why you should use it in our Overview section.

INFO

This tutorial assumes that an Vue project has already been set up. If not, please refer to the official documentation Vue Installation

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

Vue Data Grid Usage ​

Composition Api ​

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 ​

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>

Getting Started with Options API ​


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>

Method on Vue Data Grid instance is not a function ​

In order to access a method on a data grid component in Vue, you will need to access the underlying Web Component instance first:

js
// ✅ This is correct
myComponentRef.value.$el.someMethod();

// ❌ This is incorrect and will result in an error.
myComponentRef.value.someMethod();

Check out our Vue Data Grid examples