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.
Install your Vue 2 Data Grid
Install RevoGrid for Vue 2 using the following command:
npm
npm i @revolist/vue-datagridpnpm
pnpm add @revolist/vue-datagridyarn
yarn add @revolist/vue-datagridbun
bun add @revolist/vue-datagridVue 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',
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' }],
}
},
components: {
VGrid, // Register the VGrid component
},
}
</script>