ag-grid / ag-grid-vue-example

Example of using ag-Grid with Vue

AG Grid VueJS Component Examples

Build Setup

# install dependencies
npm install

# build for dev 
npm run start 

# build for production 
npm run build

Examples

See www.ag-grid.com for full documentation and examples.

Frameworks Supported

Framework specific Getting Started guides: Angular) Javascript | React | TypeScript VueJS | Web Components

ag-grid-vue-example's Issues

Erro compile

Hello,

I'm facing this problem:

**Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'ag-grid-enterprise' in 'C:\software\ISS Bancos\frontend\src'**

bootstrap theme does not work

I try to use the ag-theme-boostrap, but it does not seem to work.
<ag-grid-vue style="width: 100%; height: 350px;" class="ag-theme-bootstrap"

How to get cell data in router link

The example shows how to put Vue router-links into a cell with a hard coded value (Jump to Master/Detail):

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the Grid
{
    headerName: "Link Example",
    cellRendererFramework: 'link-component',
    width: 200
}

... but how can the text in the router-link be set to the value of the cell it is in?

question: how do I setup ag-grid-vue community on html global

how do I setup ag-grid-vue CDN on html global on vue.js 2.0
Can you give me an example?
Thank you

How to use `rowDrag`?

I base on

"ag-grid": "^18.1.2",
"ag-grid-vue": "^18.1.0"

I try to use rowDrag, but don't work

<ag-grid-vue
      :column-defs="columnDefs"
      :row-data="rowData"
      :grid-options="gridOptions"
      class="ag-theme-balham"
    >
    </ag-grid-vue>
