Mdb datatable does not rendering data which comes from api i

Hi there,

If You want to pass data from API, please use the following syntax:

<mdb-datatable :data="'https://my-json-server.typicode.com/Rotarepmi/exjson/db'" striped bordered  />

Also, in the next release we will udpate the datatable component, to control the data changes.

Best regards

Thanks for the reply, Mikolaj!

Anyhow, I've already tried those examples on that documentation. I copied the code in "Other JSON structure" still it didn't work.

Here's my snippet of code:

<template>
    <mdb-datatable
  :data="data"
  striped
  bordered
    />
</template>

<script>
import 'mdbvue/build/css/mdb.css';
import { mdbDatatable } from 'mdbvue';

export default {
   components: {
   mdbDatatable
 },
computed: {
  data() {
    return {
      columns: [],
      rows: []
    }
  },
},
methods: {
filterData(dataArr, keys) {
  let data = dataArr.map(entry => {
    let filteredEntry = {};
    keys.forEach(key => {
      if(key in entry) {
        filteredEntry[key] = entry[key];
      }
    })
    return filteredEntry;
  })
  return data;
}
 },
mounted(){
 fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(json => {
     console.log(json);
    let keys = ["id", "name", "username"];
    let entries = this.filterData(json, keys);
    //columns
    this.data.columns = keys.map(key => {
      return {
        label: key.toUpperCase(),
        field: key,
        sort: 'asc'
      };
    });
    //rows
    entries.map(entry => this.data.rows.push(entry));
    })
    .catch(err => console.log(err));
   }
 }

.dataTables_wrapper { min-width: 80% !important; margin: 70px auto 0px !important; }

Hi there,

We're currently working on that issue. We'll try to fix it as soon as possible.

Best regards

Hi there again,

We've found the solution for Your issue. The new code is available here: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api

Also to make sure the data is reactive it's necessary to add the following code to the Datatable component in our package:

watch: {
    data(newVal) {
      this.columns = newVal.columns;
    },
    (...)
}

It will be fixed in the next Vue release.

Best regards

Hi, code from here https://mdbootstrap.com/docs/vue/tables/datatables/#external-api by Other JSON structures doesnt work. How i can show not formatted ajax data?