Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Clickable Rows using Async Data

ktlivengood premium asked 2 years ago


Expected behavior Make rows clickable in data-table following this documentation but using Async Data.

Actual behavior data-table loads fine using the fetch api and update method, but I can't get the modal window to populate with the row data.

Resources (screenshots, code snippets etc.)


Mateusz Lazaru staff answered 2 years ago


Hi,

check this snippet:

https://mdbootstrap.com/snippets/standard/mlazaru/4412269#js-tab-view


ktlivengood premium commented 2 years ago

I would like to use a table field value rather than the index number.So instead of . . .table.addEventListener('rowClick.mdb.datatable', (e) => { const { index } = e; console.log(index);});

I would like to do something like ...table.addEventListener('rowClick.mdb.datatable', (e) => { const { field.in.row } = e; console.log(field.in.row);});

I've tried changing the data-mdb-index to equal the row id . . . asyncTable.update( { rows: data.map((user) => ({ ...user, actions: <br> <a role="button" class="star-email-button text-warning" data-mdb-index="${user.id}"><br> <i class="far fa-star"></i><br> </a><br> <a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${user.id}"><br> <i class="fa fa-trash-alt"></i><br> </a><br>

    }))

But i'm still not having any luck.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes