Vue Data GridQuick Start

Create a Grid in 60 seconds.

Install

Create a new Vue3 project and install the ag-grid-vue3 library:

npm install ag-grid-vue3

Create

Replace the app.vue file with the following code:

<template>
  <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->
  <ag-grid-vue
    style="width: 500px; height: 500px"
    class="ag-theme-quartz"
    :rowData="rowData"
    :columnDefs="colDefs"
  >
  </ag-grid-vue>
</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() {
    // Row Data: The data to be displayed.
    const rowData = ref([
    { mission: "CRS SpX-25", company: "SpaceX", location: "LC-39A, Kennedy Space Center, Florida, USA", date: "2022-07-15", time: "0:44:00", rocket: "Falcon 9 Block 5", price: 12480000, successful: true },
    { mission: "LARES 2 & Cubesats", company: "ESA", location: "ELV-1, Guiana Space Centre, French Guiana, France", date: "2022-07-13", time: "13:13:00", rocket: "Vega C", price: 4470000, successful: true },
    { mission: "Wise One Looks Ahead (NROL-162)", company: "Rocket Lab", location: "Rocket Lab LC-1A, Māhia Peninsula, New Zealand", date: "2022-07-13", time: "6:30:00", rocket: "Electron/Curie", price: 9750000, successful: true }
    ]);

    // Column Definitions: Defines & controls grid columns.
    const colDefs = ref([
      { field: "mission" },
      { field: "company" },
      { field: "location" },
      { field: "date" },
      { field: "price" },
      { field: "successful" },
      { field: "rocket" }
    ]);

    return {
      rowData,
      colDefs,
    };
  },
};
</script>

Run

When you run your application, you should see a basic grid with three rows:

Note: To live-edit the code, open the example in CodeSandbox or Plunkr using the buttons in the lower-right

Next Steps

Read our Introductory Tutorial.
Watch our Video Tutorials.