---
data(){
    return {
      // Data
      columnDefs: [
        { headerName: '#', field: 'id', rowDrag: true },
        { headerName: 'Name', field: 'name' },
        { headerName: 'Gender', field: 'gender' },
        { headerName: 'Address', field: 'address' },
        { headerName: 'Telephone', field: 'telephone' },
      ],
      rowData: [
        {
          id: 0,
          name: 'Theara',
          gender: 'M',
          address: 'Battambang',
          telephone: '',
        },
      ],
      // Pro
      gridOptions: {
        enableColResize: true,
        gridAutoHeight: true,
        pagination: true,
        paginationPageSize: 10,
        enableSorting: true,
        rowDragManaged: true,
        animateRows: true,
        rowSelection: 'single',
      },

Npm install fails

npm install fails (On npm 7.24.1, Node 14.17.6) with:

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue-property-decorator
npm ERR!   vue-property-decorator@"9.1.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue-property-decorator@"^7.2.0 || ^8.0.0" from @ag-grid-community/[email protected]
npm ERR! node_modules/@ag-grid-community/vue
npm ERR!   @ag-grid-community/vue@"~26.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-p

--force did fixed it

cellRender with Vue Component?

I base on Element UI

• action.vue

<template>
  <div>
    <el-dropdown
      size="mini"
      split-button
      type="primary"
    >
      Mini
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item>Action 4</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'ActionComponent',
}
</script>

• grid.vue

<template>
  <div>
    <ag-grid-vue
      :column-defs="columnDefs"
      :row-data="rowData"
      :grid-options="gridOptions"
      class="ag-theme-balham"
    >
    </ag-grid-vue>
  </div>
</template>
---
import ActionComponent from './action.vue'
...
  data() {
    return {
      // Data
      columnDefs: [
         ........
        {
          headerName: 'Action',
          field: 'action',
          cellRendererFramework: ActionComponent,
        },
      ],
      rowData: [],
    }
  },

Ag-grid in tabs

Hello, I have two tables, one on each tab, however I am having problems rendering the table that is on the second tab, because it is hidden, it is returning this error:

How can I solve this?

Unable to render a component in editing mode

Hi,

I'm using ag-grid to show and edit some records.
In my ag-grid defination, I'm adding a cellEditorComponent as:

this.columnDefs = this.columns.map((el, i) => { return { headerName: el.attributeName, attributeId: el.attributeId, field: el.field, resizable: true, editable: true, cellEditorSelector: (params) => { return { component: TextBoxEditor } } } })

In my TextBoxEditor.vue, here is the following code:

`<template>
 <input
 :ref="'input'"
 v-model="value"
 class="simple-input-editor"
 @keydown="onKeyDown($event)"
 />
</template>
<script>
import Vue from 'vue'
const KEY_BACKSPACE = 'Backspace'
const KEY_DELETE = 'Delete'
const KEY_ENTER = 'Enter'
const KEY_TAB = 'Tab'
export default Vue.extend({
data() {
return {
  value: '',
  cancelBeforeStart: true
 }
 },
created() {
this.setInitialState(this.params)
this.cancelBeforeStart =
  this.params.charPress && !'1234567890'.includes(this.params.charPress)
 },
mounted() {
this.$nextTick(() => {
  // need to check if the input reference is still valid - if the edit was cancelled before it started there
  // wont be an editor component anymore
  if (this.$refs.input) {
    this.$refs.input.focus()
  }
  })
  },
  methods: {
  getValue() {
  return this.value
  },
  isCancelBeforeStart() {
  return this.cancelBeforeStart
  },
  setInitialState(params) {
  let startValue
  if (params.key === KEY_BACKSPACE || params.key === KEY_DELETE) {
    // if backspace or delete pressed, we clear the cell
    startValue = ''
  } else if (params.charPress) {
    // if a letter was pressed, we start with the letter
    startValue = params.charPress
  } else {
    // otherwise we start with the current value
    startValue = params.value
  }
  this.value = startValue
  },
  // will reject the number if it greater than 1,000,000
  // not very practical, but demonstrates the method.
 isCancelAfterEnd() {
  return this.value > 1000000
  },
  onKeyDown(event) {
  if (event.key === 'Escape') {
    return
   }
  if (this.isLeftOrRight(event) || this.deleteOrBackspace(event)) {
    event.stopPropagation()
    return
   }
  if (
    !this.finishedEditingPressed(event) &&
    !this.isKeyPressedNumeric(event)
   ) {
    if (event.preventDefault) event.preventDefault()
   }
  },
  isCharNumeric(charStr) {
  return /\d/.test(charStr)
  },
  isKeyPressedNumeric(event) {
  const charStr = event.key
  return this.isCharNumeric(charStr)
 },
  finishedEditingPressed(event) {
  const key = event.key
  return key === KEY_ENTER || key === KEY_TAB
 },
deleteOrBackspace(event) {
  return [KEY_DELETE, KEY_BACKSPACE].includes(event.key)
},
isLeftOrRight(event) {
  return ['ArrowLeft', 'ArrowRight'].includes(event.key)
}
}
})
</script>

`

While editing, I'm getting the error as 'Params are not defined'

Running the test fails

When you clone the repo and run npm install && npm run test jest will crash.

Cannot find module 'vue-class-component' from 'vue-property-decorator.umd.js'

    However, Jest was able to find:
    	'lib/AgGridVue.d.ts'
    	'lib/AgGridVue.js'

Example with Infinite Scroll?

Hi,
Do we have an exmaple with infinite scroll type ?
Thanks,
Abhi

the console is always warning？

when i use this ag-grid in vue , the version is 17.0, the console always warning...

ag-grid: invalid gridOptions property '__ob__' did you mean any of these: groupSuppressBlankHeader,slaveGrids,rowData,columnDefs,excelStyles,pinnedTopRowData,pinnedBottomRowData,components ag-grid: to see all the valid gridOptions properties please check: https://www.ag-grid.com/javascript-grid-properties/

server side pagination

I want to implement server side pagination with simple jquery and laravel but I can't find any related example or guide.
have anyone done this ??

Can you use tooltip or tooltipField?

Going through all the examples, there is no use of tooltip or tooltipField.
The documentation here: https://www.ag-grid.com/javascript-grid-column-properties/ isn't the best and doesn't show an example of it.

Is it possible to fit two components in a single columns?

beforeMount () {
this.columnDefs = [
{headerName: 'Actions', field: 'action', cellRendererFramework: 'GridEditButton', cellRendererFramework: 'GridDeleteButton'},
{headerName: 'SrNo', field: 'srno'},
{headerName: 'KeyValue', field: 'keyvalue'},
{headerName: 'ObjectID', field: '_id'}
];
this.rowData = [
{action: '', srno: 0, keyvalue: 'Toyota', _id: 'Celica'},
{action: '', srno: 1, keyvalue: 'Honda', _id: 'Civic'},
{action: '', srno: 2, keyvalue: 'Chevy', _id: 'Impala'}
];
},

A sample before mount function with two components in the first column. But it will give error of duplicate cellRendererFramework.

Using i18n in column Header

Hi, first of all this is a fantastic project.
Second, How to use i18n in column Header?

Auto Height - hiding filter

Hello,

How can we adjust the filter block so that we do not have the hidden options inside a table with adjustable auto height? the block should stay on the table, right?

see the pictures below what I'm talking about...

https://www.ag-grid.com/javascript-grid-width-and-height/#example-auto-height

Readme links back to same place (here) instead of working examples

The readme at https://github.com/ag-grid/ag-grid-vue-example (here) states See the https://github.com/ag-grid/ag-grid-vue-example for full working examples of what you can do with ag-Grid and VueJS Components. But that link is the same page we're already on (this readme) and the 'examples' are images - not working examples.

Server side pagination needed!!

Hello,
agGrid is working well, After searching a lot i am not find any example of server side pagination with vue js & laravel, can someone provide me a link how to do this in vue js.

currently i am fetching whole data in one api call via axios so i need server side pagination.

Thanks in advance!!

waiting for reply

Unable to get DateComponent Working

Hello,

I am trying to implement custom Date Component, but it does not seem to work. I added those lines in createColumnDefs() inside RichGridExample.vue. It does not work.

                    {
                      headerName: 'date',
                      field: "date",
                      width: 120,
                      filter: 'agDateColumnFilter'
                    }

headerComponent does not works for ag-grid-vue

It keeps giving me this error :

I have registered the component correctly. Can someone help ?

why weren't NumericEditorComponent in a .vue file but a .js file?

For eg:

<template>
  <input
    ref="input"
    v-model="value">
</template>
<script>
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      value: '',
    };
  },
  created() {
    this.value = this.params.value;
  },
  mounted() {
    Vue.nextTick(() => {
      // need to check if the input reference is still valid - if the edit was cancelled before it started there
      // wont be an editor component anymore
      if (this.$refs.input) {
        this.$refs.input.focus();
      }
    });
  },
  methods: {
    getValue() {
      return this.value;
    },
  },
});
</script>

Is there any particular reason that we shoudn't do it?

Thanks

How can program this with Laravel

Hello, i have this grid and look amazin in vue, but i can't connect with laravel, i'm using url on api.php but i don't understand how do you do for send data from index methods in my controller in laravel to view in AG Grid vue...

Do you have or can make any example about this please, really appreciate it

Thank you

npm run test does not work

Pulling the latest of this project, doing an npm install, and then an npm run test throws an error.

I am using jest to create unit tests for a vue app, and noticed this, so I pulled your project to see what might be different than mine, and it turns out your has the same error.

It looks like the module is not commonjs compatible, as the main.js file points to a non-production, non-minified source that contains import statements. When you add this dependency to not be ignored by vue transform, it still does not work.