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

680 Views Asked by At

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/

1

There are 1 best solutions below

0
Pratik Bhat On

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 -

enter image description here

Used this example