Ag-grid Master/Detail grid Independent pagination at Master and Detail

Question

if number of rows of detail grid are more, it is tedious to scroll through all rows, Is it possible to add pagination at Master and Detail independently?

I have gone through the below link of ag-grid documentation but did not find a way or mention of pagination. https://www.ag-grid.com/javascript-grid-master-detail/

Pratik Bhat Pratik Bhat · Accepted Answer · 2020-05-25T17:41:16

You just need to add pagination related properties pagination : true to the detail grid options. Here is what your detailGridOptions would look like -

this.detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { field: 'callId' },
      { field: 'direction' },
      {
        field: 'number',
        minWidth: 150,
      },
      {
        field: 'duration',
        valueFormatter: "x.toLocaleString() + 's'",
      },
      {
        field: 'switchCode',
        minWidth: 150,
      },
    ],
    defaultColDef: { flex: 1 },
    pagination : true, //set pagination to true
    paginationPageSize: 5 // define page size, default is 100

  },
  getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
  },
};

}

Attaching the example screenshot -

Used this example

Ag-grid Master/Detail grid Independent pagination at Master and Detail

1 Answers