Vue Data GridQuick Start

ReactAngularVueJavascript

Create a grid in 60 Seconds

At a minimum, three things are required to create a grid:

• Container: for the grids placement in your application.
• Styles: to define the grid's theme & dimensions.
• Row Data & Column Definitions: to define the data and how it should be displayed.

Install

First, install the ag-grid-vue3 library:

npm install ag-grid-vue3

Create a Component

Then, create a new component in your application with the required dependencies:

<template></template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // Theme
import { AgGridVue } from "ag-grid-vue3"; // Vue Grid Logic

export default {
  name: "App",
  components: {
    AgGridVue, // Add AG Grid Vue3 component
  },
  setup() {},
};
</script>

Row Data & Column Definitions

Next, add the rowData and colDefs arrays to your component to define the data and how it should be displayed:

setup() {
  // Row Data: The data to be displayed.
  const rowData = ref([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ]);

  // Column Definitions: Defines & controls grid columns.
  const colDefs = ref([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
  ]);

  return {
    rowData,
    colDefs,
  };
},

This is a basic example of Row Data & Column Definitions. The column definitions will access data via the provided field property, which maps directly to fields inside of the rowData objects.

Rendering the Grid

Then, add the ag-grid-vue component to the component template with rowData and colDefs as props:

<template>
  <!-- The AG Grid component -->
  <ag-grid-vue
    :rowData="rowData"
    :columnDefs="colDefs"
  >
  </ag-grid-vue>
</template>

Styling the Grid

Finally, configure the theme & dimensions for the grid by adding the class and style props to the ag-grid-vue component to define the theme and dimensions for the grid:

<template>
  <!-- The AG Grid component -->
  <ag-grid-vue
    style="height: 500px"
    class="ag-theme-quartz"
    // ...
  >
  </ag-grid-vue>
</template>

Result

When you run your application, you should see a basic grid with three rows. To see the full code, click the </> Code button below the example.

Next Steps

• Read our Introductory Tutorial.
• Watch our Video Tutorials.