sqlite-wasm-viewer 1.0.10 → 1.1.1

package/dist/views/ExecuteSQLView/ExecuteSQLView.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExecuteSQLView = void 0;
+exports.createSQLExecutorView = createSQLExecutorView;
+var _QueryRunner = require("../../QueryRunner");
 require("./styles.css");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -39,19 +40,15 @@ var ExecuteSQLView = /*#__PURE__*/function () {
     key: "handleExecuteSql",
     value: function handleExecuteSql() {
       if (this.textArea.value) {
-        var _this$queryRunner;
-        (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: this.textArea.value,
           parameters: []
         });
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return ExecuteSQLView;
 }();
-exports.ExecuteSQLView = ExecuteSQLView;
+function createSQLExecutorView(rootEl) {
+  return new ExecuteSQLView(rootEl);
+}

package/dist/views/ExplorerView/ExplorerView.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExplorerView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createExplorerView = createExplorerView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _state = require("../../state");
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -15,12 +19,19 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
 var ExplorerView = /*#__PURE__*/function () {
-  function ExplorerView(rootEl) {
-    var _localStorage$getItem;
+  function ExplorerView(rootEl, viewEl) {
+    var _this = this,
+      _localStorage$getItem;
     _classCallCheck(this, ExplorerView);
     _defineProperty(this, "expandedItems", {});
     _defineProperty(this, "selectedItem", null);
+    _defineProperty(this, "showFullItemLabelTimeout", 0);
+    Bus.listen('db-found', function (table) {
+      _this.addDatabaseItem(table);
+    });
     this.dbs = [];
+    this.scheduleShowFullItemLabel = this.scheduleShowFullItemLabel.bind(this);
+    this.hideFullItemLabel = this.hideFullItemLabel.bind(this);
     var dbListHeader = document.createElement('div');
     dbListHeader.className = 'viewHeader';
     dbListHeader.innerText = 'Database List';
@@ -29,6 +40,10 @@ var ExplorerView = /*#__PURE__*/function () {
     this.containerEl.id = 'explorer_tree';
     rootEl.appendChild(this.containerEl);
     this.expandedItems = JSON.parse((_localStorage$getItem = localStorage.getItem(EXPANDED_EXPLORER_ITEMS_KEY)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
+    this.fullItemLabelEl = document.createElement('div');
+    this.fullItemLabelEl.id = 'full_label';
+    this.fullItemLabelEl.style.display = 'none';
+    viewEl.appendChild(this.fullItemLabelEl);
   }
   _createClass(ExplorerView, [{
     key: "addDatabaseItem",
@@ -45,26 +60,29 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildDom",
     value: function buildDom() {
-      var _this = this;
+      var _this2 = this;
       this.containerEl.innerHTML = '';
       this.dbs.forEach(function (db) {
-        _this.buildDbGroupDom(db);
+        _this2.buildDbGroupDom(db);
       });
     }
   }, {
     key: "buildDbGroupDom",
     value: function buildDbGroupDom(db) {
-      var _this2 = this;
+      var _this3 = this;
       var dbRoot = document.createDocumentFragment();
       var dbItem = document.createElement('div');
-      dbItem.innerText = db.filename;
-      dbItem.className = 'db';
+      this.setupCommonItemDom(dbItem);
+      this.setupLabelDom(dbItem, db.filename);
+      dbItem.classList.add('db');
+      dbItem.addEventListener('mouseenter', this.scheduleShowFullItemLabel);
+      dbItem.addEventListener('mouseleave', this.hideFullItemLabel);
       var tablesContainer = document.createElement('div');
       var isExpanded = !(this.expandedItems[db.filename] === false);
       this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
       dbRoot.appendChild(dbItem);
       db.tables.forEach(function (table) {
-        _this2.buildTableDom(tablesContainer, table, db);
+        _this3.buildTableDom(tablesContainer, table, db);
       });
       tablesContainer.style.display = isExpanded ? 'block' : 'none';
       dbRoot.appendChild(tablesContainer);
@@ -73,42 +91,39 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildExpandArrowDom",
     value: function buildExpandArrowDom(itemElem, tablesContainer, db, isExpanded) {
-      var _this3 = this;
+      var _this4 = this;
       var expandArrow = document.createElement('div');
       expandArrow.className = 'expand';
-      expandArrow.innerText = '>';
+      expandArrow.innerHTML = '&#9656;';
       expandArrow.style.cursor = 'pointer';
       if (isExpanded) {
         expandArrow.classList.add('expanded');
       }
       expandArrow.onclick = function () {
-        _this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
-
-        // eslint-disable-next-line no-param-reassign
-        tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
+        _this4.expandedItems[db.filename] = !_this4.expandedItems[db.filename];
+        tablesContainer.style.display = _this4.expandedItems[db.filename] ? 'block' : 'none';
         expandArrow.classList.toggle('expanded');
-        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
+        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this4.expandedItems));
       };
       itemElem.appendChild(expandArrow);
     }
   }, {
     key: "buildTableDom",
     value: function buildTableDom(tablesContainer, tableName, db) {
-      var _this4 = this,
+      var _this5 = this,
         _this$selectedItem,
         _this$selectedItem2;
       var tableItem = document.createElement('div');
-      tableItem.className = 'table';
+      this.setupCommonItemDom(tableItem);
+      tableItem.classList.add('table');
       tableItem.onclick = function () {
-        _this4.selectTable(tableItem, db);
+        _this5.selectTable(tableItem, db);
       };
       if (((_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.tableName) === tableName && ((_this$selectedItem2 = this.selectedItem) === null || _this$selectedItem2 === void 0 ? void 0 : _this$selectedItem2.dbName) === db.filename) {
         this.selectedItem.tableElem = tableItem;
         tableItem.classList.add('selected');
       }
-      var tableItemInner = document.createElement('div');
-      tableItemInner.innerText = tableName;
-      tableItem.appendChild(tableItemInner);
+      this.setupLabelDom(tableItem, tableName);
       tablesContainer.appendChild(tableItem);
     }
   }, {
@@ -125,13 +140,70 @@ var ExplorerView = /*#__PURE__*/function () {
           tableElem: tableEl
         };
         var databasePath = databaseItem.filename;
-        _viewerState.ViewerState.instance.setSelectedTable({
+        (0, _state.selectTable)({
           tableName: tableName,
           databasePath: databasePath
         });
       }
     }
+  }, {
+    key: "setupCommonItemDom",
+    value: function setupCommonItemDom(item) {
+      item.classList.add('item');
+      item.addEventListener('mouseenter', this.scheduleShowFullItemLabel);
+      item.addEventListener('mouseleave', this.hideFullItemLabel);
+    }
+  }, {
+    key: "setupLabelDom",
+    value: function setupLabelDom(item, text) {
+      var label = document.createElement('div');
+      label.className = 'label';
+      label.innerText = text;
+      item.appendChild(label);
+    }
+  }, {
+    key: "scheduleShowFullItemLabel",
+    value: function scheduleShowFullItemLabel(event) {
+      var _this6 = this;
+      var item = event.target;
+      var label = item.querySelector('.label');
+      if (label && label.offsetWidth < label.scrollWidth) {
+        clearTimeout(this.showFullItemLabelTimeout);
+        this.showFullItemLabelTimeout = window.setTimeout(function () {
+          _this6.showFullItemLabel(item);
+        }, 300);
+      }
+    }
+  }, {
+    key: "hideFullItemLabel",
+    value: function hideFullItemLabel() {
+      clearTimeout(this.showFullItemLabelTimeout);
+      this.fullItemLabelEl.style.display = 'none';
+    }
+  }, {
+    key: "showFullItemLabel",
+    value: function showFullItemLabel(item) {
+      var _item$getBoundingClie = item.getBoundingClientRect(),
+        left = _item$getBoundingClie.left,
+        top = _item$getBoundingClie.top;
+      this.fullItemLabelEl.style.display = 'block';
+      this.fullItemLabelEl.style.left = "".concat(left - 1, "px");
+      this.fullItemLabelEl.style.top = "".concat(top - 1, "px");
+      this.fullItemLabelEl.style.backgroundColor = window.getComputedStyle(item).backgroundColor;
+      var labelNode = item.querySelector('.label').childNodes[0];
+      if (labelNode.nodeType === Node.TEXT_NODE) {
+        this.fullItemLabelEl.innerText = labelNode.textContent || '';
+      }
+    }
   }]);
   return ExplorerView;
 }();
-exports.ExplorerView = ExplorerView;
+exports.ExplorerView = ExplorerView;
+var _explorerView;
+function createExplorerView(rootEl, viewEl) {
+  if (!_explorerView) {
+    _explorerView = new ExplorerView(rootEl, viewEl);
+  } else {
+    console.warn('ExplorerView is already created');
+  }
+}

package/dist/views/ExplorerView/styles.css

@@ -1,21 +1,36 @@
 #explorer_tree {
     padding: 8px;
     padding-left: 20px;
-    overflow-x: clip;
     overflow-y: auto;
     scrollbar-gutter: stable;
 }
 
+#explorer_tree .item {
+    height: 20px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: darkgray;
+}
+
+#explorer_tree .item > .label {
+    padding: 2px 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 #explorer_tree > .db {
     position: relative;
-    text-overflow: ellipsis;
-    overflow-y: clip;
 }
 
 #explorer_tree .expand {
     position: absolute;
-    top: 0;
-    left: -15px;
+    top: 1px;
+    left: -20px;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: all .1s ease-in;
 }
 
@@ -25,15 +40,19 @@
 
 #explorer_tree .table {
     margin-left: 20px;
-    height: 20px;
     cursor: pointer;
 }
 
