ag-grid-vue not rendering the table

Question

I am trying to integrate ag-grid into my existing vue.js project. The table is not rendering properly. I followed the tutorial on ag-grid here website.

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="3"></v-col>
      <v-col cols="12" sm="6">
        <ag-grid-vue
          class="ag-theme-alpine"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :modules="modules"
        >
        </ag-grid-vue>
      </v-col>
      <v-col cols="12" sm="3"></v-col>
    </v-row>
  </v-container>
</template>
<script>
import { AgGridVue } from "@ag-grid-community/vue";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
export default {
  name: "VueGridTest",
  data() {
    return {
      columnDefs: null,
      rowData: null,
      modules: [ClientSideRowModelModule],
    };
  },
  components: {
    AgGridVue,
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" },
    ];

    this.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 },
    ];
  },
};
</script>

Results look like:

If I fix the height of the table div to any number it renders.

Project Configuration:

"@ag-grid-community/all-modules": "^24.0.0",
"@ag-grid-community/client-side-row-model": "^24.0.0",
"@ag-grid-community/core": "^24.0.0",
"@ag-grid-community/csv-export": "^24.0.0",
"@ag-grid-community/infinite-row-model": "^24.0.0",
"@ag-grid-community/vue": "^24.0.0",
"@ag-grid-enterprise/all-modules": "^24.0.0",
"@ag-grid-enterprise/server-side-row-model": "^24.0.0",
"vue": "^2.6.12",
"vue-class-component": "^7.2.5",
"vue-property-decorator": "^9.0.0",

Also there are no errors in the console.

I am new to ag-grid and ag-grid-vue

Answer 1

What you may want to do is to set domLayout="autoHeight" as stated in the docs. So in your code:

<ag-grid-vue
  class="ag-theme-alpine"
  domLayout="autoHeight"
  ...
></ag-grid-vue>

Live Demo