​

<script>

import { mdbDatatable2 } from "mdbvue";

export default {

  name: "DatatablePage",

  components: {

    mdbDatatable2,

  },

  methods: {

    async fetchData(refetch = false) {

      const response = await fetch(

        "https://jsonplaceholder.typicode.com/users"

      );

      const data = await response.json();

​

      //populate columns from the external API

      let keysArray = [];

      for (let key in data[0]) {

        if (keysArray.length < 4) {

          keysArray.push({

            label: key.charAt(0).toUpperCase() + key.slice(1),

            field: key,

            sort: true,

          });

        }

      }

​

      // populate rows from the external API

      let rowsArray = [];

      for (let { id, name, username, email } of data) {

        rowsArray.push({

          id,

          name,

          username,

          email,

        });

      }

​

      if (refetch) {

        // clear data before overwrite

        // clearing columns will automatically add default test column 

        this.data.columns = [];

        this.data.rows = [];

      }

​

      this.data.columns.push(...keysArray);

​

      // remove test column

      this.data.columns.splice(1, 1);

​

      this.data.rows.push(...rowsArray);

    },

  },

  data() {

    return {

      data: {

        columns: [

          {

            field: "test",

            label: "test",

          },

        ],

        rows: [],

      },

      column: "",

    };

  },

  async mounted() {

    this.fetchData();

    setTimeout(() => {

      this.fetchData(true);

    }, 5000);

  },

};

</script>