diff --git a/packages/data-table-view/.gitignore b/packages/data-table-view/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..e62f92aa809c7345cb05914d7143b0322ab6d725
--- /dev/null
+++ b/packages/data-table-view/.gitignore
@@ -0,0 +1,5 @@
+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json
diff --git a/packages/data-table-view/.gitmodules b/packages/data-table-view/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..1b2847ad3adfddcf684e5883c9c34135182639fe
--- /dev/null
+++ b/packages/data-table-view/.gitmodules
@@ -0,0 +1,6 @@
+[submodule "vendor/common"]
+ path = vendor/common
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
+[submodule "vendor/auth"]
+ path = vendor/auth
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
diff --git a/packages/data-table-view/.idea/.gitignore b/packages/data-table-view/.idea/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..5c98b428844d9f7d529e2b6fb918d15bf072f3df
--- /dev/null
+++ b/packages/data-table-view/.idea/.gitignore
@@ -0,0 +1,2 @@
+# Default ignored files
+/workspace.xml
\ No newline at end of file
diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md
index ccc15d9d640e1ad0667cfcb2957280714d414c4f..08e3f86350f3a78911b0c76c6d40da00a6ab533f 100644
--- a/packages/data-table-view/README.md
+++ b/packages/data-table-view/README.md
@@ -1,2 +1,33 @@
-# DataTableView
+# VPU DataTableView Web Component
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/KnowledgeBaseWebPageElementView)
+
+# Usage
+
+```html
+<vpu-data-table-view></vpu-data-table-view>
+```
+
+# Attributes
+- `value`: api request
+ - example `<vpu-data-table-view value="api/request"></vpu-data-table-view>`
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-data-table-view lang="de"></vpu-data-table-view>`
+- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
+ - example `<vpu-data-table-view entry-point-url="http://127.0.0.1:8000"></vpu-data-table-view>`
+
+# Local development
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/DataTableView.git
+cd DataTableView
+git submodule update --init
+
+# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8003
+npm run watch-local
+```
+
+Jump to <http://localhost:8003> and you should get a demo page.
diff --git a/packages/data-table-view/assets/favicon.ico b/packages/data-table-view/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
Binary files /dev/null and b/packages/data-table-view/assets/favicon.ico differ
diff --git a/packages/data-table-view/assets/index.html b/packages/data-table-view/assets/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef937cf133fc185a65229641a7457e3aa920165e
--- /dev/null
+++ b/packages/data-table-view/assets/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script type="module" id="vpu-data-table-view-wc-src" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-data-table-view-demo lang="de"></vpu-data-table-view-demo>
+</body>
+</html>
diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..6dadfc9ec04836d3da8d633018beca656dd8d065
--- /dev/null
+++ b/packages/data-table-view/package.json
@@ -0,0 +1,49 @@
+{
+ "name": "vpu-data-table-view",
+ "version": "1.0.0",
+ "main": "src/index.js",
+ "devDependencies": {
+ "karma": "^4.2.0",
+ "karma-chai": "^0.1.0",
+ "karma-chrome-launcher": "^3.0.0",
+ "karma-mocha": "^1.3.0",
+ "node-sass": "^4.12.0",
+ "puppeteer": "^1.15.0",
+ "mocha": "^6.2.0",
+ "chai": "^4.2.0",
+ "rollup": "^1.11.3",
+ "rollup-plugin-commonjs": "^9.3.4",
+ "rollup-plugin-copy": "^2.0.1",
+ "rollup-plugin-node-resolve": "^4.2.3",
+ "rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-serve": "^1.0.1",
+ "rollup-plugin-terser": "^4.0.4",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-replace": "^2.2.0",
+ "rollup-plugin-multi-entry": "^2.1.0",
+ "i18next-scanner": "^2.10.2",
+ "vpu-auth": "file:./vendor/auth",
+ "vpu-common": "file:./vendor/common"
+ },
+ "dependencies": {
+ "@webcomponents/webcomponentsjs": "^2.2.10",
+ "i18next": "^17.0.3",
+ "lit-element": "^2.1.0",
+ "lit-html": "^1.1.1",
+ "jquery": "^3.4.1"
+ },
+ "scripts": {
+ "clean": "rm dist/*",
+ "build": "npm run build-local",
+ "build-local": "rollup -c",
+ "build-dev": "rollup -c --environment BUILD:development",
+ "build-prod": "rollup -c --environment BUILD:production",
+ "build-demo": "rollup -c --environment BUILD:demo",
+ "build-test": "rollup -c --environment BUILD:test",
+ "i18next": "i18next-scanner",
+ "watch": "npm run watch-local",
+ "watch-local": "rollup -c --watch",
+ "watch-dev": "rollup -c --watch --environment BUILD:development",
+ "test": "npm run build-test && karma start --singleRun"
+ }
+}
diff --git a/packages/data-table-view/rollup.config.js b/packages/data-table-view/rollup.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbae1e0757fe4beb29d3b6fa6b34fefb84edce38
--- /dev/null
+++ b/packages/data-table-view/rollup.config.js
@@ -0,0 +1,45 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
+import multiEntry from 'rollup-plugin-multi-entry';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+ input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
+ output: {
+ file: 'dist/bundle.js',
+ format: 'esm'
+ },
+ plugins: [
+ multiEntry(),
+ resolve(),
+ commonjs({
+ include: 'node_modules/**'
+ }),
+ json(),
+ replace({
+ "process.env.BUILD": '"' + build + '"',
+ }),
+ postcss({
+ inject: false,
+ minimize: false,
+ plugins: []
+ }),
+ (build !== 'local' && build !== 'test') ? terser() : false,
+ copy({
+ targets: [
+ 'assets/index.html',
+ 'assets/favicon.ico'
+ ],
+ outputFolder: 'dist'
+ }),
+ (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8003}) : false
+ ]
+};
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
new file mode 100644
index 0000000000000000000000000000000000000000..17c787f4503e89a3948287e363239a61f66a7b2f
--- /dev/null
+++ b/packages/data-table-view/src/data-table-view.js
@@ -0,0 +1,64 @@
+import $ from 'jquery';
+import dt from 'datatables.net';
+import {setting, getAPiUrl} from './utils.js';
+import {i18n} from './i18n';
+import {html, LitElement} from 'lit-element';
+import commonUtils from 'vpu-common/utils';
+
+dt(window, $);
+
+class DataTableView extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ value: { type: String },
+ entryPointUrl: { type: String, attribute: 'entry-point-url' },
+ };
+ }
+
+ loadWebPageElement() {
+ if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
+ return;
+ }
+
+ const apiUrl = this.entryPointUrl + this.value; // TODO
+ var that = this;
+
+ fetch(apiUrl, {
+ headers: {
+ 'Content-Type': 'application/ld+json',
+ 'Authorization': 'Bearer ' + window.VPUAuthToken,
+ },
+ })
+ .then(res => res.json())
+ .then() // TODO
+ .catch();
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ render() {
+ return html`
+ <style>
+ </style>
+ <table>
+ <tr><th>TODO..</th></tr>
+ </table>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-data-table-view', DataTableView);
diff --git a/packages/data-table-view/src/demo.js b/packages/data-table-view/src/demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..d02f77de18edef9a80347888d559de706120d209
--- /dev/null
+++ b/packages/data-table-view/src/demo.js
@@ -0,0 +1,51 @@
+import 'vpu-auth';
+import './vpu-data-table-view.js';
+import {setting, getAPiUrl} from './utils.js';
+import {i18n} from './i18n';
+import {html, LitElement} from 'lit-element';
+import commonUtils from 'vpu-common/utils';
+
+class DataTableViewDemo extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ render() {
+ return html`
+ <style>
+ </style>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+
+ <section class="section">
+ <div class="content">
+ <h1 class="title">DataTableView-Demo</h1>
+ </div>
+ <div class="content">
+ <vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
+ </div>
+ <div class="content">
+ <data-table-view lang="${this.lang}" value=""></data-table-view>
+ </div>
+ </section>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-data-table-view-demo', DataTableViewDemo);