How to get the count of total rows from ag-grid with serveur side row model (datasource) using vue js?

Question

I'm using ag-grid and vue, with the server side row model.

I would like to display the count of all the rows, and not only the displayed rows but really the count of all the rows from database. This value (rowCount: response.data.lastRow) is available in createServerSideDatasource(), but this function is outside my component so I can't access to this value in data() section. And I would like to do something like that : this.totalRows = response.data.lastRow (cf. extract of code below).

I already try to add cont vm = this in the createServerSideDatasource() function, but I doesn't fix my problem because vm.totalRows is still unreachable in the data() section.

So here are my question :

• How can I make value from an outside function (here response.data.lastRow value) reachable in the data() section ?

<template>
    <p>{{ totalRows }}</p>
    <ag-grid
        rowModelType="serverSide"
        ...
    >
    </ag-grid>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue3'
import 'ag-grid-enterprise'
import 'ag-grid-community/styles/ag-grid.css'

export default {
    name: 'list',
    components: {
        AgGridVue
    },  
    data() {
        return {
            gridApi: null,
            totalRows: 0, //==>get the value from createServerSideDatasource()
        }
    },
    
    methods() {
        onGridReady(params) {
            this.gridApi = params.api
            this.gridApi.setGridOption("serverSideDatasource", createServerSideDatasource())
        }
    },
}

function createServerSideDatasource() {
  return {
    getRows: function(params) {
      let sortColumn = null
      let sortDirection = null
      if (params.request.sortModel.length > 0) {
        sortColumn = params.request.sortModel[0].colId
        sortDirection = params.request.sortModel[0].sort
      }

      User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
        if (response.data.success) {
        
          params.success({
            rowData: response.data.rows,
            rowCount: response.data.lastRow,
          })

          //==>make something like that : this.totalRows = response.data.lastRow
          
        }
        else {
          params.fail()
        }
      })
    },
  }
}
</script>

Answer 1

As you are using the Enterprise version, you have the Status Bar.
Within the Status Bar, you must use the following property:

{ statusPanel: 'agTotalRowCountComponent' },   

On this page of the documentation, there is also a section on server-side information.

Regarding your question, try referencing the vue instance inside the function:

function createServerSideDatasource(vm) { // Receives the component reference
  return {
    getRows: function(params) {
      let sortColumn = null
      let sortDirection = null
      if (params.request.sortModel.length > 0) {
        sortColumn = params.request.sortModel[0].colId
        sortDirection = params.request.sortModel[0].sort
      }

      User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
        if (response.data.success) {
          params.success({
            rowData: response.data.rows,
            rowCount: response.data.lastRow,
          })

          vm.totalRows = response.data.lastRow; // Updates the totalRows property

        } else {
          params.fail()
        }
      })
    },
  }
}