0👍
I think you didn’t read the ag-drid documentation clearly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<ag-grid-vue
style="height: calc(100vh - 148px)"
class="ag-theme-balham"
:columnDefs="columnDefs"
@onGridReady="onGridReady"
:rowData="rowData"
:getRowId="getId"
></ag-grid-vue>
</template>
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue";
export default {
name: "App",
data() {
return {
columnDefs: [
{ headerName: "Row ID", valueGetter: "node.id" },
{ field: "make" },
{ field: "model" },
{ field: "price" },
],
gridApi: null,
columnApi: null,
rowData: null,
getRowId: null,
getId: (params) => {
return params.data.id;
},
};
},
components: {
AgGridVue,
},
created() {
this.rowData = [
{ id: "c1", make: "Lima", model: "Celica", price: 35000 },
{ id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
{ id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
{ id: "c4", make: "BMW", model: "M50", price: 60000 },
{ id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
];
},
methods: {
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
},
},
};
</script>
Source:stackexchange.com