UpdateItemTable.vue

<template>
  <div class="flex items-center justify-center panel w-full md:w-auto">
    <table :id=id class="table table-striped table-bordered table-hover"></table>
  </div>
</template>

<script>
const _ = require('lodash');
const $ = window.jQuery = require('jquery');
require('@/components/js/datatable');

let table;

export default {
  name: 'update-item-table',
  props: ['id', 'data'],
  data() {
    return {
    };
  },
  methods: {
    editUpdateItem(id) {
      // eslint-disable-next-line
      this.$router.push('/updateitem/' + id)
    },
    createTable(id, data) {
      const vm = this;

      _.forEach(data, (d) => {
        d.DT_RowID = `${d.id}`;
      });

      const columns = [
        {
          title: 'ID',
          data: 'id',
          fnCreatedCell: (nTd, sData, oData) => {
            $(nTd).html(`<a href="" class="edit-link"> ${sData}</a>`);
          },
        },
        {
          title: 'Resource Name',
          data: 'attributes.ResourceName',
        },
        {
          title: 'Resource ID',
          data: 'attributes.ResourceID',
        },
        {
          title: 'Attribute',
          data: 'attributes.DataAttribute',
        },
        {
          title: 'Value',
          data: 'attributes.DataAttributeValue',
        },
        {
          title: 'Change Operation',
          data: 'attributes.ChangeOperation',
        },
        {
          title: 'Review Operation',
          data: 'attributes.ReviewOperation',
        },
        {
          title: 'Submitted at',
          data: 'attributes.SubmittedAt',
          render: function ( data, type, row, meta ) {
            return new Date(Date.parse(data)).toLocaleString();
          },
        },
        {
          title: 'Submitted by',
          data: 'attributes.submittedBy',
          render: function ( data, type, row, meta ) {
            if(data.data) {
              return data.data.attributes.username
            } else {
              return '';
            }
          },
        },
        {
          title: 'Reviewer',
          data: 'attributes.reviewedBy',
          render: function ( data, type, row, meta ) {
            if(data.data) {
              return data.data.attributes.username
            } else {
              return '';
            }
          },
        }];

      const nTableOptions = {
        columns,
        // aaSorting: [[ 0, 'asc' ]],
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        paging: true,
        searching: true,
        info: false,
        data,
        order: [], // order: [[0, 'asc']],
        bDestroy: true, // Add this property to new setting,
        oLanguage: {
          sSearch: "Filter",
        },
        dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
      };

      const tableId = `#${id}`;
      if (table) {
        table.destroy();
        $(tableId).empty();
      }

      table = $(tableId).DataTable(nTableOptions);

      const tableBody = `${tableId} tbody`;

      $(tableBody).on('click', 'tr td a.edit-link', (e) => {
        e.preventDefault()
        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        vm.editUpdateItem(row.data().id);
      });
    },
    exportTsv() {
      // const vm = this;
    },
  },
  mounted() {
    const vm = this;
    vm.createTable(vm.id, vm.data);
  },
};
</script>

<style scoped>


@import url('~@/assets/datatable.css');

select.form-control {
  font-size: 12px;
  padding: 3px 12px;
}

ul.pagination {
  font-size: 1rem;
}

.form-inline .form-control {
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
}

.edit-link {
  font-weight: bold;
  color: #0065b9;
}

.uniprot-link {
  font-weight: bold;
  color: #0065b9;
}

.pubmed-link {
  font-weight: bold;
  color: #0065b9;
}

.external-link {
  font-weight: bold;
  color: #0065b9;
}

.pagination {
  font-size: 1.2rem;
}

</style>