chore(release): 0.0.6

fix: error when launching queries without a result from query tabs
fix: field name displayed instead of alias
2025-06-05 21:59:22 +02:00 · 2020-09-03 13:46:16 +02:00 · 2020-09-03 13:44:58 +02:00 · 2020-09-02 18:14:30 +02:00 · 2020-09-01 19:23:13 +02:00 · 2020-08-31 17:39:49 +02:00
83 changed files with 9138 additions and 15168 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,6 +1,6 @@
 # These are supported funding model platforms

-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [fabio286]
 patreon: fabio286
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -8,4 +8,4 @@ updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
-      interval: "daily" 
+      interval: "weekly" 
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,4 @@ thumbs.db
 .vscode
 TODO.md
 *.txt
-dev-app-update.yml
+package-lock.json
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "fix": true,
+  "formatter": "verbose",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null
+  },
+  "syntax": "scss"
+}
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,38 @@
+language: node_js
+node_js: 12
+
+before_install:
+  - npm install
+
+cache:
+  directories:
+    - node_modules
+    - app/node_modules
+    - $HOME/.cache/electron
+    - $HOME/.cache/electron-builder
+    - $HOME/.npm/_prebuilds
+
+env:
+  global:
+    - ELECTRON_CACHE=$HOME/.cache/electron
+    - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
+
+jobs:
+  include:
+    - stage: Test
+      script:
+        - npm test
+    - stage: Deploy Linux & Windows
+      if: tag IS present
+      os: linux
+      services: docker
+      script:
+        - docker run --rm --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') -v ${PWD}:/project -v ~/.cache/electron:/root/.cache/electron -v ~/.cache/electron-builder:/root/.cache/electron-builder electronuserland/builder:wine /bin/bash -c "npm run build -- --linux --win -p always"
+      before_cache:
+        - rm -rf $HOME/.cache/electron-builder/wine
+    - stage: Deploy Mac
+      if: tag IS present
+      os: osx
+      osx_image: xcode10.2
+      script:
+        - npm run build -- -p always
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,18 +1,48 @@
 # Changelog

-## [0.0.2-alpha](https://github.com/Fabio286/antares/releases/tag/v0.0.2-alpha) - 2020-06-26
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

-### Added
+### [0.0.6](https://github.com/EStarium/antares/compare/v0.0.5...v0.0.6) (2020-09-03)

- **Edit table fields:** You can edit fields from tables by double click. For now is available only on numeric and textual values.  
- Various improvements under the hood.
-
-### Fixed
-
- Connection test.
-
-## [0.0.1-alpha](https://github.com/Fabio286/antares/releases/tag/v0.0.1-alpha) - 2020-06-19

 ### Features

