0

I am new player, I want use some received props as column and row in ag-grid, an array with obj inside it. [...,{...},{...},{...},{...}]. where and how can I iterate over this props and draw out info for columnsDef and rowData and consume it? please offer some code. thank you.

<template>
  <div>
    <ag-grid-vue
      style="width: 800px; height: 500px;"
      class="ag-theme-balham"
      :columnDefs="columnDefs"
      :rowData="rowData"
      rowSelection="multiple"
    ></ag-grid-vue>
  </div>
</template>


<script>

//$ npm install --save ag-grid-community ag-grid-vue vue-property-decorator

import { AgGridVue } from "ag-grid-vue";

export default {
  name: "GridContainer",
  components: {
    AgGridVue
  },
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      columnDefs: null,
      rowData: null
    };
  },

  computed: {},
  beforeMount() {
    // my problem is here. 
    // according to ag-grid docs must load up info here. in beforeMount.
    // but we need draw out info before here with a helper function.
    this.columnDefs = [
      { headerName: 'sth from props must come here' },
      { headerName: 'with an helper iterotor because' },
      { headerName: 'maybe we need 100 columns base of recieve props' },
    ],
    this.rowData = [
        {
         [value of headerName] : 'string in recieved props',
         [value of second - headerName] : 'string in recieved props',
         [value of third - headerName] : 'string in recieved props'
        },
        { ... and more rows ...},
    ]
  },
  watch: {},
  methods: {},
};
</script>


<style lang="scss">
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"; 
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.