diff --git a/frontend-js/package.json b/frontend-js/package.json
index 432f0545aeea0a09526a386b3c777706ccfd820e..df64c9734ad611a48a8e556a25488c59ef5224a1 100644
--- a/frontend-js/package.json
+++ b/frontend-js/package.json
@@ -16,6 +16,7 @@
     "bootstrap": "^3.3.7",
     "browserify": "^13.1.1",
     "chai": "^3.5.0",
+    "datatables.net": "^1.10.13",
     "exorcist": "^0.4.0",
     "file-url": "^2.0.0",
     "jquery": "3.1.1",
diff --git a/frontend-js/src/main/js/gui/PublicationListDialog.js b/frontend-js/src/main/js/gui/PublicationListDialog.js
index 71f8b2eaa0a6cc609ab64fda0958e6338ce8f2db..3cc425f04c8b1ea82dd073be9b3cbb054ca114d5 100644
--- a/frontend-js/src/main/js/gui/PublicationListDialog.js
+++ b/frontend-js/src/main/js/gui/PublicationListDialog.js
@@ -1,32 +1,59 @@
-"use strict";
-
-/* exported logger */
-
-var AbstractGuiElement = require('./AbstractGuiElement');
-var GuiConnector = require('../GuiConnector');
-
-var functions = require('../functions');
-var logger = require('../logger');
-
-function PublicationListDialog(params) {
-  AbstractGuiElement.call(this, params);
-  var self = this;
-  $(self.getElement()).dialog({
-    autoOpen : false,
-    resizable : false,
-  });
-}
-
-PublicationListDialog.prototype = Object.create(AbstractGuiElement.prototype);
-PublicationListDialog.prototype.constructor = PublicationListDialog;
-
-PublicationListDialog.prototype.show = function() {
-  var self = this;
-  $(self.getElement()).dialog("open");
-};
-
-PublicationListDialog.prototype.destroy = function() {
-  $(this.getElement()).dialog("destroy");
-};
-
-module.exports = PublicationListDialog;
+"use strict";
+
+/* exported logger */
+
+var AbstractGuiElement = require('./AbstractGuiElement');
+var GuiConnector = require('../GuiConnector');
+
+var Functions = require('../functions');
+var logger = require('../logger');
+
+function PublicationListDialog(params) {
+  AbstractGuiElement.call(this, params);
+  var self = this;
+  self.createPublicationListDialogGui();
+  $(self.getElement()).dialog({
+    autoOpen : false,
+    resizable : false,
+  });
+}
+
+PublicationListDialog.prototype = Object.create(AbstractGuiElement.prototype);
+PublicationListDialog.prototype.constructor = PublicationListDialog;
+
+PublicationListDialog.prototype.createPublicationListDialogGui = function() {
+  var self = this;
+  var head = Functions.createElement({
+    type : "thead",
+    content : "<tr><th>Pubmed ID</th></tr>"
+  });
+  var body = Functions.createElement({
+    type : "tbody",
+    content : "<tr><td>1234</td></tr><tr><td>2</td></tr><tr><td>4</td></tr>"
+  });
+  var tableElement = Functions.createElement({
+    type : "table",
+    style : "width: 100%",
+  });
+
+  tableElement.appendChild(head);
+  tableElement.appendChild(body);
+
+  self.tableElement = tableElement;
+  self.getElement().appendChild(tableElement);
+};
+PublicationListDialog.prototype.show = function() {
+  var self = this;
+  $(self.getElement()).dialog("open");
+
+  if (!$.fn.DataTable.isDataTable(self.tableElement)) {
+    $(self.tableElement).dataTable();
+  }
+
+};
+
+PublicationListDialog.prototype.destroy = function() {
+  $(this.getElement()).dialog("destroy");
+};
+
+module.exports = PublicationListDialog;
diff --git a/frontend-js/src/test/js/gui/ProjectInfoPanel-test.js b/frontend-js/src/test/js/gui/ProjectInfoPanel-test.js
index 72e3ee05ca281dbc89f527b63e7685017de9c403..c1b6ac5cff31c8b7daf27d92e7d6a415ee3bac04 100644
--- a/frontend-js/src/test/js/gui/ProjectInfoPanel-test.js
+++ b/frontend-js/src/test/js/gui/ProjectInfoPanel-test.js
@@ -18,7 +18,7 @@ describe('ProjectInfoPanel', function() {
   });
 
   it('contructor', function() {
-    var div = document.createElement("div");
+    var div = testDiv;
 
     var map = helper.createCustomMap();
 
@@ -30,7 +30,7 @@ describe('ProjectInfoPanel', function() {
   });
 
   it('refresh', function() {
-    var div = document.createElement("div");
+    var div = testDiv;
     var panel = new ProjectInfoPanel({
       element : div,
       customMap : helper.createCustomMap(),
@@ -41,7 +41,7 @@ describe('ProjectInfoPanel', function() {
   });
 
   it('download source', function() {
-    var div = document.createElement("div");
+    var div = testDiv;
     var panel = new ProjectInfoPanel({
       element : div,
       customMap : helper.createCustomMap(),
@@ -50,7 +50,7 @@ describe('ProjectInfoPanel', function() {
   });
 
   it('show publication list', function() {
-    var div = document.createElement("div");
+    var div = testDiv;
     var panel = new ProjectInfoPanel({
       element : div,
       customMap : helper.createCustomMap(),
diff --git a/frontend-js/src/test/js/mocha-config.js b/frontend-js/src/test/js/mocha-config.js
index c8307a5d9f7e4430879dbc0a9cca4989ac76feeb..00fea2820eb4afaa1d4857f9fe458e7f561b0ff9 100644
--- a/frontend-js/src/test/js/mocha-config.js
+++ b/frontend-js/src/test/js/mocha-config.js
@@ -16,10 +16,14 @@ global.$ = require('jQuery');
 global.jQuery = $;
 global.window.$ = $;
 
+global.Option = window.Option;
+
 require('jquery-ui-dist/jquery-ui.js');
 
 require("bootstrap");
 
+require('datatables.net')(window, $);
+
 global.google = require('./google-map-mock');
 
 global.GuiConnector = require('./GuiConnector-mock');