Skip to content

Vue 2 Data Grid

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

Getting Started - Vue 2 Data Grid

Edit RG Start (Vue 2)

Install your Vue 2 Data Grid

Install RevoGrid for Vue 2 using the following command:

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

Vue 2 Data Grid Usage

vue

// App.vue

<template>
  <!-- Use the VGrid component and bind the data source and columns -->
  <v-grid :source="rows" :columns="columns" />
</template>

<script>
import VGrid from '@revolist/vue-datagrid' // Import the VGrid component

export default {
  name: 'App',
  components: {
    VGrid, // Register the VGrid component
  },
  data() {
    return {
      // Define the columns for the grid
      columns: [
        { prop: 'name', name: 'First' }, // Simple column definition
      ],
      // Define the data source for the grid
      rows: [{ name: '1', details: 'Item 1' }],
    }
  },
}
</script>

Getting Started - Vue 2 Data Grid

Edit RG Start (Vue 2)

Check out our Vue Data Grid examples