-#explorer_tree .table > div {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-}
-
 #explorer_tree .table.selected {
     background-color: rgb(128, 128, 128);
+}
+
+#viewer #full_label {
+    position: absolute;
+    pointer-events: none;
+    z-index: 99999;
+    border: 1px solid gray;
+    background-color: darkgray;
+    padding: 2px 4px;
+    border-radius: 2px;
 }

package/dist/views/SqlLogView/SqlLogView.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initSqlLogView = initSqlLogView;
+exports.createSqlLogView = createSqlLogView;
+var Bus = _interopRequireWildcard(require("../../bus"));
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -12,10 +15,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var SqlLogView = /*#__PURE__*/function () {
-  function SqlLogView(rootEl, queryRunner) {
+  function SqlLogView(rootEl) {
     var _this = this;
     _classCallCheck(this, SqlLogView);
-    queryRunner.addListener(this.handleQueryRun.bind(this));
+    Bus.listen('query-run', function (query) {
+      if (query.errorMsg) {
+        _this.textArea.value += "Error while running previous query: ".concat(query.errorMsg, "\n");
+      } else {
+        _this.textArea.value += "".concat(query.sql, "\n");
+      }
+    });
     var container = document.createElement('div');
     container.id = 'sql_log_container';
     var header = document.createElement('div');
@@ -43,6 +52,6 @@ var SqlLogView = /*#__PURE__*/function () {
   }]);
   return SqlLogView;
 }();