- **Initial release:**
+* aliases support ([264de9c](https://github.com/EStarium/antares/commit/264de9c5686fb3a2ef22d96171f45b915ba1b34b))
+* middle click to close tabs ([256ec76](https://github.com/EStarium/antares/commit/256ec765883fcf247355190827e943c76e95f13b))
+* monaco-editor as query editor ([196a3e0](https://github.com/EStarium/antares/commit/196a3e0185a3d68b7c4ade8dbf187d2b216cc00b))
+* sql suggestions in query editor ([8dc74ef](https://github.com/EStarium/antares/commit/8dc74ef2c335e8ae4a69f5d2651df65939139b1b))
+* support to multiple query tabs ([d7ed00f](https://github.com/EStarium/antares/commit/d7ed00f4a3613da9015c9fc48c4d8062d292e416))
+* tabs horizontal scroll with mouse wheel ([3a6ea76](https://github.com/EStarium/antares/commit/3a6ea76b93682ebd50908df7368c62c2c1e27958))
+
+
+### Bug Fixes
+
+* error when launching queries without a result from query tabs ([a1a6f51](https://github.com/EStarium/antares/commit/a1a6f51f2fba5140f5e3bd9cd6557c8a13dfaa2c))
+* field name displayed instead of alias ([801a0de](https://github.com/EStarium/antares/commit/801a0de1865dea2a59ff057b7c2cc988cc9c87ed))
+* wrong table height calc in some cases ([fd6d517](https://github.com/EStarium/antares/commit/fd6d5177efb6161aab01f9e108eda60df6c7d8c4))
+
+### [0.0.5](https://github.com/EStarium/antares/compare/v0.0.4...v0.0.5) (2020-08-17)
+
+### Features
+
+* Badge on setting icon and update tab when update is available ([e8141b6](https://github.com/EStarium/antares/commit/e8141b632154f765ca73fa50b9b7120dc592ead0))
+* Foreign key support in add/edit row ([0b6a188](https://github.com/EStarium/antares/commit/0b6a188d1959b80b4a66946cc79d2dd3853a428b))
+* Option to insert table rows ([2f1dfdc](https://github.com/EStarium/antares/commit/2f1dfdc6543b4a6c1d595f0daa00c0832be49c77))
+
+### Bug Fixes
+
+* Insert files via add row option ([3c6e818](https://github.com/EStarium/antares/commit/3c6e818ba06f1b8b5db0ecf80c3b7498d6d2a841))
+* Newline replaced with undefined inside queries ([59e4a79](https://github.com/EStarium/antares/commit/59e4a79f42076b3fce98a764e9ad6a01c674555b))
+* Query result header didn't show just selected fields ([7bc1009](https://github.com/EStarium/antares/commit/7bc10092fe4823e03133e69e0a7bf86e44fde43b))
+* Table header not fixed on top when fast scrolling ([13b0816](https://github.com/EStarium/antares/commit/13b0816837461119eaab79fdb7e92223e0950630))
+* Time and datetime precision ([771f8a2](https://github.com/EStarium/antares/commit/771f8a2d682c64105231e3fef199f05150596298))
+* Update a row with a string key value ([eb348b3](https://github.com/EStarium/antares/commit/eb348b3095b6905321b62eed6cea228374ebc3d1))
+* Window title not perfectly centered ([7651d05](https://github.com/EStarium/antares/commit/7651d05b37970574d6ae4bdf75c20c69d59c1e6d))
+* Wrong schema passed in query tab when a different database was selected ([6d0724d](https://github.com/EStarium/antares/commit/6d0724dc90cdebb10e0342d2c472bdd07aa345f8))
+
+### [0.0.4](https://github.com/EStarium/antares/compare/v0.0.3-alpha...v0.0.4) (2020-08-06)
+
+### Features
+
+* Blob fields edit/view/download ([712fe9f](https://github.com/EStarium/antares/commit/712fe9f00d210db0f2317eca61e7fb648383e3fe))
+* Window title in app title bar ([0089c0c](https://github.com/EStarium/antares/commit/0089c0cbac6caf0a6fd195849099f18713580228))
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2015-2017 Jakub Szwacz
+Copyright (c) 2020 Fabio Di Stasio

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

--- a/README.md
+++ b/README.md
@@ -4,12 +4,41 @@

 # Antares SQL Client

-Antares is an SQL client based on Electron.js and Vue.js that aims to become a useful tool, especially for developers.  
+![GitHub package.json version](https://img.shields.io/github/package-json/v/estarium/antares) [![Build Status](https://travis-ci.com/EStarium/antares.svg?branch=master)](https://travis-ci.com/EStarium/antares) ![GitHub All Releases](https://img.shields.io/github/downloads/estarium/antares/total) ![GitHub](https://img.shields.io/github/license/estarium/antares)
+
+Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers.  
 My target is to support as many databases as possible, and all major operating systems, including the ARM versions.  

-At the moment this application is in a development state, it lacks many features, and is'nt ready as a main SQL client. However i'm actively working on it, hoping to provide all all minimum features as soon as possible.
+**At the moment this application is an alpha, it lacks many features, and isn't ready as a main SQL client**. However i'm actively working on it, hoping to provide all essential features as soon as possible.

-If you are curious to try this early state of Antares you can download and install the [latest release](https://github.com/EStarium/antares/releases), and stay tuned for updates. At moment is only available for Windows.
+If you are curious to try this early state of Antares you can download and install the [latest release](https://github.com/EStarium/antares/releases), and stay tuned for updates.
+
+## Philosophy
+
+Why am I developing an SQL client when there are a lot of them on the market?  
+The main goal is to develop a totally free, cross platform and open source alternative, empowered by JavaScript's ecosystem.  
+An application created with minimalism and semplicity in mind, with features in the righ places, not hundreds of tiny buttons or submenu.
+
+## How to contribute
+
+- [Translate Antares](https://github.com/EStarium/antares/wiki/Translate-Antares)
+
+## Roadmap
+
+This is a roadmap with major features will come in near future.
+
+- Improvements of query editor area.
+- Multiple query tabs.
+- Tables management (add/edit/delete).
+- Stored procedures, views, schedulers and trigger support.
+- Database tools.
+- Context menu shortcuts.
+- Keyboard shortcuts.
+- More secure password storage.
+- Query logs console.
+- Fake data filler.
+- Import/export and migration.
+- Themes.

 ## Currently supported

@@ -24,6 +53,19 @@ If you are curious to try this early state of Antares you can download and insta

 ### Operating Systems

+#### • x86
+
 - [x] Windows
+- [x] Linux
+- [x] MacOS (needs tests)
+
+#### • ARM
+
+- [ ] Windows
 - [ ] Linux
 - [ ] MacOS
+
+## Translations
+
+[Giuseppe Gigliotti](https://github.com/ReverbOD) / [Italian Translation](https://github.com/EStarium/antares/pull/20)  
+[Mohd-PH](https://github.com/Mohd-PH) / [Arabic Translation](https://github.com/EStarium/antares/pull/29)
--- a/build/icon.png
+++ b/build/icon.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,47 +1,63 @@
 {
  "name": "antares",
  "productName": "Antares",
-  "version": "0.0.2-alpha",
+  "version": "0.0.6",
  "description": "A cross-platform easy to use SQL client.",
  "license": "MIT",
  "repository": "https://github.com/EStarium/antares.git",
  "scripts": {
    "dev": "cross-env NODE_ENV=development electron-webpack dev",
    "compile": "electron-webpack",
-    "dist": "cross-env NODE_ENV=production npm run compile && electron-builder",
-    "dist:dir": "cross-env NODE_ENV=production npm run dist --dir -c.compression=store -c.mac.identity=null",
-    "publish": "electron-builder -p always"
+    "build": "cross-env NODE_ENV=production npm run compile && electron-builder",
+    "release": "standard-version",
+    "release:pre": "npm run release -- --prerelease alpha",
+    "lint": "eslint ."
  },
  "author": "Fabio Di Stasio <fabio286@gmail.com>",
  "build": {
    "appId": "com.estarium.antares",
    "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
-    "files": [
-      "static/*"
-    ]
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    },
+    "linux": {
+      "target": [
+        "deb",
+        "AppImage"
+      ],
+      "category": "Development"
+    }
  },
  "electronWebpack": {
-    "whiteListedModules": [
-      "codemirror"
-    ],
    "renderer": {
      "webpackConfig": "webpack.config.js"
    }
  },
  "dependencies": {
-    "codemirror": "^5.56.0",
-    "electron-log": "^4.2.2",
-    "electron-updater": "^4.3.1",
-    "lodash": "^4.17.19",
-    "material-design-icons": "^3.0.1",
+    "@mdi/font": "^5.5.55",
+    "electron-log": "^4.2.4",
+    "electron-updater": "^4.3.4",
+    "lodash": "^4.17.20",
    "moment": "^2.27.0",
+    "monaco-editor": "^0.20.0",
    "mssql": "^6.2.1",
    "mysql": "^2.18.1",
-    "pg": "^8.3.0",
+    "pg": "^8.3.2",
    "source-map-support": "^0.5.16",
    "spectre.css": "^0.5.9",
    "vue-click-outside": "^1.1.0",
-    "vue-i18n": "^8.18.2",
+    "vue-i18n": "^8.21.0",
    "vue-the-mask": "^0.11.1",
    "vuedraggable": "^2.24.0",
    "vuex": "^3.5.1",
@@ -50,21 +66,26 @@
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
-    "electron": "^8.4.0",
-    "electron-builder": "^22.7.0",
+    "electron": "^10.1.0",
+    "electron-builder": "^22.8.0",
    "electron-devtools-installer": "^3.1.1",
    "electron-webpack": "^2.8.2",
    "electron-webpack-vue": "^2.4.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.7.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
+    "monaco-editor-webpack-plugin": "^1.9.0",
    "node-sass": "^4.14.1",
-    "sass-loader": "^9.0.2",
+    "sass-loader": "^10.0.1",
+    "standard-version": "^9.0.0",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0",
    "vue": "^2.6.11",
-    "webpack": "^4.43.0"
+    "webpack": "^4.44.1"
  }
 }
--- a/src/common/fieldTypes.js
+++ b/src/common/fieldTypes.js
@@ -0,0 +1,12 @@
+export const TEXT = ['char', 'varchar'];
+export const LONG_TEXT = ['text', 'mediumtext', 'longtext'];
+
+export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal'];
+
+export const DATE = ['date'];
+export const TIME = ['time'];
+export const DATETIME = ['datetime', 'timestamp'];
+
+export const BLOB = ['blob', 'mediumblob', 'longblob'];
+
+export const BIT = ['bit'];
--- a/src/common/libs/bufferToBase64.js
+++ b/src/common/libs/bufferToBase64.js
@@ -0,0 +1,7 @@
+'use strict';
+export function bufferToBase64 (buf) {
+   const binstr = Array.prototype.map.call(buf, ch => {
+      return String.fromCharCode(ch);
+   }).join('');
+   return btoa(binstr);
+}
--- a/src/common/libs/formatBytes.js
+++ b/src/common/libs/formatBytes.js
@@ -0,0 +1,12 @@
+'use strict';
+export function formatBytes (bytes, decimals = 2) {
+   if (bytes === 0) return '0 Bytes';
+
+   const k = 1024;
+   const dm = decimals < 0 ? 0 : decimals;
+   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+   const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
--- a/src/common/libs/mimeFromHex.js
+++ b/src/common/libs/mimeFromHex.js
@@ -1,13 +1,10 @@
-export function uidGen () {
-   return Math.random().toString(36).substr(2, 9).toUpperCase();
-};
-
+'use strict';
 export function mimeFromHex (hex) {
   switch (hex.substring(0, 4)) { // 2 bytes
      case '424D':
         return { ext: 'bmp', mime: 'image/bmp' };
      case '1F8B':
-         return { ext: 'gz', mime: 'application/gzip' };
+         return { ext: 'tar.gz', mime: 'application/gzip' };
      case '0B77':
         return { ext: 'ac3', mime: 'audio/vnd.dolby.dd-raw' };
      case '7801':
@@ -20,7 +17,7 @@ export function mimeFromHex (hex) {
      default:
         switch (hex.substring(0, 6)) { // 3 bytes
            case 'FFD8FF':
-               return { ext: 'jpj', mime: 'image/jpeg' };
+               return { ext: 'jpg', mime: 'image/jpeg' };
            case '4949BC':
               return { ext: 'jxr', mime: 'image/vnd.ms-photo' };
            case '425A68':
@@ -39,21 +36,11 @@ export function mimeFromHex (hex) {
                     return { ext: 'bpg', mime: 'image/bpg' };
                  case '4D4D002A':
                     return { ext: 'tif', mime: 'image/tiff' };
+                  case '00000100':
+                     return { ext: 'ico', mime: 'image/x-icon' };
                  default:
-                     return { ext: '???', mime: 'unknown ' + hex };
+                     return { ext: '', mime: 'unknown ' + hex };
               }
         }
   }
 };
-
-export function formatBytes (bytes, decimals = 2) {
-   if (bytes === 0) return '0 Bytes';
-
-   const k = 1024;
-   const dm = decimals < 0 ? 0 : decimals;
-   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-   const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
--- a/src/common/libs/sqlEscaper.js
+++ b/src/common/libs/sqlEscaper.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-useless-escape */
+// eslint-disable-next-line no-control-regex
+const regex = new RegExp(/[\0\x08\x09\x1a\n\r"'\\\%]/gm);
+
+/**
+ * Escapes a string
+ *
+ * @param {String} string
+ * @returns {String}
+ */
+function sqlEscaper (string) {
+   return string.replace(regex, char => {
+      const m = ['\\0', '\\x08', '\\x09', '\\x1a', '\\n', '\\r', '\'', '"', '\\', '\\\\', '%'];
+      const r = ['\\\\0', '\\\\b', '\\\\t', '\\\\z', '\\\\n', '\\\\r', '\'\'', '""', '\\\\', '\\\\\\\\', '\\%'];
+      return r[m.indexOf(char)] || char;
+   });
+}
+
+export { sqlEscaper };
--- a/src/common/libs/uidGen.js
+++ b/src/common/libs/uidGen.js
@@ -0,0 +1,8 @@
+/**
+ * @export
+ * @param {String} [prefix]
+ * @returns {String} Unique ID
+ */
+export function uidGen (prefix) {
+   return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase();
+};
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -3,7 +3,6 @@
 import { app, BrowserWindow, nativeImage } from 'electron';
 import * as path from 'path';
 import { format as formatUrl } from 'url';
-
 import ipcHandlers from './ipc-handlers';

 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -12,35 +11,29 @@ process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
 let mainWindow;

-function createMainWindow () {
+async function createMainWindow () {
   const icon = require('../renderer/images/logo-32.png');
   const window = new BrowserWindow({
-      width: 1600,
-      height: 1000,
-      minHeight: 550,
+      width: 1024,
+      height: 800,
      minWidth: 900,
+      minHeight: 550,
      title: 'Antares',
      autoHideMenuBar: true,
      icon: nativeImage.createFromDataURL(icon.default),
      webPreferences: {
         nodeIntegration: true,
-         'web-security': false
+         'web-security': false,
+         enableRemoteModule: true,
+         spellcheck: false
      },
      frame: false,
      backgroundColor: '#1d1d1d'
   });

-   if (isDevelopment)
-      window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
-   else {
-      window.loadURL(formatUrl({
-         pathname: path.join(__dirname, 'index.html'),
-         protocol: 'file',
-         slashes: true
-      }));
-   }
-
   if (isDevelopment) {
+      await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
+
      const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
      window.webContents.openDevTools();

@@ -52,6 +45,13 @@ function createMainWindow () {
            console.log(err);
         });
   }
+   else {
+      await window.loadURL(formatUrl({
+         pathname: path.join(__dirname, 'index.html'),
+         protocol: 'file',
+         slashes: true
+      }));
+   }

   window.on('closed', () => {
      mainWindow = null;
@@ -64,12 +64,12 @@ function createMainWindow () {
      });
   });

-   // Initialize ipcHandlers
-   ipcHandlers();
-
   return window;
 };

+// Initialize ipcHandlers
+ipcHandlers();
+
 // quit application when all windows are closed
 app.on('window-all-closed', () => {
   // on macOS it is common for applications to stay open until the user explicitly quits
--- a/src/main/ipc-handlers/application.js
+++ b/src/main/ipc-handlers/application.js
@@ -0,0 +1,7 @@
+import { app, ipcMain } from 'electron';
+
+export default () => {
+   ipcMain.on('close-app', () => {
+      app.exit();
+   });
+};
--- a/src/main/ipc-handlers/connection.js
+++ b/src/main/ipc-handlers/connection.js
@@ -4,8 +4,8 @@ import { AntaresConnector } from '../libs/AntaresConnector';
 import InformationSchema from '../models/InformationSchema';
 import Generic from '../models/Generic';

-export default (connections) => {
-   ipcMain.handle('testConnection', async (event, conn) => {
+export default connections => {
+   ipcMain.handle('test-connection', async (event, conn) => {
      const Connection = new AntaresConnector({
         client: conn.client,
         params: {
@@ -28,7 +28,7 @@ export default (connections) => {
      }
   });

-   ipcMain.handle('checkConnection', async (event, uid) => {
+   ipcMain.handle('check-connection', async (event, uid) => {
      return uid in connections;
   });

@@ -71,7 +71,7 @@ export default (connections) => {
      }
   });

-   ipcMain.handle('rawQuery', async (event, { uid, query, schema }) => {
+   ipcMain.handle('raw-query', async (event, { uid, query, schema }) => {
      if (!query) return;
      try {
         const result = await Generic.raw(connections[uid], query, schema);
--- a/src/main/ipc-handlers/index.js
+++ b/src/main/ipc-handlers/index.js
@@ -1,6 +1,7 @@
 import connection from './connection';
 import tables from './tables';
 import updates from './updates';
+import application from './application';

 const connections = {};

@@ -8,4 +9,5 @@ export default () => {
   connection(connections);
   tables(connections);
   updates();
+   application();
 };
--- a/src/main/ipc-handlers/tables.js
+++ b/src/main/ipc-handlers/tables.js
@@ -5,7 +5,7 @@ import Tables from '../models/Tables';
 // TODO: remap objects based on client

 export default (connections) => {
-   ipcMain.handle('getTableColumns', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-columns', async (event, { uid, schema, table }) => {
      try {
         const result = await InformationSchema.getTableColumns(connections[uid], schema, table);// TODO: uniform column properties
         return { status: 'success', response: result };
@@ -15,7 +15,7 @@ export default (connections) => {
      }
   });

-   ipcMain.handle('getTableData', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-data', async (event, { uid, schema, table }) => {
      try {
         const result = await Tables.getTableData(connections[uid], schema, table);
         return { status: 'success', response: result };
@@ -25,7 +25,17 @@ export default (connections) => {
      }
   });

-   ipcMain.handle('updateTableCell', async (event, params) => {
+   ipcMain.handle('get-key-usage', async (event, { uid, schema, table }) => {
+      try {
+         const result = await InformationSchema.getKeyUsage(connections[uid], schema, table);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('update-table-cell', async (event, params) => {
      try {
         const result = await Tables.updateTableCell(connections[params.uid], params);
         return { status: 'success', response: result };
@@ -35,7 +45,7 @@ export default (connections) => {
      }
   });

-   ipcMain.handle('deleteTableRows', async (event, params) => {
+   ipcMain.handle('delete-table-rows', async (event, params) => {
      try {
         const result = await Tables.deleteTableRows(connections[params.uid], params);
         return { status: 'success', response: result };
@@ -44,4 +54,24 @@ export default (connections) => {
         return { status: 'error', response: err.toString() };
      }
   });
+
+   ipcMain.handle('insert-table-rows', async (event, params) => {
+      try {
+         await Tables.insertTableRows(connections[params.uid], params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-foreign-list', async (event, params) => {
+      try {
+         const results = await Tables.getForeignList(connections[params.uid], params);
+         return { status: 'success', response: results };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };
--- a/src/main/ipc-handlers/updates.js
+++ b/src/main/ipc-handlers/updates.js
@@ -2,39 +2,40 @@ import { ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';

 let mainWindow;
+autoUpdater.allowPrerelease = true;

 export default () => {
-   ipcMain.on('checkForUpdates', event => {
+   ipcMain.on('check-for-updates', event => {
      mainWindow = event;

      autoUpdater.checkForUpdatesAndNotify().catch(() => {
-         mainWindow.reply('checkFailed');
+         mainWindow.reply('check-failed');
      });
   });

-   ipcMain.on('restartToUpdate', () => {
+   ipcMain.on('restart-to-update', () => {
      autoUpdater.quitAndInstall();
   });

   // auto-updater events
   autoUpdater.on('checking-for-update', () => {
-      mainWindow.reply('checkingForUpdate');
+      mainWindow.reply('checking-for-update');
   });

   autoUpdater.on('update-available', () => {
-      mainWindow.reply('updateAvailable');
+      mainWindow.reply('update-available');
   });

   autoUpdater.on('update-not-available', () => {
-      mainWindow.reply('updateNotAvailable');
+      mainWindow.reply('update-not-available');
   });

-   autoUpdater.on('download-progress', (data) => {
-      mainWindow.reply('downloadProgress', data);
+   autoUpdater.on('download-progress', data => {
+      mainWindow.reply('download-progress', data);
   });

   autoUpdater.on('update-downloaded', () => {
-      mainWindow.reply('updateDownloaded');
+      mainWindow.reply('update-downloaded');
   });

   autoUpdater.logger = require('electron-log');
--- a/src/main/libs/AntaresConnector.js
+++ b/src/main/libs/AntaresConnector.js
@@ -20,6 +20,7 @@ export class AntaresConnector {
      this._params = args.params;
      this._poolSize = args.poolSize || false;
      this._connection = null;
+      this._logger = args.logger || console.log;

      this._queryDefaults = {
         schema: '',
@@ -31,7 +32,7 @@ export class AntaresConnector {
         limit: [],
         join: [],
         update: [],
-         insert: [],
+         insert: {},
         delete: false
      };
      this._query = Object.assign({}, this._queryDefaults);
@@ -107,6 +108,11 @@ export class AntaresConnector {
      return this;
   }

+   into (table) {
+      this._query.from = table;
+      return this;
+   }
+
   delete (table) {
      this._query.delete = true;
      this.from(table);
@@ -161,6 +167,16 @@ export class AntaresConnector {
      return this;
   }

+   /**
+    * @param {Object} obj field: value
+    * @returns
+    * @memberof AntaresConnector
+    */
+   insert (obj) {
+      this._query.insert = { ...this._query.insert, ...obj };
+      return this;
+   }
+
   /**
    * @returns {string} SQL string
    * @memberof AntaresConnector
@@ -187,8 +203,10 @@ export class AntaresConnector {

      // FROM
      let fromRaw = '';
-      if (!this._query.update.length && !!this._query.from)
+      if (!this._query.update.length && !Object.keys(this._query.insert).length && !!this._query.from)
         fromRaw = 'FROM';
+      else if (Object.keys(this._query.insert).length)
+         fromRaw = 'INTO';

      switch (this._client) {
         case 'maria':
@@ -208,6 +226,21 @@ export class AntaresConnector {
      const updateArray = this._query.update.reduce(this._reducer, []);
      const updateRaw = updateArray.length ? `SET ${updateArray.join(', ')} ` : '';

+      let insertRaw = '';
+      if (Object.keys(this._query.insert).length) {
+         const fieldsList = [];
+         const valueList = [];
+         const fields = this._query.insert;
+
+         for (const key in fields) {
+            if (fields[key] === null) continue;
+            fieldsList.push(key);
+            valueList.push(fields[key]);
+         }
+
+         insertRaw = `(${fieldsList.join(', ')}) VALUES (${valueList.join(', ')}) `;
+      }
+
      const groupByArray = this._query.groupBy.reduce(this._reducer, []);
      const groupByRaw = groupByArray.length ? `GROUP BY ${groupByArray.join(', ')} ` : '';

@@ -228,7 +261,7 @@ export class AntaresConnector {
            break;
      }

-      return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}`;
+      return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${insertRaw}`;
   }

   /**
@@ -247,20 +280,25 @@ export class AntaresConnector {
    * @memberof AntaresConnector
    */
   async raw (sql) {
-      if (process.env.NODE_ENV === 'development') console.log(sql);
+      if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder

      switch (this._client) { // TODO: uniform fields with every client type, needed table name and fields array
         case 'maria':
         case 'mysql': {
-            const { rows, fields } = await new Promise((resolve, reject) => {
-               this._connection.query(sql, (err, rows, fields) => {
+            const { rows, report, fields } = await new Promise((resolve, reject) => {
+               this._connection.query(sql, (err, response, fields) => {
                  if (err)
                     reject(err);
-                  else
-                     resolve({ rows, fields });
+                  else {
+                     resolve({
+                        rows: Array.isArray(response) ? response : false,
+                        report: !Array.isArray(response) ? response : false,
+                        fields
+                     });
+                  }
               });
            });
-            return { rows, fields };
+            return { rows, report, fields };
         }
         case 'mssql': {
            const results = await this._connection.request().query(sql);
--- a/src/main/models/InformationSchema.js
+++ b/src/main/models/InformationSchema.js
@@ -13,13 +13,52 @@ export default class {
         .run();
   }

-   static getTableColumns (connection, schema, table) {
-      return connection
+   static async getTableColumns (connection, schema, table) {
+      const { rows } = await connection
         .select('*')
         .schema('information_schema')
         .from('COLUMNS')
         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'` })
         .orderBy({ ORDINAL_POSITION: 'ASC' })
         .run();
+
+      return rows.map(field => {
+         return {
+            name: field.COLUMN_NAME,
+            key: field.COLUMN_KEY.toLowerCase(),
+            type: field.DATA_TYPE,
+            numPrecision: field.NUMERIC_PRECISION,
+            datePrecision: field.DATETIME_PRECISION,
+            charLength: field.CHARACTER_MAXIMUM_LENGTH,
+            isNullable: field.IS_NULLABLE,
+            default: field.COLUMN_DEFAULT,
+            charset: field.CHARACTER_SET_NAME,
+            collation: field.COLLATION_NAME,
+            autoIncrement: field.EXTRA.includes('auto_increment')
+         };
+      });
+   }
+
+   static async getKeyUsage (connection, schema, table) {
+      const { rows } = await connection
+         .select('*')
+         .schema('information_schema')
+         .from('KEY_COLUMN_USAGE')
+         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'`, REFERENCED_TABLE_NAME: 'IS NOT NULL' })
+         .run();
+
+      return rows.map(field => {
+         return {
+            schema: field.TABLE_SCHEMA,
+            table: field.TABLE_NAME,
+            column: field.COLUMN_NAME,
+            position: field.ORDINAL_POSITION,
+            constraintPosition: field.POSITION_IN_UNIQUE_CONSTRAINT,
+            constraintName: field.CONSTRAINT_NAME,
+            refSchema: field.REFERENCED_TABLE_SCHEMA,
+            refTable: field.REFERENCED_TABLE_NAME,
+            refColumn: field.REFERENCED_COLUMN_NAME
+         };
+      });
   }
 }
--- a/src/main/models/Tables.js
+++ b/src/main/models/Tables.js
@@ -1,4 +1,8 @@
 'use strict';
+import { sqlEscaper } from 'common/libs/sqlEscaper';
+import { TEXT, LONG_TEXT, NUMBER, BLOB } from 'common/fieldTypes';
+import fs from 'fs';
+
 export default class {
   static async getTableData (connection, schema, table) {
      return connection
@@ -9,13 +13,35 @@ export default class {
         .run();
   }

-   static async updateTableCell (connection, params) { // TODO: Handle different field types
-      return connection
-         .update({ [params.field]: `= "${params.content}"` })
+   static async updateTableCell (connection, params) {
+      let escapedParam;
+      let reload = false;
+      const id = typeof params.id === 'number' ? params.id : `"${params.id}"`;
+
+      if (NUMBER.includes(params.type))
+         escapedParam = params.content;
+      else if ([...TEXT, ...LONG_TEXT].includes(params.type))
+         escapedParam = `"${sqlEscaper(params.content)}"`;
+      else if (BLOB.includes(params.type)) {
+         if (params.content) {
+            const fileBlob = fs.readFileSync(params.content);
+            escapedParam = `0x${fileBlob.toString('hex')}`;
+            reload = true;
+         }
+         else
+            escapedParam = '""';
+      }
+      else
+         escapedParam = `"${sqlEscaper(params.content)}"`;
+
+      await connection
+         .update({ [params.field]: `= ${escapedParam}` })
         .schema(params.schema)
         .from(params.table)
-         .where({ [params.primary]: `= ${params.id}` })
+         .where({ [params.primary]: `= ${id}` })
         .run();
+
+      return { reload };
   }

   static async deleteTableRows (connection, params) {
@@ -25,4 +51,52 @@ export default class {
         .where({ [params.primary]: `IN (${params.rows.join(',')})` })
         .run();
   }
+
+   static async insertTableRows (connection, params) {
+      const insertObj = {};
+      for (const key in params.row) {
+         const type = params.fields[key];
+         let escapedParam;
+
+         if (params.row[key] === null)
+            escapedParam = 'NULL';
+         else if (NUMBER.includes(type))
+            escapedParam = params.row[key];
+         else if ([...TEXT, ...LONG_TEXT].includes(type))
+            escapedParam = `"${sqlEscaper(params.row[key])}"`;
+         else if (BLOB.includes(type)) {
+            if (params.row[key]) {
+               const fileBlob = fs.readFileSync(params.row[key]);
+               escapedParam = `0x${fileBlob.toString('hex')}`;
+            }
+            else
+               escapedParam = '""';
+         }
+         else
+            escapedParam = `"${sqlEscaper(params.row[key])}"`;
+
+         insertObj[key] = escapedParam;
+      }
+
+      for (let i = 0; i < params.repeat; i++) {
+         await connection
+            .schema(params.schema)
+            .into(params.table)
+            .insert(insertObj)
+            .run();
+      }
+   }
+
+   static async getForeignList (connection, params) {
+      const query = connection
+         .select(`${params.column} AS foreignColumn`)
+         .schema(params.schema)
+         .from(params.table)
+         .orderBy('foreignColumn ASC');
+
+      if (params.description)
+         query.select(`LEFT(${params.description}, 20) AS foreignDescription`);
+
+      return query.run();
+   }
 }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
      <div id="window-content">
         <TheSettingBar />
         <div id="main-content" class="container">
-            <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
+            <TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
            <div v-else class="columns col-gapless">
               <Workspace
                  v-for="connection in connections"
@@ -40,8 +40,7 @@ export default {
      ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings')
   },
   data () {
-      return {
-      };
+      return {};
   },
   computed: {
      ...mapGetters({
@@ -53,7 +52,7 @@ export default {
      })
   },
   mounted () {
-      ipcRenderer.send('checkForUpdates');
+      ipcRenderer.send('check-for-updates');
   },
   methods: {
      ...mapActions({
@@ -64,30 +63,30 @@ export default {
 </script>

 <style lang="scss">
-   html,
-   body{
-      height: 100%;
-   }
+  html,
+  body {
+    height: 100%;
+  }

-   #wrapper{
-      height: 100vh;
-      position: relative;
-   }
+  #wrapper {
+    height: 100vh;
+    position: relative;
+  }

-   #window-content{
-      display: flex;
-      position: relative;
-      overflow: hidden;
-   }
+  #window-content {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }

-   #main-content {
-      padding: 0;
-      justify-content: flex-start;
-      height: calc(100vh - #{$excluding-size});
-      width: calc(100% - #{$settingbar-width});
+  #main-content {
+    padding: 0;
+    justify-content: flex-start;
+    height: calc(100vh - #{$excluding-size});
+    width: calc(100% - #{$settingbar-width});

-      > .columns{
-         height: calc(100vh - #{$footer-height});
-      }
-   }
+    > .columns {
+      height: calc(100vh - #{$footer-height});
+    }
+  }
 </style>
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/src/renderer/components/BaseConfirmModal.vue
@@ -1,8 +1,8 @@
 <template>
-   <div class="modal modal-sm active">
+   <div class="modal active" :class="modalSizeClass">
      <a class="modal-overlay" @click="hideModal" />
      <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header">
+         <div v-if="hasHeader" class="modal-header pl-2">
            <div class="modal-title h6">
               <slot name="header" />
            </div>
@@ -29,13 +29,13 @@
               class="btn btn-primary mr-2"
               @click="confirmModal"
            >
-               {{ $t('word.confirm') }}
+               {{ confirmText || $t('word.confirm') }}
            </button>
            <button
               class="btn btn-link"
               @click="hideModal"
            >
-               {{ $t('word.cancel') }}
+               {{ cancelText || $t('word.cancel') }}
            </button>
         </div>
      </div>
@@ -45,6 +45,15 @@
 <script>
 export default {
   name: 'BaseConfirmModal',
+   props: {
+      size: {
+         type: String,
+         validator: prop => ['small', 'medium', 'large'].includes(prop),
+         default: 'small'
+      },
+      confirmText: String,
+      cancelText: String
+   },
   computed: {
      hasHeader () {
         return !!this.$slots.header;
@@ -54,6 +63,13 @@ export default {
      },
      hasDefault () {
         return !!this.$slots.default;
+      },
+      modalSizeClass () {
+         if (this.size === 'small')
+            return 'modal-sm';
+         else if (this.size === 'large')
+            return 'modal-lg';
+         else return '';
      }
   },
   methods: {
@@ -70,7 +86,7 @@ export default {
 </script>

 <style scoped>
-   .modal.modal-sm .modal-container{
-      padding: 0;
-   }
+  .modal.modal-sm .modal-container {
+    padding: 0;
+  }
 </style>
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@@ -31,65 +31,64 @@ export default {
   },
   methods: {
      close () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
      }
   }
 };
 </script>

 <style lang="scss">
-   .context{
+  .context {
+    display: flex;
+    color: $body-font-color;
+    font-size: 16px;
+    z-index: 400;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    pointer-events: none;
+
+    .context-container {
+      min-width: 100px;
+      max-width: 150px;
+      z-index: 10;
+      box-shadow: 0 0 1px 0 #000;
+      padding: 0;
+      background: #1d1d1d;
+      border-radius: 0.1rem;
      display: flex;
+      flex-direction: column;
+      position: absolute;
+      pointer-events: initial;
+
+      .context-element {
+        display: flex;
+        align-items: center;
+        padding: 0.1rem 0.3rem;
+        cursor: pointer;
+
+        &:hover {
+          background: $primary-color;
+        }
+      }
+    }
+
+    .context-overlay {
+      background: transparent;
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
      position: absolute;
-      color: $body-font-color;
-      font-size: 16px;
-      z-index: 400;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-      padding: 0.4rem;
-      position: fixed;
      right: 0;
      top: 0;
-      left: 0;
-      bottom: 0;
-      pointer-events: none;
-
-      .context-container{
-         min-width: 100px;
-         max-width: 150px;
-         z-index: 1;
-         box-shadow: 0px 0px 1px 0px #000;
-         padding: 0;
-         background: #1d1d1d;
-         border-radius: 0.1rem;
-         display: flex;
-         flex-direction: column;
-         position: absolute;
-         pointer-events: initial;
-
-         .context-element{
-            display: flex;
-            align-items: center;
-            padding: .1rem .3rem;
-            cursor: pointer;
-
-            &:hover{
-               background: $primary-color;
-            }
-         }
-      }
-
-      .context-overlay{
-         background: transparent;
-         bottom: 0;
-         cursor: default;
-         display: block;
-         left: 0;
-         position: absolute;
-         right: 0;
-         top: 0;
-      }
-   }
+    }
+  }

 </style>
--- a/src/renderer/components/BaseNotification.vue
+++ b/src/renderer/components/BaseNotification.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="toast mt-2" :class="notificationStatus.className">
      <span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
-         <i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
+         <i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
         <span class="notification-message">{{ message }}</span>
      </span>
      <i
         v-if="isExpandable"
-         class="material-icons c-hand"
+         class="mdi mdi-24px c-hand expand-btn"
+         :class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
         @click="toggleExpand"
-      >{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
+      />
      <button class="btn btn-clear ml-2" @click="hideToast" />
   </div>
 </template>
@@ -38,19 +39,19 @@ export default {
         switch (this.status) {
            case 'success':
               className = 'toast-success';
-               iconName = 'done';
+               iconName = 'mdi-check';
               break;
            case 'error':
               className = 'toast-error';
-               iconName = 'error';
+               iconName = 'mdi-alert-rhombus';
               break;
            case 'warning':
               className = 'toast-warning';
-               iconName = 'warning';
+               iconName = 'mdi-alert';
               break;
            case 'primary':
               className = 'toast-primary';
-               iconName = 'info_outline';
+               iconName = 'mdi-information-outline';
               break;
         }

@@ -71,25 +72,28 @@ export default {
 };
 </script>
 <style scoped>
-   .toast{
-      display: flex;
-      justify-content: space-between;
-      user-select: text;
-      word-break: break-all;
-      width: fit-content;
-      margin-left: auto;
-   }
+  .toast {
+    display: flex;
+    justify-content: space-between;
+    user-select: text;
+    word-break: break-all;
+    width: fit-content;
+    margin-left: auto;
+  }

-   .notification-message{
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      max-width: 30rem;
-      user-select: none;
-   }
+  .notification-message {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 30rem;
+  }

-   .expanded .notification-message{
-      white-space: initial;
-   }
+  .expand-btn {
+    align-items: initial;
+  }
+
+  .expanded .notification-message {
+    white-space: initial;
+  }
 </style>
--- a/src/renderer/components/BaseToast.vue
+++ b/src/renderer/components/BaseToast.vue
@@ -34,19 +34,19 @@ export default {
         switch (this.status) {
            case 'success':
               className = 'toast-success';
-               iconTag = '<i class="material-icons mr-1">done</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-check mr-1"></i>';
               break;
            case 'error':
               className = 'toast-error';
-               iconTag = '<i class="material-icons mr-1">error</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
               break;
            case 'warning':
               className = 'toast-warning';
-               iconTag = '<i class="material-icons mr-1">warning</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
               break;
            case 'primary':
               className = 'toast-primary';
-               iconTag = '<i class="material-icons mr-1">info_outline</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
               break;
         }

@@ -70,10 +70,10 @@ export default {
 };
 </script>
 <style scoped>
-   .toast{
-      display: flex;
-      justify-content: space-between;
-      user-select: text;
-      word-break: break-all;
-   }
+  .toast {
+    display: flex;
+    justify-content: space-between;
+    user-select: text;
+    word-break: break-all;
+  }
 </style>
--- a/src/renderer/components/BaseVirtualScroll.vue
+++ b/src/renderer/components/BaseVirtualScroll.vue
@@ -21,47 +21,50 @@
 </template>

 <script>
-// credits: https://github.com/xrado 👼
 export default {
   name: 'BaseVirtualScroll',
   props: {
      items: Array,
-      itemHeight: Number
+      itemHeight: Number,
+      visibleHeight: Number,
+      scrollElement: {
+         type: HTMLDivElement,
+         default: null
+      }
   },
   data () {
      return {
         topHeight: 0,
         bottomHeight: 0,
-         visibleItems: []
+         visibleItems: [],
+         renderTimeout: null,
+         localScrollElement: null
      };
   },
   mounted () {
      this._checkScrollPosition = this.checkScrollPosition.bind(this);
-      this.checkScrollPosition();
-      this.$el.addEventListener('scroll', this._checkScrollPosition);
-      this.$el.addEventListener('wheel', this._checkScrollPosition);
+      this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
+      this.updateWindow();
+      this.localScrollElement.addEventListener('scroll', this._checkScrollPosition);
   },
   beforeDestroy () {
-      this.$el.removeEventListener('scroll', this._checkScrollPosition);
-      this.$el.removeEventListener('wheel', this._checkScrollPosition);
+      this.localScrollElement.removeEventListener('scroll', this._checkScrollPosition);
   },
   methods: {
-      checkScrollPosition (e = {}) {
-         const el = this.$el;
+      checkScrollPosition (e) {
+         clearTimeout(this.renderTimeout);

-         // prevent parent scroll
-         if ((el.scrollTop === 0 && e.deltaY < 0) || (Math.abs(el.scrollTop - (el.scrollHeight - el.clientHeight)) <= 1 && e.deltaY > 0))
-            e.preventDefault();
-
-         this.updateWindow(e);
+         this.renderTimeout = setTimeout(() => {
+            this.updateWindow(e);
+         }, 200);
      },
-
      updateWindow (e) {
-         const visibleItemsCount = Math.ceil(this.$el.clientHeight / this.itemHeight);
+         const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
         const totalScrollHeight = this.items.length * this.itemHeight;
+         const offset = 50;
+
+         const scrollTop = this.localScrollElement.scrollTop;

-         const scrollTop = this.$el.scrollTop;
-         const offset = 5;
         const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
         const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
         const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
--- a/src/renderer/components/ForeignKeySelect.vue
+++ b/src/renderer/components/ForeignKeySelect.vue
@@ -0,0 +1,89 @@
+<template>
+   <select
+      ref="editField"
+      class="px-1"
+      @change="onChange"
+      @blur="$emit('blur')"
+   >
+      <option
+         v-for="row in foreignList"
+         :key="row.foreignColumn"
+         :value="row.foreignColumn"
+         :selected="row.foreignColumn === value"
+      >
+         {{ row.foreignColumn }} {{ 'foreignDescription' in row ? ` - ${row.foreignDescription}` : '' | cutText }}
+      </option>
+   </select>
+</template>
+
+<script>
+import Tables from '@/ipc-api/Tables';
+import { mapGetters, mapActions } from 'vuex';
+import { TEXT, LONG_TEXT } from 'common/fieldTypes';
+export default {
+   name: 'ForeignKeySelect',
+   filters: {
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 15 ? `${val.substring(0, 15)}...` : val;
+      }
+   },
+   props: {
+      value: [String, Number],
+      keyUsage: Object
+   },
+   data () {
+      return {
+         foreignList: []
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected'
+      })
+   },
+   async created () {
+      let firstTextField;
+      const params = {
+         uid: this.selectedWorkspace,
+         schema: this.keyUsage.refSchema,
+         table: this.keyUsage.refTable
+      };
+
+      try { // Field data
+         const { status, response } = await Tables.getTableColumns(params);
+         if (status === 'success')
+            firstTextField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type)).name || false;
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+
+      try { // Foregn list
+         const { status, response } = await Tables.getForeignList({
+            ...params,
+            column: this.keyUsage.refColumn,
+            description: firstTextField
+         });
+
+         if (status === 'success')
+            this.foreignList = response.rows;
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      onChange () {
+         this.$emit('update:value', this.$refs.editField.value);
+      }
+   }
+};
+</script>
--- a/src/renderer/components/ModalAskCredentials.vue
+++ b/src/renderer/components/ModalAskCredentials.vue
@@ -2,9 +2,11 @@
   <div class="modal active modal-sm">
      <a class="modal-overlay" />
      <div class="modal-container p-0">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
            <div class="modal-title h6">
-               {{ $t('word.credentials') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+               </div>
            </div>
            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
         </div>
@@ -63,7 +65,7 @@ export default {
   },
   methods: {
      closeModal () {
-         this.$emit('closeAsking');
+         this.$emit('close-asking');
      },
      sendCredentials () {
         this.$emit('credentials', this.credentials);
@@ -71,7 +73,3 @@ export default {
   }
 };
 </script>
-
-<style>
-
-</style>
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/src/renderer/components/ModalEditConnection.vue
@@ -2,9 +2,11 @@
   <div class="modal active">
      <a class="modal-overlay c-hand" @click="closeModal" />
      <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
            <div class="modal-title h6">
-               {{ $t('message.editConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server mr-1" /> {{ $t('message.editConnection') }}
+               </div>
            </div>
            <a class="btn btn-clear c-hand" @click="closeModal" />
         </div>
@@ -36,7 +38,7 @@
                              <option value="maria">
                                 MariaDB
                              </option>
-                              <option value="mssql">
+                              <!-- <option value="mssql">
                                 Microsoft SQL
                              </option>
                              <option value="pg">
@@ -44,7 +46,7 @@
                              </option>
                              <option value="oracledb">
                                 Oracle DB
-                              </option>
+                              </option> -->
                           </select>
                        </div>
                     </div>
@@ -135,7 +137,7 @@
      </div>
      <ModalAskCredentials
         v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
         @credentials="continueTest"
      />
   </div>
@@ -230,7 +232,7 @@ export default {
 </script>

 <style scoped>
-   .modal-container{
-      max-width: 450px;
-   }
+  .modal-container {
+    max-width: 450px;
+  }
 </style>
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@@ -2,9 +2,11 @@
   <div class="modal active">
      <a class="modal-overlay c-hand" @click="closeModal" />
      <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
            <div class="modal-title h6">
-               {{ $t('message.createNewConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
+               </div>
            </div>
            <a class="btn btn-clear c-hand" @click="closeModal" />
         </div>
@@ -40,7 +42,7 @@
                              <option value="maria">
                                 MariaDB
                              </option>
-                              <option value="mssql">
+                              <!-- <option value="mssql">
                                 Microsoft SQL
                              </option>
                              <option value="pg">
@@ -48,7 +50,7 @@
                              </option>
                              <option value="oracledb">
                                 Oracle DB
-                              </option>
+                              </option> -->
                           </select>
                        </div>
                     </div>
@@ -139,7 +141,7 @@
      </div>
      <ModalAskCredentials
         v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
         @credentials="continueTest"
      />
   </div>
@@ -148,7 +150,7 @@
 <script>
 import { mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
-import { uidGen } from 'common/libs/utilities';
+import { uidGen } from 'common/libs/uidGen';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';

@@ -168,7 +170,7 @@ export default {
            user: 'root',
            password: '',
            ask: false,
-            uid: uidGen()
+            uid: uidGen('C')
         },
         toast: {
            status: '',
@@ -253,7 +255,7 @@ export default {
 </script>

 <style scoped>
-   .modal-container{
-      max-width: 450px;
-   }
+  .modal-container {
+    max-width: 450px;
+  }
 </style>
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/src/renderer/components/ModalNewTableRow.vue
@@ -0,0 +1,326 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.addNewRow') }}
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body">
+            <div class="content">
+               <form class="form-horizontal">
+                  <fieldset :disabled="isInserting">
+                     <div
+                        v-for="(field, key) in fields"
+                        :key="field.name"
+                        class="form-group"
+                     >
+                        <div class="col-4 col-sm-12">
+                           <label class="form-label" :title="field.name">{{ field.name }}</label>
+                        </div>
+                        <div class="input-group col-8 col-sm-12">
+                           <ForeignKeySelect
+                              v-if="foreignKeys.includes(field.name)"
+                              class="form-select"
+                              :value.sync="localRow[field.name]"
+                              :key-usage="getKeyUsage(field.name)"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                           />
+                           <input
+                              v-else-if="inputProps(field).mask"
+                              v-model="localRow[field.name]"
+                              v-mask="inputProps(field).mask"
+                              class="form-input"
+                              :type="inputProps(field).type"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                           >
+                           <input
+                              v-else-if="inputProps(field).type === 'file'"
+                              class="form-input"
+                              type="file"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                              @change="filesChange($event,field.name)"
+                           >
+                           <input
+                              v-else
+                              v-model="localRow[field.name]"
+                              class="form-input"
+                              :type="inputProps(field).type"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                           >
+                           <span class="input-group-addon" :class="`type-${field.type}`">
+                              {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                           </span>
+                           <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                              <input
+                                 type="checkbox"
+                                 :checked="!field.autoIncrement"
+                                 @change.prevent="toggleFields($event, field)"
+                              ><i class="form-icon" />
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+               <input
+                  v-model="nInserts"
+                  type="number"
+                  class="form-input"
+                  min="1"
+                  :disabled="isInserting"
+               >
+               <span class="input-group-addon">
+                  <i class="mdi mdi-24px mdi-repeat" />
+               </span>
+            </div>
+            <div>
+               <button
+                  class="btn btn-primary mr-2"
+                  :class="{'loading': isInserting}"
+                  @click.stop="insertRows"
+               >
+                  {{ $t('word.insert') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { TEXT, LONG_TEXT, NUMBER, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { mask } from 'vue-the-mask';
+import { mapGetters, mapActions } from 'vuex';
+import Tables from '@/ipc-api/Tables';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
+
+export default {
+   name: 'ModalNewTableRow',
+   components: {
+      ForeignKeySelect
+   },
+   directives: {
+      mask
+   },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
+   props: {
+      connection: Object,
+      tabUid: [String, Number]
+   },
+   data () {
+      return {
+         localRow: {},
+         fieldsToExclude: [],
+         nInserts: 1,
+         isInserting: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getWorkspaceTab: 'workspaces/getWorkspaceTab'
+      }),
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      foreignKeys () {
+         return this.keyUsage.map(key => key.column);
+      },
+      fields () {
+         return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).fields : [];
+      },
+      keyUsage () {
+         return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).keyUsage : [];
+      }
+   },
+   watch: {
+      nInserts (val) {
+         if (!val || val < 1)
+            this.nInserts = 1;
+      }
+   },
+   mounted () {
+      const rowObj = {};
+
+      for (const field of this.fields) {
+         let fieldDefault;
+
+         if (field.default === 'NULL') fieldDefault = null;
+         else {
+            if (NUMBER.includes(field.type))
+               fieldDefault = +field.default;
+
+            if ([...TEXT, ...LONG_TEXT].includes(field.type))
+               fieldDefault = field.default ? field.default.substring(1, field.default.length - 1) : '';
+
+            if ([...TIME, ...DATE].includes(field.type))
+               fieldDefault = field.default;
+
+            if (DATETIME.includes(field.type)) {
+               if (field.default && field.default.toLowerCase().includes('current_timestamp')) {
+                  let datePrecision = '';
+                  for (let i = 0; i < field.datePrecision; i++)
+                     datePrecision += i === 0 ? '.S' : 'S';
+                  fieldDefault = moment().format(`YYYY-MM-DD HH:mm:ss${datePrecision}`);
+               }
+            }
+         }
+
+         rowObj[field.name] = fieldDefault;
+
+         if (field.autoIncrement)// Disable by default auto increment fields
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      }
+
+      this.localRow = { ...rowObj };
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async insertRows () {
+         this.isInserting = true;
+         const rowToInsert = this.localRow;
+         Object.keys(rowToInsert).forEach(key => {
+            if (this.fieldsToExclude.includes(key))
+               delete rowToInsert[key];
+            if (typeof rowToInsert[key] === 'undefined')
+               delete rowToInsert[key];
+         });
+
+         const fieldTypes = {};
+         this.fields.forEach(field => {
+            fieldTypes[field.name] = field.type;
+         });
+
+         try {
+            const { status, response } = await Tables.insertTableRows({
+               uid: this.selectedWorkspace,
+               schema: this.workspace.breadcrumbs.schema,
+               table: this.workspace.breadcrumbs.table,
+               row: rowToInsert,
+               repeat: this.nInserts,
+               fields: fieldTypes
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isInserting = false;
+      },
+      closeModal () {
+         this.$emit('hide');
+      },
+      fieldLength (field) {
+         if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
+         return field.numPrecision || field.datePrecision || field.charLength || 0;
+      },
+      inputProps (field) {
+         if ([...TEXT, ...LONG_TEXT].includes(field.type))
+            return { type: 'text', mask: false };
+
+         if (NUMBER.includes(field.type))
+            return { type: 'number', mask: false };
+
+         if (TIME.includes(field.type)) {
+            let timeMask = '##:##:##';
+            const precision = this.fieldLength(field);
+
+            for (let i = 0; i < precision; i++)
+               timeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: timeMask };
+         }
+
+         if (DATE.includes(field.type))
+            return { type: 'text', mask: '####-##-##' };
+
+         if (DATETIME.includes(field.type)) {
+            let datetimeMask = '####-##-## ##:##:##';
+            const precision = this.fieldLength(field);
+
+            for (let i = 0; i < precision; i++)
+               datetimeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: datetimeMask };
+         }
+
+         if (BLOB.includes(field.type))
+            return { type: 'file', mask: false };
+
+         if (BIT.includes(field.type))
+            return { type: 'text', mask: false };
+
+         return { type: 'text', mask: false };
+      },
+      toggleFields (event, field) {
+         if (event.target.checked)
+            this.fieldsToExclude = this.fieldsToExclude.filter(f => f !== field.name);
+         else
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      },
+      filesChange (event, field) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localRow[field] = files[0].path;
+      },
+
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.column === keyName);
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 500px;
+  }
+
+  .form-label {
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: ellipsis;
+  }
+
+  .input-group-addon {
+    display: flex;
+    align-items: center;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -2,9 +2,12 @@
   <div id="settings" class="modal active">
      <a class="modal-overlay c-hand" @click="closeModal" />
      <div class="modal-container">
-         <div class="modal-header">
-            <div class="modal-title h5">
-               {{ $t('word.settings') }}
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-cog mr-1" />
+                  {{ $t('word.settings') }}
+               </div>
            </div>
            <a class="btn btn-clear c-hand" @click="closeModal" />
         </div>
@@ -31,7 +34,7 @@
                        :class="{'active': selectedTab === 'update'}"
                        @click="selectTab('update')"
                     >
-                        <a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
+                        <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                     </li>
                     <li
                        class="tab-item"
@@ -45,11 +48,11 @@

               <div v-if="selectedTab === 'general'" class="panel-body py-4">
                  <form class="form-horizontal">
-                     <div class="col-6 col-sm-12">
-                        <div class="form-group">
+                     <div class="col-8 col-sm-12">
+                        <div class="form-group mb-4">
                           <div class="col-6 col-sm-12">
                              <label class="form-label">
-                                 <i class="material-icons md-18 mr-1">translate</i>
+                                 <i class="mdi mdi-18px mdi-translate mr-1" />
                                 {{ $t('word.language') }}:
                              </label>
                           </div>
@@ -69,6 +72,25 @@
                              </select>
                           </div>
                        </div>
+                        <div class="form-group">
+                           <div class="col-6 col-sm-12">
+                              <label class="form-label">
+                                 {{ $t('message.notificationsTimeout') }}:
+                              </label>
+                           </div>
+                           <div class="col-6 col-sm-12">
+                              <div class="input-group">
+                                 <input
+                                    v-model="localTimeout"
+                                    class="form-input"
+                                    type="number"
+                                    min="1"
+                                    @focusout="checkNotificationsTimeout"
+                                 >
+                                 <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                              </div>
+                           </div>
+                        </div>
                     </div>
                  </form>
               </div>
@@ -113,8 +135,8 @@ export default {
   },
   data () {
      return {
-         isUpdate: false,
         localLocale: null,
+         localTimeout: null,
         selectedTab: 'general'
      };
   },
@@ -123,7 +145,9 @@ export default {
         appName: 'application/appName',
         appVersion: 'application/appVersion',
         selectedSettingTab: 'application/selectedSettingTab',
-         selectedLocale: 'settings/getLocale'
+         selectedLocale: 'settings/getLocale',
+         notificationsTimeout: 'settings/getNotificationsTimeout',
+         updateStatus: 'application/getUpdateStatus'
      }),
      locales () {
         const locales = [];
@@ -131,46 +155,61 @@ export default {
            locales.push({ code: locale, name: localesNames[locale] });

         return locales;
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
      }
   },
   created () {
      this.localLocale = this.selectedLocale;
+      this.localTimeout = this.notificationsTimeout;
      this.selectedTab = this.selectedSettingTab;
   },
   methods: {
      ...mapActions({
         closeModal: 'application/hideSettingModal',
-         changeLocale: 'settings/changeLocale'
+         changeLocale: 'settings/changeLocale',
+         updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
      }),
      selectTab (tab) {
         this.selectedTab = tab;
      },
      openOutside (link) {
         shell.openExternal(link);
+      },
+      checkNotificationsTimeout () {
+         if (!this.localTimeout)
+            this.localTimeout = 10;
+
+         this.updateNotificationsTimeout(+this.localTimeout);
      }
   }
 };
 </script>

 <style lang="scss">
-#settings{
-   .modal-body{
-      overflow: hidden;
+#settings {
+  .modal-body {
+    overflow: hidden;

-      .panel-body{
-         height: calc(70vh - 70px);
-         overflow: auto;
-      }
+    .panel-body {
+      height: calc(70vh - 70px);
+      overflow: auto;
+    }

-      .badge::after{
-         background: #32b643;
-      }
+    .badge::after {
+      background: #32b643;
+    }

-      .form-label{
-         display: flex;
-         align-items: center;
-      }
-   }
+    .badge-update::after {
+      bottom: initial;
+      background: $primary-color;
+    }

+    .form-label {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 </style>
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="empty">
      <div class="empty-icon">
-         <i class="material-icons md-48">system_update_alt</i>
+         <i class="mdi mdi-48px mdi-cloud-download" />
      </div>
      <p class="empty-title h5">
         {{ updateMessage }}
@@ -68,17 +68,17 @@ export default {
   },
   methods: {
      checkForUpdates () {
-         ipcRenderer.send('checkForUpdates');
+         ipcRenderer.send('check-for-updates');
      },
      restartToUpdate () {
-         ipcRenderer.send('restartToUpdate');
+         ipcRenderer.send('restart-to-update');
      }
   }
 };
 </script>

 <style lang="scss">
-.empty{
-   color: $body-font-color;
+.empty {
+  color: $body-font-color;
 }
 </style>
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@@ -1,25 +1,15 @@
 <template>
   <div class="editor-wrapper">
-      <textarea
-         ref="codemirror"
-         :options="cmOptions"
-      />
+      <div ref="editor" class="editor" />
   </div>
 </template>

 <script>
-import CodeMirror from 'codemirror';

-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/material-darker.css';
-import 'codemirror/mode/sql/sql';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/addon/hint/sql-hint';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { completionItemProvider } from '@/suggestions/sql';

-CodeMirror.defineOption('sql-hint');
+monaco.languages.registerCompletionItemProvider('sql', completionItemProvider(monaco));

 export default {
   name: 'QueryEditor',
@@ -28,62 +18,53 @@ export default {
   },
   data () {
      return {
-         cminstance: null,
-         content: '',
-         cmOptions: {
-            tabSize: 3,
-            smartIndent: true,
-            styleActiveLine: true,
-            lineNumbers: true,
-            line: true,
-            mode: 'text/x-sql',
-            theme: 'material-darker',
-            extraKeys: {
-               'Ctrl-Space': 'autocomplete'
-            },
-            hintOptions: {
-               tables: {
-                  users: ['name', 'score', 'birthDate'],
-                  countries: ['name', 'population', 'size']
-               }
-            },
-            autoCloseBrackets: true
-         }
+         editor: null
      };
   },
   mounted () {
-      this.initialize();
-   },
-   methods: {
-      initialize () {
-         this.cminstance = CodeMirror.fromTextArea(this.$refs.codemirror, this.cmOptions);
-         this.cminstance.setValue(this.value || this.content);
+      this.editor = monaco.editor.create(this.$refs.editor, {
+         value: this.value,
+         language: 'sql',
+         theme: 'vs-dark',
+         autoIndent: true,
+         minimap: {
+            enabled: false
+         },
+         contextmenu: false,
+         wordBasedSuggestions: true,
+         acceptSuggestionOnEnter: 'smart',
+         quickSuggestions: true
+      });

-         this.cminstance.on('change', cm => {
-            this.content = cm.getValue();
-            this.$emit('input', this.content);
-         });
-      }
+      this.editor.onDidChangeModelContent(e => {
+         const content = this.editor.getValue();
+         this.$emit('update:value', content);
+      });
+   },
+   beforeDestroy () {
+      this.editor && this.editor.dispose();
   }
 };
 </script>

 <style lang="scss">
-   .editor-wrapper{
-      border-bottom: 1px solid #444444;
-   }
+  .editor-wrapper {
+    border-bottom: 1px solid #444;

-   .CodeMirror{
+    .editor {
      height: 200px;
+      width: 100%;
+    }
+  }

-      .CodeMirror-scroll{
-         max-width: 100%;
-      }
+  .CodeMirror {
+    .CodeMirror-scroll {
+      max-width: 100%;
+    }

-      .CodeMirror-line {
-         word-break: break-word!important;
-         white-space: pre-wrap!important;
-         word-break: normal;
-      }
-   }
+    .CodeMirror-line {
+      word-break: break-word !important;
+      white-space: pre-wrap !important;
+    }
+  }
 </style>
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -1,13 +1,13 @@
 <template>
   <BaseContextMenu
      :context-event="contextEvent"
-      @closeContext="$emit('closeContext')"
+      @close-context="$emit('close-context')"
   >
      <div class="context-element" @click="showEditModal(contextConnection)">
-         <i class="material-icons md-18 text-light pr-1">edit</i> {{ $t('word.edit') }}
+         <i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
      </div>
      <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('word.delete') }}
+         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}
      </div>

      <ConfirmModal
@@ -16,7 +16,9 @@
         @hide="hideConfirmModal"
      >
         <template :slot="'header'">
-            {{ $t('message.deleteConnection') }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
+            </div>
         </template>
         <div :slot="'body'">
            <div class="mb-2">
@@ -69,7 +71,3 @@ export default {
   }
 };
 </script>
-
-<style>
-
-</style>
--- a/src/renderer/components/TheAppWelcome.vue
+++ b/src/renderer/components/TheAppWelcome.vue
@@ -2,7 +2,7 @@
   <div class="columns">
      <div class="column col-12 empty text-light">
         <div class="empty-icon">
-            <i class="material-icons md-48">mood</i>
+            <i class="mdi mdi-48px mdi-emoticon" />
         </div>
         <p class="empty-title h5">
            {{ $t('message.appWelcome') }}
@@ -11,7 +11,7 @@
            {{ $t('message.appFirstStep') }}
         </p>
         <div class="empty-action">
-            <button class="btn btn-primary" @click="$emit('newConn')">
+            <button class="btn btn-primary" @click="$emit('new-conn')">
               {{ $t('message.createConnection') }}
            </button>
         </div>
@@ -26,12 +26,12 @@ export default {
 </script>

 <style scoped>
-   .empty{
-      height: 100%;
-      border-radius: 0;
-      background: transparent;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-   }
+  .empty {
+    height: 100%;
+    border-radius: 0;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 </style>
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -3,7 +3,7 @@
      <div class="footer-left-elements">
         <ul class="footer-elements">
            <li class="footer-element">
-               <i class="material-icons md-18 mr-1">memory</i>
+               <i class="mdi mdi-18px mdi-memory mr-1" />
               <small>{{ appVersion }}</small>
            </li>
         </ul>
@@ -11,15 +11,15 @@

      <div class="footer-right-elements">
         <ul class="footer-elements">
-            <li class="footer-element footer-link" @click="openOutside('https://www.patreon.com/fabio286')">
-               <i class="material-icons md-18 mr-1">favorite</i>
+            <li class="footer-element footer-link" @click="openOutside('https://github.com/sponsors/Fabio286')">
+               <i class="mdi mdi-18px mdi-coffee mr-1" />
               <small>{{ $t('word.donate') }}</small>
            </li>
            <li class="footer-element footer-link" @click="openOutside('https://github.com/EStarium/antares/issues')">
-               <i class="material-icons md-18">bug_report</i>
+               <i class="mdi mdi-18px mdi-bug" />
            </li>
            <li class="footer-element footer-link" @click="showSettingModal('about')">
-               <i class="material-icons md-18">info_outline</i>
+               <i class="mdi mdi-18px mdi-information-outline" />
            </li>
         </ul>
      </div>
@@ -50,41 +50,41 @@ export default {
 </script>

 <style lang="scss">
-   #footer{
-      height: $footer-height;
+  #footer {
+    height: $footer-height;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: $primary-color;
+    padding: 0 0.2rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: 0 0 1px 0 #000;
+
+    .footer-elements {
+      list-style: none;
+      margin: 0;
      display: flex;
-      justify-content: space-between;
      align-items: center;
-      background: $primary-color;
-      padding: 0 .2rem;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      box-shadow: 0 0 1px 0px #000;

-      .footer-elements{
-         list-style: none;
-         margin: 0;
-         display: flex;
-         align-items: center;
+      .footer-element {
+        height: $footer-height;
+        display: flex;
+        align-items: center;
+        padding: 0 0.4rem;
+        margin: 0;

-         .footer-element{
-            height: $footer-height;
-            display: flex;
-            align-items: center;
-            padding: 0 .4rem;
-            margin: 0;
+        &.footer-link {
+          cursor: pointer;
+          transition: background 0.2s;

-            &.footer-link{
-               cursor: pointer;
-               transition: background .2s;
-
-               &:hover{
-                  background: rgba($color: #fff, $alpha: .1);
-               }
-            }
-         }
+          &:hover {
+            background: rgba($color: #fff, $alpha: 0.1);
+          }
+        }
      }
-   }
+    }
+  }
 </style>
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -1,5 +1,9 @@
 <template>
-   <div id="notifications-board">
+   <div
+      id="notifications-board"
+      @mouseenter="clearTimeouts"
+      @mouseleave="rearmTimeouts"
+   >
      <transition-group name="slide-fade">
         <BaseNotification
            v-for="notification in latestNotifications"
@@ -21,27 +25,60 @@ export default {
   components: {
      BaseNotification
   },
+   data () {
+      return {
+         timeouts: {}
+      };
+   },
   computed: {
      ...mapGetters({
-         notifications: 'notifications/getNotifications'
+         notifications: 'notifications/getNotifications',
+         notificationsTimeout: 'settings/getNotificationsTimeout'
      }),
      latestNotifications () {
         return this.notifications.slice(0, 10);
      }
   },
+   watch: {
+      notifications: {
+         deep: true,
+         handler: function (notification) {
+            if (notification.length) {
+               this.timeouts[notification[0].uid] = setTimeout(() => {
+                  this.removeNotification(notification[0].uid);
+                  delete this.timeouts[notification.uid];
+               }, this.notificationsTimeout * 1000);
+            }
+         }
+      }
+   },
   methods: {
      ...mapActions({
         removeNotification: 'notifications/removeNotification'
-      })
+      }),
+      clearTimeouts () {
+         for (const uid in this.timeouts) {
+            clearTimeout(this.timeouts[uid]);
+            delete this.timeouts[uid];
+         }
+      },
+      rearmTimeouts () {
+         for (const notification of this.notifications) {
+            this.timeouts[notification.uid] = setTimeout(() => {
+               this.removeNotification(notification.uid);
+               delete this.timeouts[notification.uid];
+            }, this.notificationsTimeout * 1000);
+         }
+      }
   }
 };
 </script>

 <style lang="scss">
-   #notifications-board{
-      position: absolute;
-      z-index: 9;
-      right: 1rem;
-      bottom: 1rem;
-   }
+  #notifications-board {
+    position: absolute;
+    z-index: 999;
+    right: 1rem;
+    bottom: 1rem;
+  }
 </style>
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -5,7 +5,7 @@
            v-if="isContext"
            :context-event="contextEvent"
            :context-connection="contextConnection"
-            @closeContext="isContext = false"
+            @close-context="isContext = false"
         />
         <ul class="settingbar-elements">
            <draggable v-model="connections">
@@ -28,7 +28,7 @@
               @click="showNewConnModal"
               @mouseover.self="tooltipPosition"
            >
-               <i class="settingbar-element-icon material-icons text-light">add</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
               <span class="ex-tooltip-content">{{ $t('message.addConnection') }}</span>
            </li>
         </ul>
@@ -37,7 +37,7 @@
      <div class="settingbar-bottom-elements">
         <ul class="settingbar-elements">
            <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon material-icons text-light">settings</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
               <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
            </li>
         </ul>
@@ -70,7 +70,8 @@ export default {
         getConnections: 'connections/getConnections',
         getConnectionName: 'connections/getConnectionName',
         connected: 'workspaces/getConnected',
-         selectedWorkspace: 'workspaces/getSelected'
+         selectedWorkspace: 'workspaces/getSelected',
+         updateStatus: 'application/getUpdateStatus'
      }),
      connections: {
         get () {
@@ -79,6 +80,9 @@ export default {
         set (value) {
            this.updateConnections(value);
         }
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
      }
   },
   methods: {
@@ -106,101 +110,104 @@ export default {
 </script>

 <style lang="scss">
-   #settingbar{
-      width: $settingbar-width;
-      height: calc(100vh - #{$excluding-size});
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
+  #settingbar {
+    width: $settingbar-width;
+    height: calc(100vh - #{$excluding-size});
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: $bg-color-light;
+    padding: 0;
+    box-shadow: 0 0 1px 0 #000;
+    z-index: 9;
+
+    .settingbar-top-elements {
+      overflow-x: hidden;
+      overflow-y: overlay;
+      max-height: calc((100vh - 3.5rem) - #{$excluding-size});
+
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+    }
+
+    .settingbar-bottom-elements {
+      padding-top: 0.5rem;
      background: $bg-color-light;
+      z-index: 1;
+    }
+
+    .settingbar-elements {
+      list-style: none;
+      text-align: center;
+      width: $settingbar-width;
      padding: 0;
-      box-shadow: 0 0 1px 0px #000;
-      z-index: 9;
+      margin: 0;

-      .settingbar-top-elements{
-         overflow-x: hidden;
-         overflow-y: overlay;
-         max-height: calc((100vh - 3.5rem) - #{$excluding-size});
+      .settingbar-element {
+        height: $settingbar-width;
+        width: 100%;
+        margin: 0;
+        border-left: 3px solid transparent;
+        opacity: 0.5;
+        transition: opacity 0.2s;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-direction: column;

-         &::-webkit-scrollbar {
-            width: 3px;
-         }
+        &:hover {
+          opacity: 1;
+        }
+
+        &.selected {
+          border-left-color: $body-font-color;
+          opacity: 1;
+        }
+
+        .settingbar-element-icon {
+          &.badge::after {
+            bottom: -10px;
+            right: 0;
+            position: absolute;
+            background: $success-color;
+          }
+
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
+        }
      }
+    }
+  }

-      .settingbar-bottom-elements{
-         padding-top: .5rem;
-         background: $bg-color-light;
-         z-index: 1;
-      }
+  .ex-tooltip {// Because both overflow-x: visible and overflow-y:auto are evil!!!
+    .ex-tooltip-content {
+      z-index: 999;
+      visibility: hidden;
+      opacity: 0;
+      display: block;
+      position: absolute;
+      text-align: center;
+      margin: 0 0 0 calc(#{$settingbar-width} - 5px);
+      left: 0;
+      padding: 0.2rem 0.4rem;
+      font-size: 0.7rem;
+      background: rgba(48, 55, 66, 0.95);
+      border-radius: 0.1rem;
+      color: #fff;
+      max-width: 320px;
+      pointer-events: none;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      transition: opacity 0.2s;
+    }

-      .settingbar-elements{
-         list-style: none;
-         text-align: center;
-         width: $settingbar-width;
-         padding: 0;
-         margin: 0;
-
-         .settingbar-element{
-            height: $settingbar-width;
-            width: 100%;
-            margin: 0;
-            border-left: 3px solid transparent;
-            opacity: .5;
-            transition: opacity .2s;
-            display: flex;
-            align-content: center;
-            justify-content: center;
-            flex-direction: column;
-
-            &:hover{
-               opacity: 1;
-            }
-
-            &.selected{
-               border-left-color: $body-font-color;
-               opacity: 1;
-            }
-
-            .settingbar-element-icon{
-
-               &.badge::after{
-                  bottom: -10px;
-                  right: 0;
-                  position: absolute;
-                  background: $success-color;
-               }
-            }
-         }
-
-      }
-   }
-
-   .ex-tooltip{// Because both overflow-x: visible and overflow-y:auto are evil!!!
-      .ex-tooltip-content{
-         z-index: 999;
-         visibility: hidden;
-         opacity: 0;
-         display:block;
-         position:absolute;
-         background-color:#feffe1;
-         text-align: center;
-         margin:.0 0 0 calc(#{$settingbar-width} - 5px);
-         left: 0;
-         padding: .2rem .4rem;
-         font-size: .7rem;
-         background: rgba(48,55,66,.95);
-         border-radius: .1rem;
-         color: #fff;
-         max-width: 320px;
-         pointer-events: none;
-         text-overflow: ellipsis;
-         transition: opacity .2s;
-      }
-
-      &:hover .ex-tooltip-content{
-         visibility: visible;
-         opacity: 1;
-      }
-   }
+    &:hover .ex-tooltip-content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 </style>
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -4,8 +4,8 @@
      <div class="titlebar-elements">
         <img class="titlebar-logo" :src="require('@/images/logo.svg').default">
      </div>
-      <div class="titlebar-elements">
-         <!--  -->
+      <div class="titlebar-elements titlebar-title">
+         {{ windowTitle }}
      </div>
      <div class="titlebar-elements">
         <div
@@ -13,31 +13,32 @@
            class="titlebar-element"
            @click="openDevTools"
         >
-            <i class="material-icons">code</i>
+            <i class="mdi mdi-24px mdi-code-tags" />
         </div>
         <div
            v-if="isDevelopment"
            class="titlebar-element"
            @click="reload"
         >
-            <i class="material-icons">refresh</i>
+            <i class="mdi mdi-24px mdi-refresh" />
         </div>
         <div class="titlebar-element" @click="minimizeApp">
-            <i class="material-icons">remove</i>
+            <i class="mdi mdi-24px mdi-minus" />
         </div>
         <div class="titlebar-element" @click="toggleFullScreen">
-            <i v-if="isMaximized" class="material-icons">fullscreen_exit</i>
-            <i v-else class="material-icons">fullscreen</i>
+            <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
+            <i v-else class="mdi mdi-24px mdi-fullscreen" />
         </div>
         <div class="titlebar-element close-button" @click="closeApp">
-            <i class="material-icons">close</i>
+            <i class="mdi mdi-24px mdi-close" />
         </div>
      </div>
   </div>
 </template>

 <script>
-import { remote } from 'electron';
+import { remote, ipcRenderer } from 'electron';
+import { mapGetters } from 'vuex';

 export default {
   name: 'TheTitleBar',
@@ -48,6 +49,22 @@ export default {
         isDevelopment: process.env.NODE_ENV === 'development'
      };
   },
+   computed: {
+      ...mapGetters({
+         getConnectionName: 'connections/getConnectionName',
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      windowTitle () {
+         if (!this.selectedWorkspace) return '';
+
+         const connectionName = this.getConnectionName(this.selectedWorkspace);
+         const workspace = this.getWorkspace(this.selectedWorkspace);
+         const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb);
+
+         return [connectionName, ...breadcrumbs].join(' • ');
+      }
+   },
   created () {
      window.addEventListener('resize', this.onResize);
   },
@@ -56,7 +73,7 @@ export default {
   },
   methods: {
      closeApp () {
-         this.w.close();
+         ipcRenderer.send('close-app');
      },
      minimizeApp () {
         this.w.minimize();
@@ -81,55 +98,64 @@ export default {
 </script>

 <style lang="scss">
-   #titlebar{
+  #titlebar {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    background: $bg-color-light;
+    align-items: center;
+    height: $titlebar-height;
+    -webkit-app-region: drag;
+    user-select: none;
+    box-shadow: 0 0 1px 0 #000;
+    z-index: 9999;
+
+    .titlebar-resizer {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 4px;
+      z-index: 999;
+      -webkit-app-region: no-drag;
+    }
+
+    .titlebar-elements {
      display: flex;
-      position: relative;
-      justify-content: space-between;
-      background: $bg-color-light;
      align-items: center;
-      height: $titlebar-height;
-      -webkit-app-region: drag;
-      user-select: none;
-      box-shadow: 0 0 1px 0px #000;
-      z-index: 9999;

-      .titlebar-resizer{
-         position: absolute;
-         top: 0;
-         width: 100%;
-         height: 4px;
-         z-index: 999;
-         -webkit-app-region: no-drag;
+      &.titlebar-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        text-align: center;
+        display: block;
+        pointer-events: none;
      }

-      .titlebar-elements{
-         display: flex;
-         align-items: center;
-
-         .titlebar-logo{
-            height: $titlebar-height;
-            padding: 0 .4rem;
-         }
-
-         .titlebar-element{
-            display: flex;
-            align-items: center;
-            height: $titlebar-height;
-            line-height: 0;
-            padding: 0 .7rem;
-            opacity: .7;
-            transition: opacity .2s;
-            -webkit-app-region: no-drag;
-
-            &:hover{
-               opacity: 1;
-               background: rgba($color: #fff, $alpha: .2);
-            }
-
-            &.close-button:hover{
-               background: red;
-            }
-         }
+      .titlebar-logo {
+        height: $titlebar-height;
+        padding: 0 0.4rem;
      }
-   }
+
+      .titlebar-element {
+        display: flex;
+        align-items: center;
+        height: $titlebar-height;
+        line-height: 0;
+        padding: 0 0.7rem;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        -webkit-app-region: no-drag;
+
+        &:hover {
+          opacity: 1;
+          background: rgba($color: #fff, $alpha: 0.2);
+        }
+
+        &.close-button:hover {
+          background: red;
+        }
+      }
+    }
+  }
 </style>
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -2,37 +2,69 @@
   <div v-show="isSelected" class="workspace column columns col-gapless">
      <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
      <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
-         <ul class="tab tab-block column col-12">
+         <ul ref="tabWrap" class="tab tab-block column col-12">
            <li
               v-if="workspace.breadcrumbs.table"
               class="tab-item"
-               :class="{'active': selectedTab === 1}"
-               @click="selectTab({uid: workspace.uid, tab: 1})"
+               :class="{'active': selectedTab === 'prop'}"
+               @click="selectTab({uid: workspace.uid, tab: 'prop'})"
            >
               <a class="tab-link">
-                  <i class="material-icons md-18 mr-1">grid_on</i>
-                  <span :title="workspace.breadcrumbs.table">{{ workspace.breadcrumbs.table }}</span>
+                  <i class="mdi mdi-18px mdi-tune mr-1" />
+                  <span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
               </a>
            </li>
            <li
-               v-for="(tab, key) of queryTabs"
+               v-if="workspace.breadcrumbs.table"
+               class="tab-item"
+               :class="{'active': selectedTab === 'data'}"
+               @click="selectTab({uid: workspace.uid, tab: 'data'})"
+            >
+               <a class="tab-link">
+                  <i class="mdi mdi-18px mdi-table mr-1" />
+                  <span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
+               </a>
+            </li>
+            <li
+               v-for="tab of queryTabs"
               :key="tab.uid"
               class="tab-item"
               :class="{'active': selectedTab === tab.uid}"
               @click="selectTab({uid: workspace.uid, tab: tab.uid})"
+               @mousedown.middle="closeTab(tab.uid)"
            >
-               <a><span>Query #{{ key+1 }} <span v-if="queryTabs.length > 1" class="btn btn-clear" /></span></a>
+               <a>
+                  <span>
+                     Query #{{ tab.index }}
+                     <span
+                        v-if="queryTabs.length > 1"
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab.uid)"
+                     />
+                  </span>
+               </a>
+            </li>
+            <li class="tab-item">
+               <a
+                  class="tab-add"
+                  :title="$t('message.openNewTab')"
+                  @click="addTab"
+               >
+                  <i class="mdi mdi-24px mdi-plus" />
+               </a>
            </li>
         </ul>
         <WorkspaceTableTab
-            v-show="selectedTab === 1"
+            v-show="selectedTab === 'data'"
            :connection="connection"
            :table="workspace.breadcrumbs.table"
         />
         <WorkspaceQueryTab
            v-for="tab of queryTabs"
-            v-show="selectedTab === tab.uid"
            :key="tab.uid"
+            :tab-uid="tab.uid"
+            :is-selected="selectedTab === tab.uid"
            :connection="connection"
         />
      </div>
@@ -68,7 +100,7 @@ export default {
         return this.selectedWorkspace === this.connection.uid;
      },
      selectedTab () {
-         return this.workspace.selected_tab || this.queryTabs[0].uid;
+         return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) || ['data', 'prop'].includes(this.workspace.selected_tab) ? this.workspace.selected_tab : this.queryTabs[0].uid;
      },
      queryTabs () {
         return this.workspace.tabs.filter(tab => tab.type === 'query');
@@ -80,106 +112,141 @@ export default {
      if (isInitiated)
         this.connectWorkspace(this.connection);
   },
+   mounted () {
+      if (this.$refs.tabWrap) {
+         this.$refs.tabWrap.addEventListener('wheel', e => {
+            if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+            else this.$refs.tabWrap.scrollLeft -= 50;
+         });
+      }
+   },
   methods: {
      ...mapActions({
         addWorkspace: 'workspaces/addWorkspace',
         connectWorkspace: 'workspaces/connectWorkspace',
         removeConnected: 'workspaces/removeConnected',
-         selectTab: 'workspaces/selectTab'
-      })
+         selectTab: 'workspaces/selectTab',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab'
+      }),
+      addTab () {
+         this.newTab(this.connection.uid);
+      },
+      closeTab (tUid) {
+         if (this.queryTabs.length === 1) return;
+         this.removeTab({ uid: this.connection.uid, tab: tUid });
+      }
   }
 };
 </script>

 <style lang="scss">
-.workspace{
-   padding: 0;
-   margin: 0;
+.workspace {
+  padding: 0;
+  margin: 0;

-   .workspace-tabs{
+  .workspace-tabs {
+    overflow: hidden;
+    height: calc(100vh - #{$excluding-size});
+
+    .tab-block {
+      background: $bg-color-light;
+      margin-top: 0;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: nowrap;
      overflow: auto;
-      height: calc(100vh - #{$excluding-size});

-      .tab-block{
-         background: $bg-color-light;
-         margin-top: 0;
-
-         .tab-item{
-            max-width: 12rem;
-            width: fit-content;
-            flex: initial;
-
-            &.active a{
-               opacity: 1;
-            }
-
-            > a{
-               padding: .2rem .8rem;
-               color: $body-font-color;
-               cursor: pointer;
-               display: flex;
-               align-items: center;
-               opacity: .7;
-               transition: opacity .2s;
-
-               &:hover{
-                  opacity: 1;
-               }
-
-               > span {
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-               }
-            }
-         }
+      &::-webkit-scrollbar {
+        width: 2px;
+        height: 2px;
      }
-   }

-   .workspace-query-results{
-      overflow: auto;
-      white-space: nowrap;
+      .tab-item {
+        max-width: 12rem;
+        width: fit-content;
+        flex: initial;

-      .table{
-         width: auto;
-         border-collapse: separate;
+        > a {
+          padding: 0.2rem 0.8rem;
+          color: $body-font-color;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          opacity: 0.7;
+          transition: opacity 0.2s;

-         .th{
-            position: sticky;
-            top: 0;
-            background: $bg-color;
-            border: 1px solid;
-            border-left: none;
-            border-bottom-width: 2px;
-            border-color: $bg-color-light;
-            padding: 0;
-            font-weight: 700;
-            font-size: .7rem;
+          &:hover {
+            opacity: 1;
+          }

-            > div {
-               padding: .1rem .4rem;
-               min-width: -webkit-fill-available;
-            }
-         }
+          &.tab-add {
+            padding: 0.2rem 0.4rem;
+            margin-top: 2px;
+            border: 0;
+          }

-         .td{
-            border-right: 1px solid;
-            border-bottom: 1px solid;
-            border-color: $bg-color-light;
-            padding: 0 .4rem;
-            text-overflow: ellipsis;
-            max-width: 200px;
-            white-space: nowrap;
+          > span {
            overflow: hidden;
-            font-size: .7rem;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            padding: 0 0.2rem;
+          }
+        }

-            &:focus{
-               box-shadow:inset 0px 0px 0px 1px $body-font-color;
-               background: rgba($color: #000000, $alpha: .3);
-               outline: none;
-            }
-         }
+        &.active a {
+          opacity: 1;
+        }
      }
-   }
+    }
+  }
+
+  .workspace-query-results {
+    overflow: auto;
+    white-space: nowrap;
+
+    .table {
+      width: auto;
+      border-collapse: separate;
+
+      .th {
+        position: sticky;
+        top: 0;
+        background: $bg-color;
+        border: 1px solid;
+        border-left: none;
+        border-bottom-width: 2px;
+        border-color: $bg-color-light;
+        padding: 0;
+        font-weight: 700;
+        font-size: 0.7rem;
+        z-index: 1;
+
+        > div {
+          padding: 0.1rem 0.4rem;
+          min-width: -webkit-fill-available;
+        }
+      }
+
+      .td {
+        border-right: 1px solid;
+        border-bottom: 1px solid;
+        border-color: $bg-color-light;
+        padding: 0 0.4rem;
+        text-overflow: ellipsis;
+        max-width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 0.7rem;
+        position: relative;
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $body-font-color;
+          background: rgba($color: #000, $alpha: 0.3);
+          outline: none;
+        }
+      }
+    }
+  }
 }
 </style>
--- a/src/renderer/components/WorkspaceConnectPanel.vue
+++ b/src/renderer/components/WorkspaceConnectPanel.vue
@@ -2,7 +2,7 @@
   <div class="columns">
      <div class="column col-12 empty text-light">
         <div class="empty-icon">
-            <i class="material-icons md-48">cloud_off</i>
+            <i class="mdi mdi-48px mdi-power-plug-off" />
         </div>
         <p class="empty-title h5">
            {{ $t('word.disconnected') }}
@@ -19,7 +19,7 @@
      </div>
      <ModalAskCredentials
         v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
         @credentials="continueTest"
      />
   </div>
@@ -72,11 +72,11 @@ export default {
 </script>

 <style scoped>
-   .empty{
-      height: 100%;
-      border-radius: 0;
-      background: transparent;
-      display: flex;
-      flex-direction: column;
-   }
+  .empty {
+    height: 100%;
+    border-radius: 0;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+  }
 </style>
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -10,16 +10,16 @@
            <span class="workspace-explorebar-title">{{ connectionName }}</span>
            <span v-if="workspace.connected" class="workspace-explorebar-tools">
               <i
-                  class="material-icons md-18 c-hand"
+                  class="mdi mdi-18px mdi-refresh c-hand"
                  :class="{'rotate':isRefreshing}"
                  :title="$t('word.refresh')"
                  @click="refresh"
-               >refresh</i>
+               />
               <i
-                  class="material-icons md-18 c-hand mr-1 ml-2"
+                  class="mdi mdi-18px mdi-power-plug-off c-hand mr-1 ml-2"
                  :title="$t('word.disconnect')"
                  @click="disconnectWorkspace(connection.uid)"
-               >exit_to_app</i>
+               />
            </span>
         </div>
         <WorkspaceConnectPanel
@@ -123,70 +123,70 @@ export default {
 </script>

 <style lang="scss">
-   .workspace-explorebar-resizer{
-      position: absolute;
-      width: 4px;
-      right: -2px;
-      top: 0;
-      height: calc(100vh - #{$excluding-size});
-      cursor: ew-resize;
-      z-index: 99;
-   }
+  .workspace-explorebar-resizer {
+    position: absolute;
+    width: 4px;
+    right: -2px;
+    top: 0;
+    height: calc(100vh - #{$excluding-size});
+    cursor: ew-resize;
+    z-index: 99;
+  }

-   .workspace-explorebar{
-      width: $explorebar-width;
+  .workspace-explorebar {
+    width: $explorebar-width;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: left;
+    background: $bg-color-gray;
+    box-shadow: 0 0 1px 0 #000;
+    z-index: 8;
+    flex: initial;
+    position: relative;
+    padding: 0;
+
+    .workspace-explorebar-header {
+      width: 100%;
+      padding: 0.3rem;
      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-      text-align: left;
-      background: $bg-color-gray;
-      box-shadow: 0 0 1px 0px #000;
-      z-index: 8;
-      flex: initial;
-      position: relative;
-      padding: 0;
+      justify-content: space-between;
+      font-size: 0.6rem;
+      font-weight: 700;
+      text-transform: uppercase;

-      .workspace-explorebar-header{
-         width: 100%;
-         padding: .3rem;
-         display: flex;
-         justify-content: space-between;
-         font-size: .6rem;
-         font-weight: 700;
-         text-transform: uppercase;
-
-         .workspace-explorebar-title{
-            width: 80%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: block;
-            align-items: center;
-         }
-
-         .workspace-explorebar-tools {
-               display: flex;
-               align-items: center;
-
-               > i{
-                  opacity: .6;
-                  transition: opacity .2s;
-                  display: flex;
-                  align-items: center;
-
-               &:hover{
-                  opacity: 1;
-               }
-            }
-         }
+      .workspace-explorebar-title {
+        width: 80%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        align-items: center;
      }

-      .workspace-explorebar-body{
-         width: 100%;
-         height: calc((100vh - 30px) - #{$excluding-size});
-         overflow: overlay;
-         padding: 0 .1rem;
+      .workspace-explorebar-tools {
+        display: flex;
+        align-items: center;
+
+        > i {
+          opacity: 0.6;
+          transition: opacity 0.2s;
+          display: flex;
+          align-items: center;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
      }
-   }
+    }
+
+    .workspace-explorebar-body {
+      width: 100%;
+      height: calc((100vh - 30px) - #{$excluding-size});
+      overflow: overlay;
+      padding: 0 0.1rem;
+    }
+  }
 </style>
--- a/src/renderer/components/WorkspaceExploreBarDatabase.vue
+++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue
@@ -5,8 +5,8 @@
         :class="{'text-bold': breadcrumbs.schema === database.name}"
         @click="changeBreadcrumbs({schema: database.name, table:null})"
      >
-         <i class="icon material-icons md-18 mr-1">navigate_next</i>
-         <i class="material-icons md-18 mr-1">view_agenda</i>
+         <i class="icon mdi mdi-18px mdi-chevron-right" />
+         <i class="database-icon mdi mdi-18px mdi-database mr-1" />
         <span>{{ database.name }}</span>
      </summary>
      <div class="accordion-body">
@@ -20,7 +20,7 @@
                  @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
               >
                  <a class="table-name">
-                     <i class="material-icons md-18 mr-1">grid_on</i>
+                     <i class="table-icon mdi mdi-18px mdi-table mr-1" />
                     <span>{{ table.TABLE_NAME }}</span>
                  </a>
               </li>
@@ -56,35 +56,40 @@ export default {
 </script>

 <style lang="scss">
-   .workspace-explorebar-database{
-      .database-name,
-      a.table-name{
-         display: flex;
-         align-items: center;
-         padding: .1rem;
-         cursor: pointer;
-         font-size: .7rem;
+  .workspace-explorebar-database {
+    .database-name,
+    a.table-name {
+      display: flex;
+      align-items: center;
+      padding: 0.1rem;
+      cursor: pointer;
+      font-size: 0.7rem;

-         > span{
-            overflow: hidden;
-            white-space: nowrap;
-            display: block;
-            text-overflow: ellipsis;
-         }
-
-         &:hover{
-            color: $body-font-color;
-            background: rgba($color: #FFF, $alpha: .05);
-            border-radius: 2px;
-         }
+      > span {
+        overflow: hidden;
+        white-space: nowrap;
+        display: block;
+        text-overflow: ellipsis;
      }

-      .menu-item{
-         line-height: 1.2;
+      &:hover {
+        color: $body-font-color;
+        background: rgba($color: #fff, $alpha: 0.05);
+        border-radius: 2px;
      }

-      .database-tables{
-         margin-left: 1.2rem;
+      .database-icon,
+      .table-icon {
+        opacity: 0.7;
      }
-   }
+    }
+
+    .menu-item {
+      line-height: 1.2;
+    }
+
+    .database-tables {
+      margin-left: 1.2rem;
+    }
+  }
 </style>
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -1,27 +1,26 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
      <div class="workspace-query-runner column col-12">
-         <QueryEditor v-model="query" />
+         <QueryEditor v-if="isSelected" :value.sync="query" />
         <div class="workspace-query-runner-footer">
            <div class="workspace-query-buttons">
               <button
                  class="btn btn-link btn-sm"
                  :class="{'loading':isQuering}"
                  :disabled="!query"
-                  @click="runQuery"
+                  @click="runQuery(query)"
               >
                  <span>{{ $t('word.run') }}</span>
-                  <i class="material-icons text-success">play_arrow</i>
+                  <i class="mdi mdi-24px mdi-play text-success" />
               </button>
-               <!-- <button class="btn btn-link btn-sm">
-                  <span>{{ $t('word.save') }}</span>
-                  <i class="material-icons ml-1">save</i>
-               </button> -->
            </div>
            <div class="workspace-query-info">
               <div v-if="results.rows">
                  {{ $t('word.results') }}: <b>{{ results.rows.length }}</b>
               </div>
+               <div v-if="results.report">
+                  {{ $t('message.affectedRows') }}: <b>{{ results.report.affectedRows }}</b>
+               </div>
               <div v-if="workspace.breadcrumbs.schema">
                  {{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b>
               </div>
@@ -31,11 +30,12 @@
      <div class="workspace-query-results column col-12">
         <WorkspaceQueryTable
            v-if="results"
+            v-show="!isQuering"
            ref="queryTable"
            :results="results"
-            :fields="resultsFields"
-            @updateField="updateField"
-            @deleteSelected="deleteSelected"
+            :tab-uid="tabUid"
+            @update-field="updateField"
+            @delete-selected="deleteSelected"
         />
      </div>
   </div>
@@ -57,14 +57,17 @@ export default {
   },
   mixins: [tableTabs],
   props: {
-      connection: Object
+      connection: Object,
+      tabUid: String,
+      isSelected: Boolean
   },
   data () {
      return {
         query: '',
+         lastQuery: '',
         isQuering: false,
         results: {},
-         fields: []
+         selectedFields: []
      };
   },
   computed: {
@@ -74,67 +77,87 @@ export default {
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
-      resultsFields () {
-         if (this.results) {
-            return this.fields.map(field => { // TODO: move to main process
-               return {
-                  name: field.COLUMN_NAME,
-                  key: field.COLUMN_KEY.toLowerCase(),
-                  type: field.DATA_TYPE,
-                  precision: field.DATETIME_PRECISION
-               };
-            }).filter(field => {
-               if (this.results.fields) {
-                  const queryFields = this.results.fields.map(field => field.name);
-                  if (queryFields.includes(field.name)) return field;
-               }
-            });
-         }
-         else
-            return [];
-      },
      table () {
-         if (this.results.fields.length)
+         if ('fields' in this.results && this.results.fields.length)
            return this.results.fields[0].orgTable;
         return '';
+      },
+      schema () {
+         if ('fields' in this.results && this.results.fields.length)
+            return this.results.fields[0].db;
+         return this.workspace.breadcrumbs.schema;
      }
   },
   methods: {
      ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         setTabFields: 'workspaces/setTabFields',
+         setTabKeyUsage: 'workspaces/setTabKeyUsage'
      }),
-      async runQuery () {
-         if (!this.query) return;
+      async runQuery (query) {
+         if (!query) return;
         this.isQuering = true;
-         this.results = {};
+         this.clearTabData();

-         try {
+         try { // Query Data
            const params = {
               uid: this.connection.uid,
-               query: this.query,
-               schema: this.workspace.breadcrumbs.schema
+               schema: this.schema,
+               query
            };

            const { status, response } = await Connection.rawQuery(params);
-            if (status === 'success')
+            if (status === 'success') {
               this.results = response;
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+               if (response.rows) { // if is a select
+                  this.selectedFields = response.fields.map(field => field.orgName);

-         try {
-            const params = {
-               uid: this.connection.uid,
-               schema: this.workspace.breadcrumbs.schema,
-               table: this.table
-            };
+                  try { // Table data
+                     const params = {
+                        uid: this.connection.uid,
+                        schema: this.schema,
+                        table: this.table
+                     };

-            const { status, response } = await Tables.getTableColumns(params);
-            if (status === 'success')
-               this.fields = response.rows;
+                     const { status, response } = await Tables.getTableColumns(params);
+
+                     if (status === 'success') {
+                        let fields = response.filter(field => this.selectedFields.includes(field.name));
+                        if (this.selectedFields.length) {
+                           fields = fields.map((field, index) => {
+                              return { ...field, alias: this.results.fields[index].name };
+                           });
+                        }
+
+                        this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields });
+                     }
+                     else
+                        this.addNotification({ status: 'error', message: response });
+                  }
+                  catch (err) {
+                     this.addNotification({ status: 'error', message: err.stack });
+                  }
+
+                  try { // Key usage (foreign keys)
+                     const params = {
+                        uid: this.connection.uid,
+                        schema: this.schema,
+                        table: this.table
+                     };
+
+                     const { status, response } = await Tables.getKeyUsage(params);
+                     if (status === 'success')
+                        this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: response });
+                     else
+                        this.addNotification({ status: 'error', message: response });
+                  }
+                  catch (err) {
+                     this.addNotification({ status: 'error', message: err.stack });
+                  }
+               }
+               else { // if is a query without results
+               }
+            }
            else
               this.addNotification({ status: 'error', message: response });
         }
@@ -143,43 +166,50 @@ export default {
         }

         this.isQuering = false;
+         this.lastQuery = query;
+      },
+      reloadTable () {
+         this.runQuery(this.lastQuery);
+      },
+      clearTabData () {
+         this.results = {};
+         this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
      }
   }
 };
 </script>

 <style lang="scss">
-.workspace-tabs{
-   align-content: baseline;
+.workspace-tabs {
+  align-content: baseline;

-   .workspace-query-runner{
+  .workspace-query-runner {
+    .workspace-query-runner-footer {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.3rem 0.6rem 0.4rem;
+      align-items: center;

-      .workspace-query-runner-footer{
-         display: flex;
-         justify-content: space-between;
-         padding: .3rem .6rem .4rem;
-         align-items: center;
+      .workspace-query-buttons {
+        display: flex;

-         .workspace-query-buttons{
-            display: flex;
-
-            .btn{
-               display: flex;
-               align-self: center;
-               color: $body-font-color;
-               margin-right: .4rem;
-            }
-         }
-
-         .workspace-query-info{
-            display: flex;
-
-            > div + div{
-               padding-left: .6rem;
-            }
-         }
+        .btn {
+          display: flex;
+          align-self: center;
+          color: $body-font-color;
+          margin-right: 0.4rem;
+        }
      }
-   }
+
+      .workspace-query-info {
+        display: flex;
+
+        > div + div {
+          padding-left: 0.6rem;
+        }
+      }
+    }
+  }
 }

 </style>
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -1,87 +1,88 @@
 <template>
-   <div>
+   <div
+      ref="tableWrapper"
+      class="vscroll"
+      :style="{'height': resultsSize+'px'}"
+   >
      <TableContext
         v-if="isContext"
         :context-event="contextEvent"
         :selected-rows="selectedRows"
-         @deleteSelected="deleteSelected"
-         @closeContext="isContext = false"
+         @delete-selected="deleteSelected"
+         @close-context="isContext = false"
      />
-      <BaseVirtualScroll
-         v-if="results.rows"
-         ref="resultTable"
-         :items="sortedResults"
-         :item-height="25"
-         class="vscroll"
-         :style="{'height': resultsSize+'px'}"
-      >
-         <template slot-scope="{ items }">
-            <div class="table table-hover">
-               <div class="thead">
-                  <div class="tr">
-                     <div
-                        v-for="field in fields"
-                        :key="field.name"
-                        class="th c-hand"
-                     >
-                        <div ref="columnResize" class="column-resizable">
-                           <div class="table-column-title" @click="sort(field.name)">
-                              <i
-                                 v-if="field.key"
-                                 class="material-icons column-key c-help"
-                                 :class="`key-${field.key}`"
-                                 :title="keyName(field.key)"
-                              >vpn_key</i>
-                              <span>{{ field.name }}</span>
-                              <i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
-                           </div>
-                        </div>
+      <div ref="table" class="table table-hover">
+         <div class="thead">
+            <div class="tr">
+               <div
+                  v-for="field in fields"
+                  :key="field.name"
+                  class="th c-hand"
+               >
+                  <div ref="columnResize" class="column-resizable">
+                     <div class="table-column-title" @click="sort(field.name)">
+                        <i
+                           v-if="field.key"
+                           class="mdi mdi-key column-key c-help"
+                           :class="`key-${field.key}`"
+                           :title="keyName(field.key)"
+                        />
+                        <span>{{ field.alias || field.name }}</span>
+                        <i
+                           v-if="currentSort === field.name"
+                           class="mdi sort-icon"
+                           :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                        />
                     </div>
                  </div>
               </div>
-               <div class="tbody">
-                  <div
-                     v-for="row in items"
-                     :key="row._id"
-                     class="tr"
-                     :class="{'selected': selectedRows.includes(row._id)}"
-                     @click="selectRow($event, row._id)"
-                  >
-                     <WorkspaceQueryTableCell
-                        v-for="(col, cKey) in row"
-                        :key="cKey"
-                        :content="col"
-                        :field="cKey"
-                        :precision="fieldPrecision(cKey)"
-                        :type="fieldType(cKey)"
-                        @updateField="updateField($event, row[primaryField.name])"
-                        @contextmenu="contextMenu($event, {id: row._id, field: cKey})"
-                     />
-                  </div>
-               </div>
            </div>
-         </template>
-      </BaseVirtualScroll>
+         </div>
+         <BaseVirtualScroll
+            v-if="results.rows"
+            ref="resultTable"
+            :items="sortedResults"
+            :item-height="22"
+            class="tbody"
+            :visible-height="resultsSize"
+            :scroll-element="scrollElement"
+         >
+            <template slot-scope="{ items }">
+               <WorkspaceQueryTableRow
+                  v-for="row in items"
+                  :key="row._id"
+                  :row="row"
+                  :fields="fields"
+                  :key-usage="keyUsage"
+                  class="tr"
+                  :class="{'selected': selectedRows.includes(row._id)}"
+                  @select-row="selectRow($event, row._id)"
+                  @update-field="updateField($event, row[primaryField.alias || primaryField.name])"
+                  @contextmenu="contextMenu"
+               />
+            </template>
+         </basevirtualscroll>
+      </div>
   </div>
 </template>

 <script>
-import { uidGen } from 'common/libs/utilities';
+import { uidGen } from 'common/libs/uidGen';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
-import WorkspaceQueryTableCell from '@/components/WorkspaceQueryTableCell';
+import WorkspaceQueryTableRow from '@/components/WorkspaceQueryTableRow';
 import TableContext from '@/components/WorkspaceQueryTableContext';
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';

 export default {
   name: 'WorkspaceQueryTable',
   components: {
      BaseVirtualScroll,
-      WorkspaceQueryTableCell,
+      WorkspaceQueryTableRow,
      TableContext
   },
   props: {
      results: Object,
-      fields: Array
+      tabUid: [String, Number]
   },
   data () {
      return {
@@ -96,8 +97,11 @@ export default {
      };
   },
   computed: {
+      ...mapGetters({
+         getWorkspaceTab: 'workspaces/getWorkspaceTab'
+      }),
      primaryField () {
-         return this.fields.filter(field => field.key === 'pri')[0] || false;
+         return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
      },
      sortedResults () {
         if (this.currentSort) {
@@ -113,6 +117,15 @@ export default {
         }
         else
            return this.localResults;
+      },
+      fields () {
+         return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).fields : [];
+      },
+      keyUsage () {
+         return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).keyUsage : [];
+      },
+      scrollElement () {
+         return this.$refs.tableWrapper;
      }
   },
   watch: {
@@ -124,7 +137,7 @@ export default {
      }
   },
   updated () {
-      if (this.$refs.resultTable)
+      if (this.$refs.table)
         this.refreshScroller();
   },
   mounted () {
@@ -149,7 +162,7 @@ export default {
         let length = 0;
         const field = this.fields.filter(field => field.name === cKey)[0];
         if (field)
-            length = field.precision;
+            length = field.datePrecision;

         return length;
      },
@@ -167,10 +180,10 @@ export default {
      },
      resizeResults () {
         if (this.$refs.resultTable) {
-            const el = this.$refs.resultTable.$el;
-            const footer = document.getElementById('footer');
+            const el = this.$refs.tableWrapper;

            if (el) {
+               const footer = document.getElementById('footer');
               const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
               this.resultsSize = size;
            }
@@ -189,7 +202,7 @@ export default {
               id,
               ...payload
            };
-            this.$emit('updateField', params);
+            this.$emit('update-field', params);
         }
      },
      deleteSelected () {
@@ -201,7 +214,7 @@ export default {
               primary: this.primaryField.name,
               rows: rowIDs
            };
-            this.$emit('deleteSelected', params);
+            this.$emit('delete-selected', params);
         }
      },
      applyUpdate (params) {
@@ -269,46 +282,27 @@ export default {

 <style lang="scss">
 .vscroll {
-   height: 1000px;
-   overflow: auto;
-   overflow-anchor: none;
+  height: 1000px;
+  overflow: auto;
+  overflow-anchor: none;
 }

-.column-resizable{
-   &:hover,
-   &:active{
-      resize: horizontal;
-      overflow: hidden;
-   }
+.column-resizable {
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
 }

-.table-column-title{
-   display: flex;
-   align-items: center;
+.table-column-title {
+  display: flex;
+  align-items: center;
 }

-.sort-icon{
-   font-size: .7rem;
-   line-height: 1;
-   margin-left: .2rem;
-}
-
-.column-key{
-   transform: rotate(90deg);
-   font-size: .7rem;
-   line-height: 1.5;
-   margin-right: .2rem;
-
-   &.key-pri{
-      color: goldenrod;
-   }
-
-   &.key-uni{
-      color: deepskyblue;
-   }
-
-   &.key-mul{
-      color: palegreen;
-   }
+.sort-icon {
+  font-size: 0.7rem;
+  line-height: 1;
+  margin-left: 0.2rem;
 }
 </style>
--- a/src/renderer/components/WorkspaceQueryTableCell.vue
+++ b/src/renderer/components/WorkspaceQueryTableCell.vue
@@ -1,179 +0,0 @@
-<template>
-   <div
-      v-if="field !== '_id'"
-      ref="cell"
-      class="td"
-      :class="`type-${type} p-0`"
-      tabindex="0"
-      @contextmenu.prevent="$emit('contextmenu', $event)"
-   >
-      <span
-         v-if="!isEditing"
-         class="cell-content px-2"
-         :class="isNull(content)"
-         @dblclick="editON"
-      >{{ content | typeFormat(type, precision) | cutText }}</span>
-      <template v-else>
-         <input
-            v-if="inputProps.mask"
-            ref="editField"
-            v-model="localContent"
-            v-mask="inputProps.mask"
-            :type="inputProps.type"
-            autofocus
-            class="editable-field px-2"
-            @blur="editOFF"
-         >
-         <input
-            v-else
-            ref="editField"
-            v-model="localContent"
-            :type="inputProps.type"
-            autofocus
-            class="editable-field px-2"
-            @blur="editOFF"
-         >
-      </template>
-   </div>
-</template>
-
-<script>
-import moment from 'moment';
-import { mimeFromHex, formatBytes } from 'common/libs/utilities';
-import hexToBinary from 'common/libs/hexToBinary';
-import { mask } from 'vue-the-mask';
-
-export default {
-   name: 'WorkspaceQueryTableCell',
-   filters: {
-      cutText (val) {
-         if (typeof val !== 'string') return val;
-         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
-      },
-      typeFormat (val, type, precision) {
-         if (!val) return val;
-
-         switch (type) {
-            case 'char':
-            case 'varchar':
-            case 'text':
-            case 'mediumtext':
-               return val;
-            case 'date': {
-               return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
-            }
-            case 'datetime':
-            case 'timestamp': {
-               let datePrecision = '';
-               for (let i = 0; i < precision; i++)
-                  datePrecision += i === 0 ? '.S' : 'S';
-
-               return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
-            }
-            case 'blob':
-            case 'mediumblob':
-            case 'longblob': {
-               const buff = Buffer.from(val);
-               if (!buff.length) return '';
-
-               const hex = buff.toString('hex').substring(0, 8).toUpperCase();
-               return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
-            }
-            case 'bit': {
-               const hex = Buffer.from(val).toString('hex');
-               return hexToBinary(hex);
-            }
-            default:
-               return val;
-         }
-      }
-   },
-   directives: {
-      mask
-   },
-   props: {
-      type: String,
-      field: String,
-      precision: [Number, null],
-      content: [String, Number, Object, Date, Uint8Array]
-   },
-   data () {
-      return {
-         isEditing: false,
-         localContent: ''
-      };
-   },
-   computed: {
-      inputProps () {
-         switch (this.type) {
-            case 'char':
-            case 'varchar':
-            case 'text':
-            case 'mediumtext':
-               return { type: 'text', mask: false };
-            case 'int':
-            case 'tinyint':
-            case 'smallint':
-            case 'mediumint':
-               return { type: 'number', mask: false };
-            case 'date':
-               return { type: 'text', mask: '####-##-##' };
-            case 'datetime':
-            case 'timestamp': {
-               let datetimeMask = '####-##-## ##:##:##';
-               for (let i = 0; i < this.precision; i++)
-                  datetimeMask += i === 0 ? '.#' : '#';
-               return { type: 'text', mask: datetimeMask };
-            }
-            case 'blob':
-            case 'mediumblob':
-            case 'longblob':
-            case 'bit':
-               return { type: 'file', mask: false };
-            default:
-               return 'hidden';
-         }
-      }
-   },
-   methods: {
-      isNull (value) {
-         return value === null ? ' is-null' : '';
-      },
-      editON () {
-         if (['file'].includes(this.inputProps.type)) return;// TODO: remove temporary file block
-
-         this.$nextTick(() => {
-            this.$refs.cell.blur();
-
-            this.$nextTick(() => this.$refs.editField.focus());
-         });
-         this.localContent = this.$options.filters.typeFormat(this.content, this.type);
-         this.isEditing = true;
-      },
-      editOFF () {
-         this.isEditing = false;
-         if (this.localContent === this.$options.filters.typeFormat(this.content, this.type)) return;
-
-         const { field, type, localContent: content } = this;
-         this.$emit('updateField', { field, type, content });
-      }
-   }
-};
-</script>
-
-<style lang="scss">
-.editable-field{
-   margin: 0;
-   border: none;
-   line-height: 1;
-   width: 100%;
-}
-
-.cell-content{
-   display: block;
-   min-height: .8rem;
-   text-overflow: ellipsis;
-   white-space: nowrap;
-   overflow: hidden;
-}
-</style>
--- a/src/renderer/components/WorkspaceQueryTableContext.vue
+++ b/src/renderer/components/WorkspaceQueryTableContext.vue
@@ -1,19 +1,21 @@
 <template>
   <BaseContextMenu
      :context-event="contextEvent"
-      @closeContext="closeContext"
+      @close-context="closeContext"
   >
      <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $tc('message.deleteRows', selectedRows.length) }}
+         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
      </div>

      <ConfirmModal
         v-if="isConfirmModal"
-         @confirm="deleteRows()"
+         @confirm="deleteRows"
         @hide="hideConfirmModal"
      >
         <template :slot="'header'">
-            {{ $tc('message.deleteRows', selectedRows.length) }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+            </div>
         </template>
         <div :slot="'body'">
            <div class="mb-2">
@@ -58,16 +60,12 @@ export default {
         this.isConfirmModal = false;
      },
      closeContext () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
      },
      deleteRows () {
-         this.$emit('deleteSelected');
+         this.$emit('delete-selected');
         this.closeContext();
      }
   }
 };
 </script>
-
-<style>
-
-</style>
--- a/src/renderer/components/WorkspaceQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceQueryTableRow.vue
@@ -0,0 +1,442 @@
+<template>
+   <div class="tr" @click="selectRow($event, row._id)">
+      <div
+         v-for="(col, cKey) in row"
+         v-show="cKey !== '_id'"
+         :key="cKey"
+         class="td p-0"
+         tabindex="0"
+         @contextmenu.prevent="$emit('contextmenu', $event, {id: row._id, field: cKey})"
+      >
+         <template v-if="cKey !== '_id'">
+            <span
+               v-if="!isInlineEditor[cKey]"
+               class="cell-content px-2"
+               :class="`${isNull(col)} type-${getFieldType(cKey)}`"
+               @dblclick="editON($event, col, cKey)"
+            >{{ col | typeFormat(getFieldType(cKey), getFieldPrecision(cKey)) | cutText }}</span>
+            <ForeignKeySelect
+               v-else-if="foreignKeys.includes(cKey)"
+               class="editable-field"
+               :value.sync="editingContent"
+               :key-usage="getKeyUsage(cKey)"
+               @blur="editOFF"
+            />
+            <template v-else>
+               <input
+                  v-if="inputProps.mask"
+                  ref="editField"
+                  v-model="editingContent"
+                  v-mask="inputProps.mask"
+                  :type="inputProps.type"
+                  autofocus
+                  class="editable-field px-2"
+                  @blur="editOFF"
+               >
+               <input
+                  v-else
+                  ref="editField"
+                  v-model="editingContent"
+                  :type="inputProps.type"
+                  autofocus
+                  class="editable-field px-2"
+                  @blur="editOFF"
+               >
+            </template>
+         </template>
+      </div>
+      <ConfirmModal
+         v-if="isTextareaEditor"
+         :confirm-text="$t('word.update')"
+         size="medium"
+         @confirm="editOFF"
+         @hide="hideEditorModal"
+      >
+         <template :slot="'header'">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+            </div>
+         </template>
+         <div :slot="'body'">
+            <div class="mb-2">
+               <div>
+                  <textarea
+                     v-model="editingContent"
+                     class="form-input textarea-editor"
+                  />
+               </div>
+               <div class="editor-field-info">
+                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent.length }}</div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+               </div>
+            </div>
+         </div>
+      </ConfirmModal>
+      <ConfirmModal
+         v-if="isBlobEditor"
+         :confirm-text="$t('word.update')"
+         @confirm="editOFF"
+         @hide="hideEditorModal"
+      >
+         <template :slot="'header'">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+            </div>
+         </template>
+         <div :slot="'body'">
+            <div class="mb-2">
+               <transition name="jump-down">
+                  <div v-if="contentInfo.size">
+                     <img
+                        v-if="isImage"
+                        :src="`data:${contentInfo.mime};base64, ${bufferToBase64(editingContent)}`"
+                        class="img-responsive p-centered bg-checkered"
+                     >
+                     <div v-else class="text-center">
+                        <i class="mdi mdi-36px mdi-file" />
+                     </div>
+                     <div class="editor-buttons mt-2">
+                        <button class="btn btn-link btn-sm" @click="downloadFile">
+                           <span>{{ $t('word.download') }}</span>
+                           <i class="mdi mdi-24px mdi-download ml-1" />
+                        </button>
+                        <button class="btn btn-link btn-sm" @click="prepareToDelete">
+                           <span>{{ $t('word.delete') }}</span>
+                           <i class="mdi mdi-24px mdi-delete-forever ml-1" />
+                        </button>
+                     </div>
+                  </div>
+               </transition>
+               <div class="editor-field-info">
+                  <div>
+                     <b>{{ $t('word.size') }}</b>: {{ editingContent.length | formatBytes }}<br>
+                     <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
+                  </div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+               </div>
+               <div class="mt-3">
+                  <label>{{ $t('message.uploadFile') }}</label>
+                  <input
+                     class="form-input"
+                     type="file"
+                     @change="filesChange($event)"
+                  >
+               </div>
+            </div>
+         </div>
+      </ConfirmModal>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mimeFromHex } from 'common/libs/mimeFromHex';
+import { formatBytes } from 'common/libs/formatBytes';
+import { bufferToBase64 } from 'common/libs/bufferToBase64';
+import hexToBinary from 'common/libs/hexToBinary';
+import { TEXT, LONG_TEXT, NUMBER, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { mask } from 'vue-the-mask';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
+
+export default {
+   name: 'WorkspaceQueryTableRow',
+   components: {
+      ConfirmModal,
+      ForeignKeySelect
+   },
+   directives: {
+      mask
+   },
+   filters: {
+      formatBytes,
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
+      },
+      typeFormat (val, type, precision) {
+         if (!val) return val;
+
+         if (DATE.includes(type))
+            return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
+
+         if (DATETIME.includes(type)) {
+            let datePrecision = '';
+            for (let i = 0; i < precision; i++)
+               datePrecision += i === 0 ? '.S' : 'S';
+
+            return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
+         }
+
+         if (BLOB.includes(type)) {
+            const buff = Buffer.from(val);
+            if (!buff.length) return '';
+
+            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+            return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
+         }
+
+         if (BIT.includes(type)) {
+            const hex = Buffer.from(val).toString('hex');
+            return hexToBinary(hex);
+         }
+
+         return val;
+      }
+   },
+   props: {
+      row: Object,
+      fields: Array,
+      keyUsage: Array
+   },
+   data () {
+      return {
+         isInlineEditor: {},
+         isTextareaEditor: false,
+         isBlobEditor: false,
+         willBeDeleted: false,
+         originalContent: null,
+         editingContent: null,
+         editingType: null,
+         editingField: null,
+         contentInfo: {
+            ext: '',
+            mime: '',
+            size: null
+         },
+         fileToUpload: null
+      };
+   },
+   computed: {
+      inputProps () {
+         if ([...TEXT, ...LONG_TEXT].includes(this.editingType))
+            return { type: 'text', mask: false };
+
+         if (NUMBER.includes(this.editingType))
+            return { type: 'number', mask: false };
+
+         if (TIME.includes(this.editingType)) {
+            let timeMask = '##:##:##';
+            const precision = this.getFieldPrecision(this.editingField);
+
+            for (let i = 0; i < precision; i++)
+               timeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: timeMask };
+         }
+
+         if (DATE.includes(this.editingType))
+            return { type: 'text', mask: '####-##-##' };
+
+         if (DATETIME.includes(this.editingType)) {
+            let datetimeMask = '####-##-## ##:##:##';
+            const precision = this.getFieldPrecision(this.editingField);
+
+            for (let i = 0; i < precision; i++)
+               datetimeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: datetimeMask };
+         }
+
+         if (BLOB.includes(this.editingType))
+            return { type: 'file', mask: false };
+
+         if (BIT.includes(this.editingType))
+            return { type: 'text', mask: false };
+
+         return { type: 'text', mask: false };
+      },
+      isImage () {
+         return ['gif', 'jpg', 'png', 'bmp', 'ico', 'tif'].includes(this.contentInfo.ext);
+      },
+      foreignKeys () {
+         return this.keyUsage.map(key => key.column);
+      }
+   },
+   created () {
+      this.fields.forEach(field => {
+         this.isInlineEditor[field.name] = false;
+      });
+   },
+   methods: {
+      getFieldType (cKey) {
+         let type = 'unknown';
+         const field = this.getFieldObj(cKey);
+         if (field)
+            type = field.type;
+
+         return type;
+      },
+      getFieldPrecision (cKey) {
+         let length = 0;
+         const field = this.getFieldObj(cKey);
+         if (field)
+            length = field.datePrecision;
+
+         return length;
+      },
+      getFieldObj (cKey) {
+         return this.fields.filter(field => field.name === cKey || field.alias === cKey)[0];
+      },
+      isNull (value) {
+         return value === null ? ' is-null' : '';
+      },
+      bufferToBase64 (val) {
+         return bufferToBase64(val);
+      },
+      editON (event, content, field) {
+         const type = this.getFieldType(field);
+         this.originalContent = content;
+         this.editingType = type;
+         this.editingField = field;
+
+         if (LONG_TEXT.includes(type)) {
+            this.isTextareaEditor = true;
+            this.editingContent = this.$options.filters.typeFormat(this.originalContent, type);
+            return;
+         }
+
+         if (BLOB.includes(type)) {
+            this.isBlobEditor = true;
+            this.editingContent = this.originalContent || '';
+            this.fileToUpload = null;
+            this.willBeDeleted = false;
+
+            if (this.originalContent !== null) {
+               const buff = Buffer.from(this.editingContent);
+               if (buff.length) {
+                  const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+                  const { ext, mime } = mimeFromHex(hex);
+                  this.contentInfo = {
+                     ext,
+                     mime,
+                     size: this.editingContent.length
+                  };
+               }
+            }
+            return;
+         }
+
+         // Inline editable fields
+         this.editingContent = this.$options.filters.typeFormat(this.originalContent, type, this.getFieldPrecision(field));
+         this.$nextTick(() => { // Focus on input
+            event.target.blur();
+
+            this.$nextTick(() => document.querySelector('.editable-field').focus());
+         });
+
+         const obj = {
+            [field]: true
+         };
+         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+      },
+      editOFF () {
+         this.isInlineEditor[this.editingField] = false;
+         let content;
+         if (!BLOB.includes(this.editingType)) {
+            if (this.editingContent === this.$options.filters.typeFormat(this.originalContent, this.editingType)) return;// If not changed
+            content = this.editingContent;
+         }
+         else { // Handle file upload
+            if (this.willBeDeleted) {
+               content = '';
+               this.willBeDeleted = false;
+            }
+            else {
+               if (!this.fileToUpload) return;
+               content = this.fileToUpload.file.path;
+            }
+         }
+
+         this.$emit('update-field', {
+            field: this.getFieldObj(this.editingField).name,
+            type: this.editingType,
+            content
+         });
+
+         this.editingType = null;
+         this.editingField = null;
+      },
+      hideEditorModal () {
+         this.isTextareaEditor = false;
+         this.isBlobEditor = false;
+      },
+      downloadFile () {
+         const downloadLink = document.createElement('a');
+
+         downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
+         downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
+         document.body.appendChild(downloadLink);
+
+         downloadLink.click();
+         downloadLink.remove();
+      },
+      filesChange (event) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.fileToUpload = { name: files[0].name, file: files[0] };
+         this.willBeDeleted = false;
+      },
+      prepareToDelete () {
+         this.editingContent = '';
+         this.contentInfo = {
+            ext: '',
+            mime: '',
+            size: null
+         };
+         this.willBeDeleted = true;
+      },
+      contextMenu (event, cell) {
+         this.$emit('update-field', event, cell);
+      },
+      selectRow (event, row) {
+         this.$emit('select-row', event, row);
+      },
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.column === keyName);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+.editable-field {
+  margin: 0;
+  border: none;
+  line-height: 1;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.cell-content {
+  display: block;
+  min-height: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.textarea-editor {
+  height: 50vh !important;
+}
+
+.editor-field-info {
+  margin-top: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  white-space: normal;
+}
+
+.editor-buttons {
+  display: flex;
+  justify-content: space-evenly;
+
+  .btn {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@@ -6,15 +6,19 @@
               <button
                  class="btn btn-link btn-sm"
                  :class="{'loading':isQuering}"
-                  @click="getTableData"
+                  @click="reloadTable"
               >
                  <span>{{ $t('word.refresh') }}</span>
-                  <i class="material-icons ml-1">refresh</i>
+                  <i class="mdi mdi-24px mdi-refresh ml-1" />
+               </button>
+               <button
+                  class="btn btn-link btn-sm"
+                  :class="{'disabled':isQuering}"
+                  @click="showAddModal"
+               >
+                  <span>{{ $t('word.add') }}</span>
+                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
               </button>
-               <!-- <button class="btn btn-link btn-sm">
-                  <span>{{ $t('word.save') }}</span>
-                  <i class="material-icons ml-1">save</i>
-               </button> -->
            </div>
            <div class="workspace-query-info">
               <div v-if="results.rows">
@@ -31,24 +35,32 @@
            v-if="results"
            ref="queryTable"
            :results="results"
-            :fields="resultsFields"
-            @updateField="updateField"
-            @deleteSelected="deleteSelected"
+            :tab-uid="tabUid"
+            @update-field="updateField"
+            @delete-selected="deleteSelected"
         />
      </div>
+      <ModalNewTableRow
+         v-if="isAddModal"
+         :tab-uid="tabUid"
+         @hide="hideAddModal"
+         @reload="reloadTable"
+      />
   </div>
 </template>

 <script>
 import Tables from '@/ipc-api/Tables';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
+import ModalNewTableRow from '@/components/ModalNewTableRow';
 import { mapGetters, mapActions } from 'vuex';
 import tableTabs from '@/mixins/tableTabs';

 export default {
   name: 'WorkspaceTableTab',
   components: {
-      WorkspaceQueryTable
+      WorkspaceQueryTable,
+      ModalNewTableRow
   },
   mixins: [tableTabs],
   props: {
@@ -57,10 +69,13 @@ export default {
   },
   data () {
      return {
+         tabUid: 'data',
         isQuering: false,
         results: {},
         fields: [],
-         lastTable: null
+         keyUsage: [],
+         lastTable: null,
+         isAddModal: false
      };
   },
   computed: {
@@ -71,17 +86,7 @@ export default {
         return this.getWorkspace(this.connection.uid);
      },
      isSelected () {
-         return this.workspace.selected_tab === 1;
-      },
-      resultsFields () {
-         return this.fields.map(field => { // TODO: move to main process
-            return {
-               name: field.COLUMN_NAME,
-               key: field.COLUMN_KEY.toLowerCase(),
-               type: field.DATA_TYPE,
-               precision: field.DATETIME_PRECISION
-            };
-         });
+         return this.workspace.selected_tab === 'data';
      }
   },
   watch: {
@@ -103,12 +108,15 @@ export default {
   },
   methods: {
      ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         setTabFields: 'workspaces/setTabFields',
+         setTabKeyUsage: 'workspaces/setTabKeyUsage'
      }),
      async getTableData () {
         if (!this.table) return;
         this.isQuering = true;
         this.results = {};
+         this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });

         const params = {
            uid: this.connection.uid,
@@ -116,10 +124,12 @@ export default {
            table: this.workspace.breadcrumbs.table
         };

-         try {
+         try { // Columns data
            const { status, response } = await Tables.getTableColumns(params);
-            if (status === 'success')
-               this.fields = response.rows;
+            if (status === 'success') {
+               this.fields = response;// Needed to add new rows
+               this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: response });
+            }
            else
               this.addNotification({ status: 'error', message: response });
         }
@@ -127,7 +137,7 @@ export default {
            this.addNotification({ status: 'error', message: err.stack });
         }

-         try {
+         try { // Table data
            const { status, response } = await Tables.getTableData(params);

            if (status === 'success')
@@ -139,44 +149,65 @@ export default {
            this.addNotification({ status: 'error', message: err.stack });
         }

+         try { // Key usage (foreign keys)
+            const { status, response } = await Tables.getKeyUsage(params);
+            if (status === 'success') {
+               this.keyUsage = response;// Needed to add new rows
+               this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: response });
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
         this.isQuering = false;
+      },
+      reloadTable () {
+         this.getTableData();
+      },
+      showAddModal () {
+         this.isAddModal = true;
+      },
+      hideAddModal () {
+         this.isAddModal = false;
      }
   }
 };
 </script>

 <style lang="scss">
-.workspace-tabs{
-   align-content: baseline;
+.workspace-tabs {
+  align-content: baseline;

-   .workspace-query-runner{
+  .workspace-query-runner {
+    .workspace-query-runner-footer {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.3rem 0.6rem 0.4rem;
+      align-items: center;

-      .workspace-query-runner-footer{
-         display: flex;
-         justify-content: space-between;
-         padding: .3rem .6rem .4rem;
-         align-items: center;
+      .workspace-query-buttons {
+        display: flex;

-         .workspace-query-buttons{
-            display: flex;
-
-            .btn{
-               display: flex;
-               align-self: center;
-               color: $body-font-color;
-               margin-right: .4rem;
-            }
-         }
-
-         .workspace-query-info{
-            display: flex;
-
-            > div + div{
-               padding-left: .6rem;
-            }
-         }
+        .btn {
+          display: flex;
+          align-self: center;
+          color: $body-font-color;
+          margin-right: 0.4rem;
+        }
      }
-   }
+
+      .workspace-query-info {
+        display: flex;
+
+        > div + div {
+          padding-left: 0.6rem;
+        }
+      }
+    }
+  }
 }

 </style>
--- a/src/renderer/i18n/ar-SA.js
+++ b/src/renderer/i18n/ar-SA.js
@@ -0,0 +1,87 @@
+module.exports = {
+   word: {
+      edit: 'تعديل',
+      save: 'حفظ',
+      close: 'إغلاق',
+      delete: 'حفظ',
+      confirm: 'تأكيد',
+      cancel: 'إلغاء',
+      send: 'إرسال',
+      connectionName: 'إسم الإتصال',
+      client: 'العميل',
+      hostName: 'إسم المستضيف',
+      port: 'المنفذ',
+      user: 'المستخدم',
+      password: 'الرقم السري',
+      credentials: 'بيانات الدخول',
+      connect: 'إتصال',
+      connected: 'متصل',
+      disconnect: 'إلغاء الإتصال',
+      disconnected: 'غير متصل',
+      refresh: 'تحديث',
+      settings: 'الإعدادات',
+      general: 'عام',
+      themes: 'الأنماط',
+      update: 'تحديث',
+      about: 'حول',
+      language: 'اللغة',
+      version: 'النسخة',
+      donate: 'إدعم',
+      run: 'شغل',
+      schema: 'Schema',
+      results: 'النتائج',
+      size: 'الحجم',
+      seconds: 'ثواني',
+      type: 'نوع',
+      mimeType: 'نوع الميديا',
+      download: 'تحميل',
+      add: 'أضف',
+      data: 'بيانات',
+      properties: 'خصائص',
+      insert: 'أدرج'
+   },
+   message: {
+      appWelcome: 'مرحبا بك في عميل الSQL انتاريس!',
+      appFirstStep: 'خطوتك الأولى قم بإنشاء إتصال جديد بقاعدة بيانات.',
+      addConnection: 'إضافة إتصال',
+      createConnection: 'إنشاء إتصال',
+      createNewConnection: 'إنشاء إتصال جديد',
+      askCredentials: 'إطلب بيانات الدخول',
+      testConnection: 'إختبر الإتصال',
+      editConnection: 'عدل الإتصال',
+      deleteConnection: 'إحذف الإتصال',
+      deleteConnectionCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
+      connectionSuccessfullyMade: 'تم الإتصال بنجاح!',
+      madeWithJS: 'بني بـ  💛 و جافاسكربت!',
+      checkForUpdates: 'تأكد من التحديثات',
+      noUpdatesAvailable: 'لا توجد تحديثات',
+      checkingForUpdate: 'البحث عن تحديثات',
+      checkFailure: 'فشل البحث, نرجوا المحاولة في وقت لاحق',
+      updateAvailable: 'تحديث جديد متوفر',
+      downloadingUpdate: 'جاري تحميل التحديث',
+      updateDownloaded: 'تم تحميل التحديث',
+      restartToInstall: 'قم بإعادة تشغيل انتاريس للتحديث',
+      unableEditFieldWithoutPrimary: 'لا يمكن تعديل الخانة بدون وجود مفتاح رئيسي في النتائج',
+      editCell: 'تعديل الخلية',
+      deleteRows: 'حذف صف | حذف {count} صفوف',
+      confirmToDeleteRows: 'هل أنت متأكد من حذف صف واحد؟? | هل أنت متأكد من حذف {count} صف?',
+      notificationsTimeout: 'إنتهاء التنبيهات',
+      uploadFile: 'رفع ملف',
+      addNewRow: 'إضافة صف جديد',
+      numberOfInserts: 'عدد الإدراجات'
+   },
+   // Date and Time
+   short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+   },
+   long: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric'
+   }
+};
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -29,7 +29,16 @@ module.exports = {
      donate: 'Donate',
      run: 'Run',
      schema: 'Schema',
-      results: 'Results'
+      results: 'Results',
+      size: 'Size',
+      seconds: 'Seconds',
+      type: 'Type',
+      mimeType: 'Mime-Type',
+      download: 'Download',
+      add: 'Add',
+      data: 'Data',
+      properties: 'Properties',
+      insert: 'Insert'
   },
   message: {
      appWelcome: 'Welcome to Antares SQL Client!',
@@ -55,7 +64,13 @@ module.exports = {
      unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset',
      editCell: 'Edit cell',
      deleteRows: 'Delete row | Delete {count} rows',
-      confirmToDeleteRows: 'Do you confirm to delete one row? | Do you confirm to delete {count} rows?'
+      confirmToDeleteRows: 'Do you confirm to delete one row? | Do you confirm to delete {count} rows?',
+      notificationsTimeout: 'Notifications timeout',
+      uploadFile: 'Upload file',
+      addNewRow: 'Add new row',
+      numberOfInserts: 'Number of inserts',
+      openNewTab: 'Open a new tab',
+      affectedRows: 'Affected rows'
   },
   // Date and Time
   short: {
--- a/src/renderer/i18n/index.js
+++ b/src/renderer/i18n/index.js
@@ -6,7 +6,8 @@ Vue.use(VueI18n);
 const i18n = new VueI18n({
   messages: {
      'en-US': require('./en-US'),
-      'it-IT': require('./it-IT')
+      'it-IT': require('./it-IT'),
+      'ar-SA': require('./ar-SA')
   }
 });
 export default i18n;
--- a/src/renderer/i18n/it-IT.js
+++ b/src/renderer/i18n/it-IT.js
@@ -27,7 +27,9 @@ module.exports = {
      language: 'Lingua',
      version: 'Versione',
      donate: 'Dona',
-      run: 'Esegui'
+      run: 'Esegui',
+      schema: 'Schema',
+      results: 'Results'
   },
   message: {
      appWelcome: 'Benvenuto in Antares SQL Client!',
@@ -41,7 +43,19 @@ module.exports = {
      deleteConnection: 'Elimina connessione',
      deleteConnectionCorfirm: 'Confermi l\'eliminazione di',
      connectionSuccessfullyMade: 'Connessione avvenuta con successo!',
-      madeWithJS: 'Fatto con 💛 e JavaScript!'
+      madeWithJS: 'Fatto con 💛 e JavaScript!',
+      checkForUpdates: 'Cerca aggiornamenti',
+      noUpdatesAvailable: 'Nessun aggiornamento disponibile',
+      checkingForUpdate: 'Controllo aggiornamenti in corso',
+      checkFailure: 'Controllo fallito, riprova più tardi',
+      updateAvailable: 'Aggiornamento disponibile',
+      downloadingUpdate: 'Download dell\'aggiornamento',
+      updateDownloaded: 'Aggiornamento scaricato',
+      restartToInstall: 'Riavvia Antares per installare l\'aggiornamento',
+      unableEditFieldWithoutPrimary: 'Impossibile modificare il campo senza una primary key nel resultset',
+      editCell: 'Modifica cella',
+      deleteRows: 'Elimina riga | Elimina {count} righe',
+      confirmToDeleteRows: 'Confermi di voler cancellare una riga? | Confermi di voler cancellare {count} righe?'
   },
   // Date and Time
   short: {
--- a/src/renderer/i18n/supported-locales.js
+++ b/src/renderer/i18n/supported-locales.js
@@ -1,4 +1,5 @@
 export default {
   'en-US': 'English',
-   'it-IT': 'Italiano'
+   'it-IT': 'Italiano',
+   'ar-SA': 'العربية'
 };
--- a/src/renderer/ipc-api/Connection.js
+++ b/src/renderer/ipc-api/Connection.js
@@ -3,11 +3,11 @@ import { ipcRenderer } from 'electron';

 export default class {
   static makeTest (params) {
-      return ipcRenderer.invoke('testConnection', params);
+      return ipcRenderer.invoke('test-connection', params);
   }

   static checkConnection (params) {
-      return ipcRenderer.invoke('checkConnection', params);
+      return ipcRenderer.invoke('check-connection', params);
   }

   static connect (params) {
@@ -23,6 +23,6 @@ export default class {
   }

   static rawQuery (params) {
-      return ipcRenderer.invoke('rawQuery', params);
+      return ipcRenderer.invoke('raw-query', params);
   }
 }
--- a/src/renderer/ipc-api/Tables.js
+++ b/src/renderer/ipc-api/Tables.js
@@ -3,18 +3,30 @@ import { ipcRenderer } from 'electron';

 export default class {
   static getTableColumns (params) {
-      return ipcRenderer.invoke('getTableColumns', params);
+      return ipcRenderer.invoke('get-table-columns', params);
   }

   static getTableData (params) {
-      return ipcRenderer.invoke('getTableData', params);
+      return ipcRenderer.invoke('get-table-data', params);
+   }
+
+   static getKeyUsage (params) {
+      return ipcRenderer.invoke('get-key-usage', params);
   }

   static updateTableCell (params) {
-      return ipcRenderer.invoke('updateTableCell', params);
+      return ipcRenderer.invoke('update-table-cell', params);
   }

   static deleteTableRows (params) {
-      return ipcRenderer.invoke('deleteTableRows', params);
+      return ipcRenderer.invoke('delete-table-rows', params);
+   }
+
+   static insertTableRows (params) {
+      return ipcRenderer.invoke('insert-table-rows', params);
+   }
+
+   static getForeignList (params) {
+      return ipcRenderer.invoke('get-foreign-list', params);
   }
 }
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -2,7 +2,7 @@

 import Vue from 'vue';

-import 'material-design-icons/iconfont/material-icons.css';
+import '@mdi/font/css/materialdesignicons.css';
 import '@/scss/main.scss';

 import App from '@/App.vue';
--- a/src/renderer/mixins/tableTabs.js
+++ b/src/renderer/mixins/tableTabs.js
@@ -3,6 +3,8 @@ import Tables from '@/ipc-api/Tables';
 export default {
   methods: {
      async updateField (payload) {
+         this.isQuering = true;
+
         const params = {
            uid: this.connection.uid,
            schema: this.workspace.breadcrumbs.schema,
@@ -12,16 +14,24 @@ export default {

         try {
            const { status, response } = await Tables.updateTableCell(params);
-            if (status === 'success')
-               this.$refs.queryTable.applyUpdate(payload);
+            if (status === 'success') {
+               if (response.reload)// Needed for blob fields
+                  this.reloadTable();
+               else
+                  this.$refs.queryTable.applyUpdate(payload);
+            }
            else
               this.addNotification({ status: 'error', message: response });
         }
         catch (err) {
            this.addNotification({ status: 'error', message: err.stack });
         }
+
+         this.isQuering = false;
      },
      async deleteSelected (payload) {
+         this.isQuering = true;
+
         const params = {
            uid: this.connection.uid,
            schema: this.workspace.breadcrumbs.schema,
@@ -42,6 +52,8 @@ export default {
         catch (err) {
            this.addNotification({ status: 'error', message: err.stack });
         }
+
+         this.isQuering = false;
      }
   }
 };
--- a/src/renderer/scss/_data-types.scss
+++ b/src/renderer/scss/_data-types.scss
@@ -1,43 +1,48 @@
@mixin type-colors($types) {
-   @each $type, $color in $types {
-      .type-#{$type} {
-         color: $color;
+  @each $type, $color in $types {
+    .type-#{$type} {
+      color: $color;

-         @if $type == "number" {
-            text-align: right;
-         }
+      @if $type == "number" {
+        text-align: right;
      }
-   }
+    }
+  }
 }

@include type-colors(
-   (
-      "char": seagreen,
-      "varchar": seagreen,
-      "text": seagreen,
-      "mediumtext": seagreen,
-      "longtext": seagreen,
-      "int": cornflowerblue,
-      "tinyint": cornflowerblue,
-      "smallint": cornflowerblue,
-      "mediumint": cornflowerblue,
-      "bigint": cornflowerblue,
-      "datetime": coral,
-      "date": coral,
-      "time": coral,
-      "timestamp": coral,
-      "bit": lightskyblue,
-      "blob": darkorchid,
-      "mediumblob": darkorchid,
-      "longblob": darkorchid,
-      "unknown": gray,
-   )
+  (
+    "char": seagreen,
+    "varchar": seagreen,
+    "text": seagreen,
+    "mediumtext": seagreen,
+    "longtext": seagreen,
+    "int": cornflowerblue,
+    "tinyint": cornflowerblue,
+    "smallint": cornflowerblue,
+    "mediumint": cornflowerblue,
+    "float": cornflowerblue,
+    "double": cornflowerblue,
+    "decimal": cornflowerblue,
+    "bigint": cornflowerblue,
+    "datetime": coral,
+    "date": coral,
+    "time": coral,
+    "timestamp": coral,
+    "bit": lightskyblue,
+    "blob": darkorchid,
+    "mediumblob": darkorchid,
+    "longblob": darkorchid,
+    "enum": gold,
+    "set": gold,
+    "unknown": gray,
+  )
 );

 .is-null {
-   color: gray;
+  color: gray;

-   &::after {
-      content: "NULL";
-   }
+  &::after {
+    content: "NULL";
+  }
 }
--- a/src/renderer/scss/_db-icons.scss
+++ b/src/renderer/scss/_db-icons.scss
@@ -1,26 +1,26 @@
 .dbi {
-   display: inline-block;
-   width: 42px;
-   height: 42px;
-   background-size: cover;
+  display: inline-block;
+  width: 42px;
+  height: 42px;
+  background-size: cover;

-   &.dbi-mysql {
-      background-image: url("../images/svg/mysql.svg");
-   }
+  &.dbi-mysql {
+    background-image: url("../images/svg/mysql.svg");
+  }

-   &.dbi-maria {
-      background-image: url("../images/svg/mariadb.svg");
-   }
+  &.dbi-maria {
+    background-image: url("../images/svg/mariadb.svg");
+  }

-   &.dbi-mssql {
-      background-image: url("../images/svg/mssql.svg");
-   }
+  &.dbi-mssql {
+    background-image: url("../images/svg/mssql.svg");
+  }

-   &.dbi-pg {
-      background-image: url("../images/svg/pg.svg");
-   }
+  &.dbi-pg {
+    background-image: url("../images/svg/pg.svg");
+  }

-   &.dbi-oracledb {
-      background-image: url("../images/svg/oracledb.svg");
-   }
+  &.dbi-oracledb {
+    background-image: url("../images/svg/oracledb.svg");
+  }
 }
--- a/src/renderer/scss/_fake-tables.scss
+++ b/src/renderer/scss/_fake-tables.scss
@@ -5,12 +5,35 @@
  display: table;
  table-layout: fixed;

-  &.table-striped {
-    .tbody {
-      .tr:nth-of-type(odd) {
-        background: $bg-color;
-      }
-    }
+  .tbody {
+    display: table-row-group;
+  }
+
+  .tr {
+    display: table-row;
+  }
+
+  // Scollable tables
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: 0.75rem;
+    white-space: nowrap;
+  }
+
+  .thead {
+    display: table-header-group;
+  }
+
+  .td,
+  .th {
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
+    display: table-cell;
+  }
+
+  .th {
+    border-bottom-width: $border-width-lg;
  }

  &,
@@ -20,6 +43,7 @@
        &.selected {
          background: #333 !important;
        }
+
        &.active {
          background: $bg-color-dark;
        }
@@ -37,33 +61,11 @@
    }
  }

-  // Scollable tables
-  &.table-scroll {
-    display: block;
-    overflow-x: auto;
-    padding-bottom: 0.75rem;
-    white-space: nowrap;
-  }
-
-  .thead {
-    display: table-header-group;
-  }
-
-  .tbody {
-    display: table-row-group;
-  }
-
-  .tr {
-    display: table-row;
-  }
-
-  .td,
-  .th {
-    border-bottom: $border-width solid $border-color;
-    padding: $unit-3 $unit-2;
-    display: table-cell;
-  }
-  .th {
-    border-bottom-width: $border-width-lg;
+  &.table-striped {
+    .tbody {
+      .tr:nth-of-type(odd) {
+        background: $bg-color;
+      }
+    }
  }
 }
--- a/src/renderer/scss/_mdi-additions.scss
+++ b/src/renderer/scss/_mdi-additions.scss
@@ -1,16 +1,9 @@
+.mdi {
+  display: flex;
+  align-items: center;
+  justify-content: center;

-.material-icons{// TODO: rewrite with rem
-   /* Rules for sizing the icon. */
-   &.md-18 { font-size: 18px; }
-   &.md-24 { font-size: 24px; }
-   &.md-36 { font-size: 36px; }
-   &.md-48 { font-size: 48px; }
-   
-   /* Rules for using icons as black on a light background. */
-   &.md-dark { color: rgba(0, 0, 0, 0.54); }
-   &.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
-   
-   /* Rules for using icons as white on a dark background. */
-   &.md-light { color: rgba(255, 255, 255, 1); }
-   &.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
-}
+  &::before {
+    line-height: 1;
+  }
+}
--- a/src/renderer/scss/_table-keys.scss
+++ b/src/renderer/scss/_table-keys.scss
@@ -0,0 +1,18 @@
+.column-key {
+  transform: rotate(90deg);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  margin-right: 0.2rem;
+
+  &.key-pri {
+    color: goldenrod;
+  }
+
+  &.key-uni {
+    color: deepskyblue;
+  }
+
+  &.key-mul {
+    color: palegreen;
+  }
+}
--- a/src/renderer/scss/_transitions.scss
+++ b/src/renderer/scss/_transitions.scss
@@ -1,11 +1,41 @@
 .slide-fade-enter-active {
  transition: all 0.3s ease;
 }
+
 .slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 }
+
 .slide-fade-enter,
 .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.jump-down-enter-active {
+  animation: jump-down-in 0.2s;
+}
+
+.jump-down-leave-active {
+  animation: jump-down-in 0.2s reverse;
+}
+
+@keyframes jump-down-in {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -1,4 +1,4 @@
-/*Colors*/
+/* Colors */
 $body-bg: #1d1d1d;
 $body-font-color: #fff;
 $bg-color: #1d1d1d;
@@ -9,9 +9,9 @@ $success-color: #32b643;
 $error-color: #de3b28;
 $warning-color: #e0a40c;

-/*Sizes*/
+/* Sizes */
 $titlebar-height: 1.5rem;
 $settingbar-width: 3rem;
 $explorebar-width: 14rem;
 $footer-height: 1.5rem;
-$excluding-size: $footer-height + $titlebar-height;
+$excluding-size: $footer-height + $titlebar-height;
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -2,6 +2,7 @@
@import "variables";
@import "transitions";
@import "data-types";
+@import "table-keys";
@import "fake-tables";
@import "mdi-additions";
@import "db-icons";
@@ -9,140 +10,166 @@
@import "~spectre.css/src/spectre-exp";

 body {
-   user-select: none;
+  user-select: none;
 }

-/*Additions*/
+/* Additions */
@include margin-variant(3, $unit-3);
@include margin-variant(4, $unit-4);
@include padding-variant(3, $unit-3);
@include padding-variant(4, $unit-4);

 .btn.btn-gray {
-   color: #fff;
-   background: $bg-color-gray;
+  color: #fff;
+  background: $bg-color-gray;

-   &:hover {
-      background: $bg-color;
-   }
+  &:hover {
+    background: $bg-color;
+  }
 }

 .p-vcentered {
-   display: flex !important;
-   align-items: center;
+  display: flex !important;
+  align-items: center;
 }

 .c-help {
-   cursor: help;
+  cursor: help;
+}
+
+.bg-checkered {
+  background-image:
+    linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
+    linear-gradient(to right, black 50%, white 50%),
+    linear-gradient(to bottom, black 50%, white 50%);
+  background-blend-mode: normal, difference, normal;
+  background-size: 2em 2em;
 }

 // Scrollbars
 ::-webkit-scrollbar {
-   width: 10px;
-   height: 10px;
+  width: 10px;
+  height: 10px;
 }

 ::-webkit-scrollbar-track {
-   background: $bg-color-light;
+  background: $bg-color-light;
 }

 ::-webkit-scrollbar-thumb {
-   background: rgba($color: #fff, $alpha: 0.5);
+  background: rgba($color: #fff, $alpha: 0.5);

-   &:hover {
-      background: rgba($color: #fff, $alpha: 1);
-   }
+  &:hover {
+    background: rgba($color: #fff, $alpha: 1);
+  }
 }

 // Animations
@keyframes rotation {
-   from {
-      transform: rotate(0deg);
-   }
-   to {
-      transform: rotate(359deg);
-   }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
 }

 .rotate {
-   animation: rotation 0.8s infinite linear;
+  animation: rotation 0.8s infinite linear;
 }

-/*Override*/
+/* Override */
 .modal {
-   .modal-overlay,
-   &.active .modal-overlay {
-      background: rgba(255, 255, 255, 0.15);
-   }
+  .modal-overlay,
+  &.active .modal-overlay {
+    background: rgba(255, 255, 255, 0.15);
+  }

-   .modal-sm .modal-container,
-   .modal-container {
-      box-shadow: 0 0 1px 0px #000;
-      padding: 0;
-      background: $bg-color;
+  .modal-container,
+  .modal-sm .modal-container {
+    box-shadow: 0 0 1px 0 #000;
+    padding: 0;
+    background: $bg-color;

-      .modal-header {
-         padding: 0.4rem 0.8rem;
-         text-transform: uppercase;
-         background: $bg-color-gray;
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         color: #fff;
-      }
-   }
+    .modal-header {
+      padding: 0.4rem 0.8rem;
+      text-transform: uppercase;
+      background: $bg-color-gray;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+    }
+  }
 }

 .tab {
-   border-color: #272727;
+  border-color: #272727;
+
+  .tab-item {
+    .btn-clear {
+      margin-top: -0.1rem;
+      font-size: 0.6rem;
+    }
+  }
 }

 .panel {
-   border: none;
+  border: none;
 }

 .badge {
-   &[data-badge],
-   &:not([data-badge]) {
-      &::after {
-         box-shadow: none;
-      }
-   }
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      box-shadow: none;
+    }
+  }
 }

 .form-select {
-   cursor: pointer;
+  cursor: pointer;
 }

 .form-select,
-.form-select:not([multiple]):not([size]),
 .form-input,
+.form-select:not([multiple]):not([size]),
 .form-checkbox .form-icon,
 .form-radio .form-icon {
-   border-color: $bg-color-light;
-   background: $bg-color-gray;
+  border-color: $bg-color-light;
+  background-color: $bg-color-gray;
+}
+
+.form-input:not(:placeholder-shown):invalid:focus {
+  background: $bg-color-gray;
 }

 .form-select:not([multiple]):not([size]):focus {
-   border-color: $primary-color;
+  border-color: $primary-color;
+}
+
+.input-group .input-group-addon {
+  border-color: #3f3f3f;
 }

 .menu {
-   font-size: 0.7rem;
-   .menu-item {
-      + .menu-item {
-         margin-top: 0;
-      }
-   }
+  font-size: 0.7rem;
+
+  .menu-item {
+    + .menu-item {
+      margin-top: 0;
+    }
+  }
 }

 .accordion-body {
-   max-height: 500rem !important;
+  max-height: 500rem !important;
 }

 .btn.loading {
-   > .material-icons,
-   > span {
-      visibility: hidden;
-   }
+  > .mdi,
+  > span {
+    visibility: hidden;
+  }
 }
--- a/src/renderer/store/modules/notifications.store.js
+++ b/src/renderer/store/modules/notifications.store.js
@@ -1,5 +1,5 @@
 'use strict';
-import { uidGen } from 'common/libs/utilities';
+import { uidGen } from 'common/libs/uidGen';

 export default {
   namespaced: true,
@@ -20,7 +20,7 @@ export default {
   },
   actions: {
      addNotification ({ commit }, payload) {
-         payload.uid = uidGen();
+         payload.uid = uidGen('N');
         commit('ADD_NOTIFICATION', payload);
      },
      removeNotification ({ commit }, uid) {
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@@ -6,17 +6,22 @@ export default {
   strict: true,
   state: {
      locale: 'en-US',
-      explorebar_size: null
+      explorebar_size: null,
+      notifications_timeout: 10
   },
   getters: {
      getLocale: state => state.locale,
-      getExplorebarSize: state => state.explorebar_size
+      getExplorebarSize: state => state.explorebar_size,
+      getNotificationsTimeout: state => state.notifications_timeout
   },
   mutations: {
      SET_LOCALE (state, locale) {
         state.locale = locale;
         i18n.locale = locale;
      },
+      SET_NOTIFICATIONS_TIMEOUT (state, timeout) {
+         state.notifications_timeout = timeout;
+      },
      SET_EXPLOREBAR_SIZE (state, size) {
         state.explorebar_size = size;
      }
@@ -25,6 +30,9 @@ export default {
      changeLocale ({ commit }, locale) {
         commit('SET_LOCALE', locale);
      },
+      updateNotificationsTimeout ({ commit }, timeout) {
+         commit('SET_NOTIFICATIONS_TIMEOUT', timeout);
+      },
      changeExplorebarSize ({ commit }, size) {
         commit('SET_EXPLOREBAR_SIZE', size);
      }
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/src/renderer/store/modules/workspaces.store.js
@@ -1,8 +1,9 @@
 'use strict';
 import Connection from '@/ipc-api/Connection';
-import { uidGen } from 'common/libs/utilities';
+import { uidGen } from 'common/libs/uidGen';
+const tabIndex = [];

-function remapStructure (structure) {
+function remapStructure (structure) { // TODO: move to main process and add fields (for autocomplete purpose)
   const databases = structure.map(table => table.TABLE_SCHEMA)
      .filter((value, index, self) => self.indexOf(value) === index);

@@ -28,8 +29,14 @@ export default {
         return null;
      },
      getWorkspace: state => uid => {
-         const workspace = state.workspaces.filter(workspace => workspace.uid === uid);
-         return workspace.length ? workspace[0] : {};
+         return state.workspaces.find(workspace => workspace.uid === uid);
+      },
+      getWorkspaceTab: (state, getters) => tUid => {
+         if (!getters.getSelected) return;
+         const workspace = state.workspaces.find(workspace => workspace.uid === getters.getSelected);
+         if ('tabs' in workspace)
+            return workspace.tabs.find(tab => tab.uid === tUid);
+         return {};
      },
      getConnected: state => {
         return state.workspaces
@@ -57,10 +64,15 @@ export default {
         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace);
      },
      NEW_TAB (state, uid) {
+         tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
+
         const newTab = {
-            uid: uidGen(),
+            uid: uidGen('T'),
+            index: tabIndex[uid],
            selected: false,
-            type: 'query'
+            type: 'query',
+            fields: [],
+            keyUsage: []
         };
         state.workspaces = state.workspaces.map(workspace => {
            if (workspace.uid === uid) {
@@ -73,8 +85,54 @@ export default {
               return workspace;
         });
      },
+      REMOVE_TAB (state, { uid, tab: tUid }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.filter(tab => tab.uid !== tUid)
+               };
+            }
+            else
+               return workspace;
+         });
+      },
      SELECT_TAB (state, { uid, tab }) {
         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace);
+      },
+      SET_TAB_FIELDS (state, { cUid, tUid, fields }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, fields };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+      },
+      SET_TAB_KEY_USAGE (state, { cUid, tUid, keyUsage }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, keyUsage };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
      }
   },
   actions: {
@@ -115,14 +173,25 @@ export default {
            uid,
            connected: false,
            selected_tab: 0,
-            tabs: [{ uid: 1, type: 'table' }],
+            tabs: [{
+               uid: 'data',
+               type: 'table',
+               fields: [],
+               keyUsage: []
+            },
+            {
+               uid: 'prop',
+               type: 'table',
+               fields: [],
+               keyUsage: []
+            }],
            structure: {},
            breadcrumbs: {}
         };

         commit('ADD_WORKSPACE', workspace);

-         if (getters.getWorkspace(uid).tabs.length < 2)
+         if (getters.getWorkspace(uid).tabs.length < 3)
            dispatch('newTab', uid);
      },
      changeBreadcrumbs ({ commit, getters }, payload) {
@@ -131,8 +200,17 @@ export default {
      newTab ({ commit }, uid) {
         commit('NEW_TAB', uid);
      },
+      removeTab ({ commit }, payload) {
+         commit('REMOVE_TAB', payload);
+      },
      selectTab ({ commit }, payload) {
         commit('SELECT_TAB', payload);
+      },
+      setTabFields ({ commit }, payload) {
+         commit('SET_TAB_FIELDS', payload);
+      },
+      setTabKeyUsage ({ commit }, payload) {
+         commit('SET_TAB_KEY_USAGE', payload);
      }
   }
 };
--- a/src/renderer/store/plugins/ipcUpdates.js
+++ b/src/renderer/store/plugins/ipcUpdates.js
@@ -1,23 +1,23 @@
 import { ipcRenderer } from 'electron';

 export default store => {
-   ipcRenderer.on('checkingForUpdate', () => {
+   ipcRenderer.on('checking-for-update', () => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'checking');
   });
-   ipcRenderer.on('updateAvailable', () => {
+   ipcRenderer.on('update-available', () => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'available');
   });
-   ipcRenderer.on('updateNotAvailable', () => {
+   ipcRenderer.on('update-not-available', () => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'noupdate');
   });
-   ipcRenderer.on('checkFailed', () => {
+   ipcRenderer.on('check-failed', () => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'nocheck');
   });
-   ipcRenderer.on('downloadProgress', (event, data) => {
+   ipcRenderer.on('download-progress', (event, data) => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'downloading');
      store.commit('application/CHANGE_PROGRESS_PERCENTAGE', data.percent);
   });
-   ipcRenderer.on('updateDownloaded', () => {
+   ipcRenderer.on('update-downloaded', () => {
      store.commit('application/CHANGE_UPDATE_STATUS', 'downloaded');
   });
 };
--- a/src/renderer/suggestions/sql.js
+++ b/src/renderer/suggestions/sql.js
@@ -0,0 +1,12 @@
+import { functions } from '@/suggestions/sql/sql-functions';
+import { keywords } from '@/suggestions/sql/sql-keywords';
+import { operators } from '@/suggestions/sql/sql-operators';
+import { variables } from '@/suggestions/sql/sql-variables';
+
+export const completionItemProvider = (monaco) => {
+   return {
+      provideCompletionItems () {
+         return { suggestions: [...functions(monaco), ...keywords(monaco), ...operators(monaco), ...variables(monaco)] };
+      }
+   };
+};
--- a/src/renderer/suggestions/sql/sql-functions.js
+++ b/src/renderer/suggestions/sql/sql-functions.js
--- a/src/renderer/suggestions/sql/sql-keywords.js
+++ b/src/renderer/suggestions/sql/sql-keywords.js
--- a/src/renderer/suggestions/sql/sql-operators.js
+++ b/src/renderer/suggestions/sql/sql-operators.js
@@ -0,0 +1,142 @@
+export const operators = (monaco) => {
+   return [{
+      label: 'ALL',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'ALL'
+   },
+   {
+      label: 'AND',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'AND'
+   },
+   {
+      label: 'ANY',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'ANY'
+   },
+   {
+      label: 'BETWEEN',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'BETWEEN'
+   },
+   {
+      label: 'EXISTS',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'EXISTS'
+   },
+   {
+      label: 'IN',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'IN'
+   },
+   {
+      label: 'LIKE',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'LIKE'
+   },
+   {
+      label: 'NOT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'NOT'
+   },
+   {
+      label: 'OR',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'OR'
+   },
+   {
+      label: 'SOME',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'SOME'
+   },
+   {
+      label: 'EXCEPT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'EXCEPT'
+   },
+   {
+      label: 'INTERSECT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'INTERSECT'
+   },
+   {
+      label: 'UNION',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'UNION'
+   },
+   {
+      label: 'APPLY',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'APPLY'
+   },
+   {
+      label: 'CROSS',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'CROSS'
+   },
+   {
+      label: 'FULL',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'FULL'
+   },
+   {
+      label: 'INNER',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'INNER'
+   },
+   {
+      label: 'JOIN',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'JOIN'
+   },
+   {
+      label: 'LEFT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'LEFT'
+   },
+   {
+      label: 'OUTER',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'OUTER'
+   },
+   {
+      label: 'RIGHT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'RIGHT'
+   },
+   {
+      label: 'CONTAINS',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'CONTAINS'
+   },
+   {
+      label: 'FREETEXT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'FREETEXT'
+   },
+   {
+      label: 'IS',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'IS'
+   },
+   {
+      label: 'NULL',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'NULL'
+   },
+   {
+      label: 'PIVOT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'PIVOT'
+   },
+   {
+      label: 'UNPIVOT',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'UNPIVOT'
+   },
+   {
+      label: 'MATCHED',
+      kind: monaco.languages.CompletionItemKind.Operator,
+      insertText: 'MATCHED'
+   }];
+};
--- a/src/renderer/suggestions/sql/sql-variables.js
+++ b/src/renderer/suggestions/sql/sql-variables.js
@@ -0,0 +1,172 @@
+export const variables = (monaco) => {
+   return [{
+      label: '@@DATEFIRST',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@DATEFIRST'
+   },
+   {
+      label: '@@DBTS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@DBTS'
+   },
+   {
+      label: '@@LANGID',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@LANGID'
+   },
+   {
+      label: '@@LANGUAGE',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@LANGUAGE'
+   },
+   {
+      label: '@@LOCK_TIMEOUT',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@LOCK_TIMEOUT'
+   },
+   {
+      label: '@@MAX_CONNECTIONS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@MAX_CONNECTIONS'
+   },
+   {
+      label: '@@MAX_PRECISION',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@MAX_PRECISION'
+   },
+   {
+      label: '@@NESTLEVEL',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@NESTLEVEL'
+   },
+   {
+      label: '@@OPTIONS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@OPTIONS'
+   },
+   {
+      label: '@@REMSERVER',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@REMSERVER'
+   },
+   {
+      label: '@@SERVERNAME',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@SERVERNAME'
+   },
+   {
+      label: '@@SERVICENAME',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@SERVICENAME'
+   },
+   {
+      label: '@@SPID',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@SPID'
+   },
+   {
+      label: '@@TEXTSIZE',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TEXTSIZE'
+   },
+   {
+      label: '@@VERSION',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@VERSION'
+   },
+   {
+      label: '@@CURSOR_ROWS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@CURSOR_ROWS'
+   },
+   {
+      label: '@@FETCH_STATUS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@FETCH_STATUS'
+   },
+   {
+      label: '@@DATEFIRST',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@DATEFIRST'
+   },
+   {
+      label: '@@PROCID',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@PROCID'
+   },
+   {
+      label: '@@ERROR',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@ERROR'
+   },
+   {
+      label: '@@IDENTITY',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@IDENTITY'
+   },
+   {
+      label: '@@ROWCOUNT',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@ROWCOUNT'
+   },
+   {
+      label: '@@TRANCOUNT',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TRANCOUNT'
+   },
+   {
+      label: '@@CONNECTIONS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@CONNECTIONS'
+   },
+   {
+      label: '@@CPU_BUSY',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@CPU_BUSY'
+   },
+   {
+      label: '@@IDLE',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@IDLE'
+   },
+   {
+      label: '@@IO_BUSY',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@IO_BUSY'
+   },
+   {
+      label: '@@PACKET_ERRORS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@PACKET_ERRORS'
+   },
+   {
+      label: '@@PACK_RECEIVED',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@PACK_RECEIVED'
+   },
+   {
+      label: '@@PACK_SENT',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@PACK_SENT'
+   },
+   {
+      label: '@@TIMETICKS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TIMETICKS'
+   },
+   {
+      label: '@@TOTAL_ERRORS',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TOTAL_ERRORS'
+   },
+   {
+      label: '@@TOTAL_READ',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TOTAL_READ'
+   },
+   {
+      label: '@@TOTAL_WRITE',
+      kind: monaco.languages.CompletionItemKind.Variable,
+      insertText: '@@TOTAL_WRITE'
+   }];
+};
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,11 @@
-
 const webpack = require('webpack');
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');

 module.exports = {
   plugins: [
+      new MonacoEditorPlugin({
+         languages: ['sql']
+      }),
      new webpack.DefinePlugin({
         'process.env': {
            PACKAGE_VERSION: JSON.stringify(require('./package.json').version)
Author	SHA1	Message	Date
Fabio	51ccce3da4	chore(release): 0.0.6	2020-09-03 13:46:16 +02:00
Fabio	a1a6f51f2f	fix: error when launching queries without a result from query tabs	2020-09-03 13:44:58 +02:00
Fabio	801a0de186	fix: field name displayed instead of alias	2020-09-02 18:14:30 +02:00
Fabio	264de9c568	feat: aliases support	2020-09-01 19:23:13 +02:00
Fabio Di Stasio	8390f8aa55	Merge pull request #31 from EStarium/dependabot/npm_and_yarn/electron-10.1.0 build(deps-dev): bump electron from 9.2.1 to 10.1.0	2020-08-31 17:39:49 +02:00
Fabio Di Stasio	af7c0e90b8	Merge pull request #30 from EStarium/dependabot/npm_and_yarn/sass-loader-10.0.1 build(deps-dev): bump sass-loader from 9.0.3 to 10.0.1	2020-08-31 14:02:57 +02:00
dependabot[bot]	da33e77361	build(deps-dev): bump electron from 9.2.1 to 10.1.0 Bumps [electron](https://github.com/electron/electron) from 9.2.1 to 10.1.0. - [Release notes](https://github.com/electron/electron/releases) - [Changelog](https://github.com/electron/electron/blob/master/docs/breaking-changes.md) - [Commits](https://github.com/electron/electron/compare/v9.2.1...v10.1.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-08-31 06:47:39 +00:00
dependabot[bot]	a4841ab63b	build(deps-dev): bump sass-loader from 9.0.3 to 10.0.1 Bumps [sass-loader](https://github.com/webpack-contrib/sass-loader) from 9.0.3 to 10.0.1. - [Release notes](https://github.com/webpack-contrib/sass-loader/releases) - [Changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/sass-loader/compare/v9.0.3...v10.0.1) Signed-off-by: dependabot[bot] <support@github.com>	2020-08-31 06:44:49 +00:00
Fabio	de3f36a3fe	docs: update README.md	2020-08-21 15:56:29 +02:00
Fabio	8dc74ef2c3	feat: sql suggestions in query editor	2020-08-21 11:38:00 +02:00
Fabio	256ec76588	feat: middle click to close tabs	2020-08-21 10:57:26 +02:00
Fabio	196a3e0185	feat: monaco-editor as query editor	2020-08-20 18:06:02 +02:00
Fabio	bc54fef0aa	docs: Update README.md	2020-08-20 15:31:50 +02:00
Fabio Di Stasio	a5b478e53d	Merge pull request #29 from Mohd-PH/master Add Arabic translation	2020-08-20 15:24:03 +02:00
Mohd-PH	2e235ad2fe	Change the name of Arabic in the settings page	2020-08-20 16:21:11 +03:00
Mohd-PH	950bb17b1e	Add Arabic translation	2020-08-20 12:37:26 +03:00
Fabio	3a6ea76b93	feat: tabs horizontal scroll with mouse wheel	2020-08-20 10:38:18 +02:00
Fabio	d7ed00f4a3	feat: support to multiple query tabs	2020-08-19 18:20:57 +02:00
Fabio	fd6d5177ef	fix: wrong table height calc in some cases	2020-08-19 16:25:42 +02:00
Fabio	9599b43f78	refactor: changed event names to kebab-case	2020-08-18 18:03:59 +02:00
Fabio	2cfb223ff6	chore: Improved changelog	2020-08-17 17:48:21 +02:00
Fabio	69def94c88	chore(release): 0.0.5	2020-08-17 17:39:28 +02:00
Fabio	e8141b6321	feat: badge on setting icon and update tab when update is available	2020-08-17 17:37:42 +02:00
Fabio	0b6a188d19	feat: foreign key support in add/edit row	2020-08-17 15:10:19 +02:00
Fabio Di Stasio	dca625fe5a	Merge pull request #28 from EStarium/dependabot/npm_and_yarn/standard-version-9.0.0 build(deps-dev): bump standard-version from 8.0.2 to 9.0.0	2020-08-17 08:42:08 +02:00
dependabot[bot]	a4b94bc19c	build(deps-dev): bump standard-version from 8.0.2 to 9.0.0 Bumps [standard-version](https://github.com/conventional-changelog/standard-version) from 8.0.2 to 9.0.0. - [Release notes](https://github.com/conventional-changelog/standard-version/releases) - [Changelog](https://github.com/conventional-changelog/standard-version/blob/master/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/standard-version/compare/v8.0.2...v9.0.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-08-17 06:28:16 +00:00
Fabio	744728a14f	refactor: moved table fields informations to vuex	2020-08-14 18:07:29 +02:00
Fabio	6d0724dc90	fix: wrong schema passed in query tab when selected a different database	2020-08-14 11:25:50 +02:00
Fabio	59e4a79f42	fix: newline replaced with undefined inside queries	2020-08-14 11:06:20 +02:00
Fabio	7bc10092fe	fix: query result table header didn't show just selected fields	2020-08-13 13:24:03 +02:00
Fabio	eb348b3095	fix: update a row with a string key value	2020-08-13 13:22:04 +02:00
Fabio	3c6e818ba0	fix: insert files via add row option	2020-08-13 12:42:19 +02:00
Fabio	2f1dfdc654	feat: option to insert table rows	2020-08-12 18:12:30 +02:00
Fabio	128a6cd9e8	style: UI improvements	2020-08-12 18:11:48 +02:00
Fabio	5473858323	refactor: changed material design icon pack	2020-08-12 10:48:18 +02:00
Fabio	7651d05b37	fix: window title not perfectly centered	2020-08-11 09:11:26 +02:00
Fabio	c89c1ce83c	docs: update README.md	2020-08-10 18:09:33 +02:00
Fabio	771f8a2d68	fix: time and datetime precision	2020-08-10 18:07:16 +02:00
Fabio	13b0816837	fix: table header not fixed on top when fast scrolling	2020-08-10 16:06:11 +02:00
Fabio	a15e6249e1	chore: dependabot interval and minor changes in README.md	2020-08-07 17:27:25 +02:00
Fabio	bbde2bd994	perf: improved scroll speed of result tables	2020-08-07 17:26:02 +02:00
Fabio	949f7add8f	chore(release): 0.0.4	2020-08-06 10:22:06 +02:00
Fabio	968ec1edf7	ci: improvements on travis release config	2020-08-06 10:20:36 +02:00
Fabio Di Stasio	a9d3a57281	Merge pull request #26 from EStarium/dependabot/npm_and_yarn/sass-loader-9.0.3 Bump sass-loader from 9.0.2 to 9.0.3	2020-08-06 08:54:45 +02:00
dependabot[bot]	f787439009	Bump sass-loader from 9.0.2 to 9.0.3 Bumps [sass-loader](https://github.com/webpack-contrib/sass-loader) from 9.0.2 to 9.0.3. - [Release notes](https://github.com/webpack-contrib/sass-loader/releases) - [Changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/sass-loader/compare/v9.0.2...v9.0.3) Signed-off-by: dependabot[bot] <support@github.com>	2020-08-06 06:11:22 +00:00
Fabio	b03d461e21	build: fix to build configuration on Travis	2020-08-05 22:09:23 +02:00
Fabio	5c05e3e9e9	refactor: moved queri fields mapping to main process	2020-08-05 22:08:20 +02:00
Fabio	0089c0cbac	feat: window title in app title bar	2020-08-05 13:53:30 +02:00
Fabio	4fd72ec9e7	refactor: improvements to blob editor and code cleanup	2020-08-04 17:54:19 +02:00
Fabio	712fe9f00d	feat: blob fields edit/view/download	2020-08-03 18:07:08 +02:00
Fabio	092e8a0732	style: 🎨 stylelint implementation	2020-07-31 18:16:28 +02:00
Fabio	70908eb076	Minor Improvements	2020-07-31 15:45:32 +02:00
Fabio Di Stasio	f8a0783769	Merge pull request #25 from EStarium/dependabot/npm_and_yarn/webpack-4.44.1 Bump webpack from 4.44.0 to 4.44.1	2020-07-31 08:10:30 +02:00
dependabot[bot]	cdf964ef07	Bump webpack from 4.44.0 to 4.44.1 Bumps [webpack](https://github.com/webpack/webpack) from 4.44.0 to 4.44.1. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v4.44.0...v4.44.1) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-31 05:22:32 +00:00
Fabio	413b56916c	Notifications timeout, large text editor	2020-07-30 19:12:29 +02:00
Fabio Di Stasio	acd3310228	Merge pull request #24 from EStarium/dependabot/npm_and_yarn/vue-i18n-8.20.0 Bump vue-i18n from 8.19.0 to 8.20.0	2020-07-30 08:16:32 +02:00
dependabot[bot]	e014f81a9c	Bump vue-i18n from 8.19.0 to 8.20.0 Bumps [vue-i18n](https://github.com/kazupon/vue-i18n) from 8.19.0 to 8.20.0. - [Release notes](https://github.com/kazupon/vue-i18n/releases) - [Changelog](https://github.com/kazupon/vue-i18n/blob/v8.x/CHANGELOG.md) - [Commits](https://github.com/kazupon/vue-i18n/compare/v8.19.0...v8.20.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-30 05:32:52 +00:00
Fabio	530361144e	Merge branch 'master' of https://github.com/EStarium/antares	2020-07-29 15:56:32 +02:00
Fabio	d69e411581	Moved to electron 9	2020-07-29 15:56:29 +02:00
Fabio Di Stasio	9a3a0513e2	Merge pull request #23 from EStarium/dependabot/npm_and_yarn/electron-9.1.2 Bump electron from 8.4.0 to 9.1.2	2020-07-29 15:04:58 +02:00
dependabot[bot]	be8fa96c93	Bump electron from 8.4.0 to 9.1.2 Bumps [electron](https://github.com/electron/electron) from 8.4.0 to 9.1.2. - [Release notes](https://github.com/electron/electron/releases) - [Changelog](https://github.com/electron/electron/blob/master/docs/breaking-changes.md) - [Commits](https://github.com/electron/electron/compare/v8.4.0...v9.1.2) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-29 05:58:58 +00:00
Fabio Di Stasio	587116bd20	Merge pull request #22 from EStarium/dependabot/npm_and_yarn/electron-updater-4.3.4 Bump electron-updater from 4.3.1 to 4.3.4	2020-07-28 09:53:45 +02:00
dependabot[bot]	145d1dd1ad	Bump electron-updater from 4.3.1 to 4.3.4 Bumps [electron-updater](https://github.com/electron-userland/electron-builder) from 4.3.1 to 4.3.4. - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/commits) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-28 07:50:07 +00:00
Fabio Di Stasio	457410b65a	Merge pull request #21 from EStarium/dependabot/npm_and_yarn/electron-builder-22.8.0 Bump electron-builder from 22.7.0 to 22.8.0	2020-07-28 08:09:09 +02:00
dependabot[bot]	b183eacae1	Bump electron-builder from 22.7.0 to 22.8.0 Bumps [electron-builder](https://github.com/electron-userland/electron-builder) from 22.7.0 to 22.8.0. - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/compare/v22.7.0...v22.8.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-28 05:20:18 +00:00
Fabio Di Stasio	76cafdb69a	Merge pull request #20 from ReverbOD/master Update it-IT translation	2020-07-27 20:55:10 +02:00
Giuseppe Gigliotti	2d63ddb9c7	Update it-IT translation fixed & updated italian translation	2020-07-27 20:12:48 +02:00
Fabio	f12f00dbb7	Added .travis.yml	2020-07-27 16:27:33 +02:00
Fabio Di Stasio	1ecb6d892c	Merge pull request #19 from EStarium/dependabot/npm_and_yarn/webpack-4.44.0 Bump webpack from 4.43.0 to 4.44.0	2020-07-27 07:59:02 +02:00
Fabio Di Stasio	fcd83f35d8	Merge pull request #18 from EStarium/dependabot/npm_and_yarn/vue-i18n-8.19.0 Bump vue-i18n from 8.18.2 to 8.19.0	2020-07-27 07:58:47 +02:00
dependabot[bot]	7a4d8286a6	Bump webpack from 4.43.0 to 4.44.0 Bumps [webpack](https://github.com/webpack/webpack) from 4.43.0 to 4.44.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v4.43.0...v4.44.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-27 05:41:17 +00:00
dependabot[bot]	dd5ec2c661	Bump vue-i18n from 8.18.2 to 8.19.0 Bumps [vue-i18n](https://github.com/kazupon/vue-i18n) from 8.18.2 to 8.19.0. - [Release notes](https://github.com/kazupon/vue-i18n/releases) - [Changelog](https://github.com/kazupon/vue-i18n/blob/v8.x/CHANGELOG.md) - [Commits](https://github.com/kazupon/vue-i18n/compare/v8.18.2...v8.19.0) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-27 05:39:54 +00:00
Fabio	3f0e5d3512	Fix typos	2020-07-26 15:10:01 +02:00
Fabio	ac01511c10	Update version	2020-07-24 17:34:39 +02:00