diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
index 6dadfc9ec04836d3da8d633018beca656dd8d065..044e208990a5822557dc353c0f1016c1de532cd3 100644
--- a/packages/data-table-view/package.json
+++ b/packages/data-table-view/package.json
@@ -30,7 +30,8 @@
     "i18next": "^17.0.3",
     "lit-element": "^2.1.0",
     "lit-html": "^1.1.1",
-    "jquery": "^3.4.1"
+    "jquery": "^3.4.1",
+    "datatables.net-dt": "^1.10.19"
   },
   "scripts": {
     "clean": "rm dist/*",
diff --git a/packages/data-table-view/src/demo.js b/packages/data-table-view/src/demo.js
index d02f77de18edef9a80347888d559de706120d209..a6499f01f64a5fe1e785b430e9e3c4a66b9d1557 100644
--- a/packages/data-table-view/src/demo.js
+++ b/packages/data-table-view/src/demo.js
@@ -1,5 +1,5 @@
 import 'vpu-auth';
-import './vpu-data-table-view.js';
+import './data-table-view.js';
 import {setting, getAPiUrl} from './utils.js';
 import {i18n} from './i18n';
 import {html, LitElement} from 'lit-element';
diff --git a/packages/data-table-view/src/i18n.js b/packages/data-table-view/src/i18n.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2380632e7095df7cc09dddf372598f5d6b5898c
--- /dev/null
+++ b/packages/data-table-view/src/i18n.js
@@ -0,0 +1,29 @@
+import i18next from 'i18next';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+const i18n = i18next.createInstance();
+
+i18n.init({
+    lng: 'de',
+    fallbackLng: ['de'],
+    debug: false,
+    initImmediate: false, // Don't init async
+    resources: {
+        en: {translation: en},
+        de: {translation: de}
+    },
+});
+
+console.assert(i18n.isInitialized);
+
+function dateTimeFormat(date, options) {
+    return new Intl.DateTimeFormat(i18n.languages, options).format(date);
+}
+
+function numberFormat(number, options) {
+    return new Intl.NumberFormat(i18n.languages, options).format(number);
+}
+
+export {i18n, dateTimeFormat, numberFormat};
diff --git a/packages/data-table-view/src/i18n/de/translation.json b/packages/data-table-view/src/i18n/de/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..7a73a41bfdf76d6f793007240d80983a52f15f97
--- /dev/null
+++ b/packages/data-table-view/src/i18n/de/translation.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/packages/data-table-view/src/i18n/en/translation.json b/packages/data-table-view/src/i18n/en/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..7a73a41bfdf76d6f793007240d80983a52f15f97
--- /dev/null
+++ b/packages/data-table-view/src/i18n/en/translation.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/packages/data-table-view/src/utils.js b/packages/data-table-view/src/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d1384a4783519497dccb459f405e058f04f7984
--- /dev/null
+++ b/packages/data-table-view/src/utils.js
@@ -0,0 +1,44 @@
+import vars from './vars.js';
+
+export const getAssetURL = (path) => {
+    const elm = document.getElementById('vpu-library-shelving-wc-src');
+    if (!elm)
+        return path;
+    const url = elm.src;
+    // newer browsers only
+    //var url = import.meta.url;
+    return new URL(path, url).href;
+}
+
+export const getAPiUrl = function(path = "", withPrefix = true) {
+    return vars.apiBaseUrl + (withPrefix ? vars.apiUrlPrefix : "") + path;
+}
+
+/**
+ * Finds an object in a JSON result by identifier
+ *
+ * @param identifier
+ * @param results
+ * @param identifierAttribute
+ */
+export const findObjectInApiResults = (identifier, results, identifierAttribute = "@id") => {
+    const members = results["hydra:member"];
+
+    if (members === undefined) {
+        return;
+    }
+
+    for (const object of members){
+        if (object[identifierAttribute] === identifier) {
+            return object;
+        }
+    }
+}
+
+/**
+ * Reads a setting
+ *
+ * @param key
+ * @returns {*}
+ */
+export const setting = (key) => vars[key];
diff --git a/packages/data-table-view/src/vars.js b/packages/data-table-view/src/vars.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e25edd8790c49edf590d995c992267aa2f11926
--- /dev/null
+++ b/packages/data-table-view/src/vars.js
@@ -0,0 +1,35 @@
+var config;
+
+switch(process.env.BUILD) {
+    case "development":
+        config = {
+            apiBaseUrl: 'https://mw-dev.tugraz.at',
+            apiUrlPrefix: '',
+            keyCloakClientId: 'auth-dev-mw-frontend',
+        };
+
+        break;
+    case "production":
+        config = {
+            apiBaseUrl: 'https://mw.tugraz.at',
+            apiUrlPrefix: '',
+            keyCloakClientId: 'auth-prod-mw-frontend',
+        };
+        break;
+    case "demo":
+        config = {
+            apiBaseUrl: 'https://api-demo.tugraz.at',
+            apiUrlPrefix: '',
+            keyCloakClientId: 'auth-dev-mw-frontend',
+        };
+        break;
+    case "local":
+    default:
+        config = {
+            apiBaseUrl: 'http://127.0.0.1:8000',
+            apiUrlPrefix: '',
+            keyCloakClientId: 'auth-dev-mw-frontend-local',
+        };
+}
+
+export default config;