Vue.js Data Grid Getting Started With AG Grid

00:00 Create Vue App
01:37 Styling the Grid
02:40 Adding Reactive State
02:54 Loading Server Data
03:16 Column Definition Properties
03:46 Default Column Definitions
04:14 Grid Properties
04:59 Grid Events
05:20 Using Grid API
06:15 Summary

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

A series of videos showing how to get started with AG Grid and Vue.

All videos are available in a playlist:

And directly available below:

- 001 - QuickStart Guide
- 002 - Enterprise Overview
- 003 - Customizing Cells
- 004 - Column Filters

Source code for all videos is available on Github:

[brandontx]

"See how the grid and hellpppp youu" lol, loved this documentation!

[iamkonick]

Can you turn of the toggle button in nested rows?

[kishorem.t]

Alpine theme not applying in production environment, it is failing to load the alpine font..may i know the solution for this issue

[dostonmamadaminov]

I like it! I need an example to download the data from the backend to excel. Is it possible to place two rows on one column? For example {a: [{b: [data1], {c: [data2]}.

[thomasventura]

Hey everyone - How do I do this if its not directly within my App.vue - i have it on a different page and ive basically put this code in but it doesn't seem to run

<template>
<div class="card">
<ag-grid-view :columnDefs="columnDefs"
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue3";
export default {
name: "GridData",
components: {
AgGridVue,
},
setup() {
return {
columnDefs: [
{ field: "Name" },
{ field: "Language" },
{ field: "Country" },
],

rowData: [
{
Name: "Ventura",
Language: "English",
Country: "USA",
},
],
};
},
};
</script>
<style></style>

[aristotlemakamure]

You too fast in your tutorial
but great