-function initSqlLogView(rootEl, queryRunner) {
-  return new SqlLogView(rootEl, queryRunner);
+function createSqlLogView(rootEl) {
+  return new SqlLogView(rootEl);
 }

package/dist/views/TableView/TableView.js

@@ -4,10 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createTableView = createTableView;
+var _state = require("../../state");
+var Bus = _interopRequireWildcard(require("../../bus"));
 var _ListVirtualizer = require("../../ListVirtualizer");
-require("./styles.css");
+var _QueryRunner = require("../../QueryRunner");
 var _TableViewModel = require("./TableViewModel");
+require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -16,18 +21,33 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var TableView = /*#__PURE__*/function () {
-  function TableView(viewerElem, rootElement, queryRunner) {
+  function TableView(rootElement) {
     var _this = this;
     _classCallCheck(this, TableView);
     _defineProperty(this, "updateTimer", null);
-    this.viewerElem = viewerElem;
     this.rootElement = rootElement;
-    this.queryRunner = queryRunner;
     this.buildDomTemplate();
     this.model = new _TableViewModel.TableViewModel();
-    this.viewerElem.addEventListener('tableSelected', function (event) {
-      var selectedTable = event.detail;
-      _this.setTable(selectedTable.tableName);
+    Bus.listen('table-selected', function (table) {
+      _this.setTable(table.tableName);
+    });
+    Bus.listen('query-results', function (data) {
+      if ((data === null || data === void 0 ? void 0 : data.label) === 'tableViewColumns') {
+        _this.setTableColumns(data.result.resultRows || []);
+      } else if ((data === null || data === void 0 ? void 0 : data.label) === 'tableView') {
+        _this.setTableResults(data.result.resultRows || []);
+      }
+    });
+    Bus.listen('cell-edited', function (_ref) {
+      var cell = _ref.cell,
+        value = _ref.value;
+      var row = _this.model.rows.find(function (r) {
+        return r.rowid === cell.cellRowId;
+      });
+      if (row) {
+        row[cell.columnName] = value;
+        _this.virtualizer.update();
+      }
     });
     this.virtualizer = new _ListVirtualizer.ListVirtualizer({
       width: 500,
@@ -37,19 +57,38 @@ var TableView = /*#__PURE__*/function () {
       contentRoot: this.bodyRoot,
       container: this.container,
       generatorFn: function generatorFn(i) {
-        var _row$rowid;
         var row = _this.model.rows[i];
         if (!row) {
           return null;
         }
         var tr = document.createElement('tr');
-        var rowId = (_row$rowid = row.rowid) !== null && _row$rowid !== void 0 ? _row$rowid : (i + 1).toString();
+        var rowId = row.rowid;
+        tr.onclick = function (event) {
+          var _event$target;
+          var element = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.parentElement;
+          if (element !== null && element !== void 0 && element.id) {
+            var _selectedTable;
+            var value = row[element.id];
+            (0, _state.selectCell)({
+              value: value,
+              cellRowId: rowId,
+              columnName: element.id,
+              tableName: ((_selectedTable = (0, _state.selectedTable)()) === null || _selectedTable === void 0 ? void 0 : _selectedTable.tableName) || ''
+            });
+            if (_this.model.selectedCell) {
+              _this.model.selectedCell.classList.remove('selected');
+            }
+            element.classList.add('selected');
+            _this.model.selectedCell = element;
+          }
+        };
         Object.keys(row).forEach(function (columnKey) {
           if (columnKey === 'rowid') {
             return;
           }
           var value = row[columnKey];
           var td = document.createElement('td');
+          td.id = columnKey;
           var contentEl = document.createElement('div');
           if (value !== null) {
             contentEl.innerHTML = value;
@@ -57,20 +96,6 @@ var TableView = /*#__PURE__*/function () {
             contentEl.innerHTML = 'NULL';
             contentEl.className = 'nullValue';
           }
-          td.onclick = function () {
-            var _ViewerState$instance;
-            _viewerState.ViewerState.instance.setSelectedCell({
-              value: value,
-              cellRowId: rowId,
-              columnName: columnKey,
-              tableName: ((_ViewerState$instance = _viewerState.ViewerState.instance.selectedTable) === null || _ViewerState$instance === void 0 ? void 0 : _ViewerState$instance.tableName) || ''
-            });
-            if (_this.model.selectedCell) {
-              _this.model.selectedCell.classList.remove('selected');
-            }
-            td.classList.add('selected');
-            _this.model.selectedCell = td;
-          };
           td.appendChild(contentEl);
           tr.appendChild(td);
         });
@@ -123,6 +148,12 @@ var TableView = /*#__PURE__*/function () {
       };
       revertBtn.setAttribute('disabled', '');
       this.viewHeader.appendChild(revertBtn);
+      var dropTableBtn = document.createElement('button');
+      dropTableBtn.innerText = 'Delete table';
+      dropTableBtn.onclick = function () {
+        _this2.deleteTable();
+      };
+      this.viewHeader.appendChild(dropTableBtn);
       this.rootElement.appendChild(this.viewHeader);
       this.container = document.createElement('div');
       this.container.id = 'table_container';
@@ -133,9 +164,8 @@ var TableView = /*#__PURE__*/function () {
       this.bodyRoot = table.createTBody();
       this.container.appendChild(table);
       this.rootElement.appendChild(this.container);
-      this.viewerElem.addEventListener('dbHasChanges', function (event) {
-        var hasChanges = event.detail;
-        if (hasChanges) {
+      Bus.listen('db-dirtied', function (dirty) {
+        if (dirty) {
           saveBtn.removeAttribute('disabled');
           revertBtn.removeAttribute('disabled');
         } else {
@@ -158,23 +188,24 @@ var TableView = /*#__PURE__*/function () {
         columnHeader.innerHTML = column;
         var filterFieldCell = document.createElement('th');
         filterFieldCell.className = 'columnFilterCell';
-        var filterField = document.createElement('input');
+        var filterInput = document.createElement('input');
         if (_this3.model.fitlers[column]) {
-          filterField.value = _this3.model.fitlers[column];
+          filterInput.value = _this3.model.fitlers[column];
         }
-        filterField.onkeydown = function (event) {
+        filterInput.onkeydown = function (event) {
           if (event.key === 'Escape') {
-            filterField.value = '';
+            filterInput.value = '';
             _this3.model.fitlers[column] = '';
             _this3.scheduleUpdate();
           }
         };
-        filterField.oninput = function () {
-          _this3.model.fitlers[column] = filterField.value;
+        filterInput.oninput = function () {
+          _this3.model.fitlers[column] = filterInput.value;
           _this3.scheduleUpdate();
         };
-        filterField.placeholder = 'Filter';
-        filterFieldCell.appendChild(filterField);
+        filterInput.onmouseover = function () {};
+        filterInput.placeholder = 'Filter';
+        filterFieldCell.appendChild(filterInput);
         _this3.headerRow.appendChild(columnHeader);
         columnHeader.appendChild(filterFieldCell);
       });
@@ -195,12 +226,12 @@ var TableView = /*#__PURE__*/function () {
     value: function requestRows(refetchColumns) {
       if (refetchColumns) {
         var _sql = "PRAGMA table_info(".concat(this.model.tableName, ");");
-        this.queryRunner.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: _sql,
           parameters: []
         }, 'tableViewColumns');
       }
-      var sql = "SELECT \"_rowid_\",* FROM ".concat(this.model.tableName);
+      var sql = "SELECT \"_rowid_\" as rowid,* FROM ".concat(this.model.tableName);
       var filterSql = [];
       Object.entries(this.model.fitlers).forEach(function (filterEntry) {
         var column = filterEntry[0];
@@ -212,7 +243,7 @@ var TableView = /*#__PURE__*/function () {
       if (filterSql.length > 0) {
         sql += " WHERE ".concat(filterSql.join(' AND '), " ESCAPE '\\'");
       }
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       }, 'tableView');
@@ -221,22 +252,42 @@ var TableView = /*#__PURE__*/function () {
     key: "saveChanges",
     value: function saveChanges() {
       var sql = 'RELEASE "RESTOREPOINT";';
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       });
-      _viewerState.ViewerState.instance.setHasChanges(false);
+      (0, _state.setDirty)(false);
     }
   }, {
     key: "revertChanges",
     value: function revertChanges() {
       var sql = 'ROLLBACK TO SAVEPOINT "RESTOREPOINT";';
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       });
       this.requestRows(true);
-      _viewerState.ViewerState.instance.setHasChanges(false);
+      (0, _state.setDirty)(false);
+    }
+  }, {
+    key: "deleteTable",
+    value: function deleteTable() {
+      var table = (0, _state.selectedTable)();
+      if (!table) {
+        return;
+      }
+      if (!(0, _state.isDirty)()) {
+        _QueryRunner.queryRunner === null || _QueryRunner.queryRunner === void 0 ? void 0 : _QueryRunner.queryRunner.runQuery({
+          sql: 'SAVEPOINT "RESTOREPOINT"',
+          parameters: []
+        });
+      }
+      var sql = "DROP TABLE \"".concat(table.tableName, "\";");
+      _QueryRunner.queryRunner.runQuery({
+        sql: sql,
+        parameters: []
+      });
+      (0, _state.setDirty)(true);
     }
   }, {
     key: "scheduleUpdate",
@@ -253,4 +304,12 @@ var TableView = /*#__PURE__*/function () {
   }]);
   return TableView;
 }();
-exports.TableView = TableView;
+exports.TableView = TableView;
+var _tableView;
+function createTableView(rootEl) {
+  if (!_tableView) {
+    _tableView = new TableView(rootEl);
+  } else {
+    console.warn('TableView is already created');
+  }
+}

package/dist/views/TableView/styles.css

@@ -54,6 +54,10 @@
     padding-top: 5px;
 }
 
+#table_container .columnFilterCell input {
+    width: calc(100% - 8px);
+}
+
 #table_container td, #table_container .columnHeaderCell {
     border: 1px solid lightgray;
 }
@@ -66,14 +70,12 @@
 #table_container td div {
     height: 40px;
     box-sizing: border-box;
-    display: -webkit-box;
     padding: 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    line-height: 1.2em;
+    font-size: 15px;
+    line-height: 1.1em;
 }
 
 #table_container .nullValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
   "main": "dist/index.js",
   "scripts": {
@@ -52,4 +52,4 @@
   "peerDependencies": {
     "@sqlite.org/sqlite-wasm": "^3.x.x"
   }
-}
+}