Following the example in the docs (https://mdbootstrap.com/docs/b5/vue/data/datatables/#section-action-buttons) I managed to add a working event listener to the action buttons.

Problem happens when datatable has lots of rows and user selects more rows per page (for example 50). When this happens, the new rows are displayed but no event from datatable component is fired.

Expected behavior

The @render event (or another) is fired so i can add event listeners to the new buttons that are displayed in the datatable.

Actual behavior

The added rows does not have event listeners because the @render event is not fired.

Resources (screenshots, code snippets etc.)

Data table component in template:

<data-table id="main-table" :dataset="data" :loading="loading" @render="addDataTableActionsEventListeners"/>

The function i use to add event listeners (taken from your docs example):

function addDataTableActionsEventListeners() {
  loading.value = true
  document.getElementsByClassName('table-action-materials').forEach(btn => {
    if (btn.getAttribute("click-listener") !== "true") {
      btn.addEventListener('click', () => {
        materials.value.detailData = {
          plant: btn.getAttribute('data-plant'),
          orderNumber: btn.getAttribute('data-orderNumber'),
          operationNumber: btn.getAttribute('data-operationNumber')
        }
        materials.value.showDetail = true
      })
      btn.setAttribute("click-listener", "true")
    }
  })
  document.getElementsByClassName('table-action-orders').forEach(btn => {
    if (btn.getAttribute("click-listener") !== "true") {
      btn.addEventListener('click', () => {
        orders.value.detailData = {
          plant: btn.getAttribute('data-plant'),
          orderNumber: btn.getAttribute('data-orderNumber'),
          operationNumber: btn.getAttribute('data-materials')
        }
        orders.value.showDetail = true
      })
      btn.setAttribute("click-listener", "true")
    }
  })
  loading.value = false
}