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.

      style="width: 800px; height: 500px;"


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

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

export default {
  name: "GridContainer",
  components: {
  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: {},

<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"; 

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.