How to get display rows data from ag-grid in vue?

Question

I'm using ag-grid in my vue application.

I have three items in my data:

After I filter by "Toyota" I get only one data on the grid.

I want when I click on the button I'll get the filter results (like in the grid) but when I invoke this function I get all the items. this.$refs.grid.gridOptions.rowData ;

how to get only the data I can see from the grid?

app.js:

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { AgGridVue } from "ag-grid-vue";

export const App = {
  name: "App",
  data() {
    return {
      columnDefs: null,
      rowData: null
    };
  },
  components: {
    AgGridVue
  },
  methods: {
    some: function() {
      const grid = this.$refs.grid.gridOptions;

      const rows = grid.rowData;
      console.log({ rows });
    }
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make", filter: true },
      { 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 }
    ];
  },
  template: `
    <div>
    <ag-grid-vue ref="grid" style="width: 500px; height: 300px;"
        class="ag-theme-balham"
        :columnDefs="columnDefs"
        :rowData="rowData">
    </ag-grid-vue>

    <button @click="some">Click</button>
    </div>
    `
};

main.js:

import Vue from 'vue';
import { App } from './app';

new Vue({
  el: '#root',
  render: h => h(App)
});

Answer 1

I don't think ag-grid has a direct way to get that data. But you can use forEachNodeAfterFilter to loop over the data and put together your own array.

const rowData = [];
gridApi.forEachNodeAfterFilter(node => rowData.push(node.data));

See https://www.ag-grid.com/javascript-grid-api/#accessing-row-nodes

Answer 2

You can get this by using this code:

for (let i = 0; i < grid.api.getDisplayedRowCount(); i++) {
  let node = grid.api.getDisplayedRowAtIndex(i);
  console.log(node.data);
}

This way you can iterate through the displayed rows, and if you want you can then push this data into another array.