aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html4
-rw-r--r--package-lock.json21
-rw-r--r--package.json5
-rw-r--r--renderer.js35
-rw-r--r--styles/style.css1
-rw-r--r--styles/table-style.css71
6 files changed, 65 insertions, 72 deletions
diff --git a/index.html b/index.html
index 9206134..0de4296 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css"></link>
<link rel="stylesheet" href="node_modules/codemirror/theme/dracula.css"></link>
<link rel="stylesheet" href="node_modules/codemirror/addon/hint/show-hint.css"></link>
- <link rel="stylesheet" href="node_modules/datatables/media/css/jquery.dataTables.css"></link>
+ <link rel="stylesheet" href="node_modules/jquery.tabulator/dist/css/tabulator.css"></link>
<link rel="stylesheet" type="text/css" href="./styles/style.css"></link>
<link rel="stylesheet" type="text/css" href="./styles/table-style.css"></link>
</head>
@@ -22,7 +22,7 @@
<div id="editor" class="editor-row split-row"></div>
<div class="results-row split-row">
- <table id="result-table" class="table stripe compact order-column cell-border" width="100%"></table>
+ <div id="result-table"></div>
<div id="result-error"></div>
</div>
</div>
diff --git a/package-lock.json b/package-lock.json
index 80dc65c..04cec7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -253,15 +253,6 @@
"assert-plus": "1.0.0"
}
},
- "datatables": {
- "version": "1.10.13",
- "resolved": "https://registry.npmjs.org/datatables/-/datatables-1.10.13.tgz",
- "integrity": "sha1-m7Lexvfc8CBJoA5PDn0/4AnDk0Y=",
- "dev": true,
- "requires": {
- "jquery": "3.3.1"
- }
- },
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -619,6 +610,18 @@
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"dev": true
},
+ "jquery-ui": {
+ "version": "1.12.1",
+ "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.12.1.tgz",
+ "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE=",
+ "dev": true
+ },
+ "jquery.tabulator": {
+ "version": "3.4.2",
+ "resolved": "https://registry.npmjs.org/jquery.tabulator/-/jquery.tabulator-3.4.2.tgz",
+ "integrity": "sha1-vaOL466lEdajggsWycNnkWPplLg=",
+ "dev": true
+ },
"js-string-escape": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
diff --git a/package.json b/package.json
index 8a1c25e..ae1958c 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,11 @@
"license": "GPL-3.0",
"devDependencies": {
"codemirror": "5.33.0",
- "datatables": "1.10.13",
"electron": "~1.7.8",
"jquery": "3.3.1",
"pg": "7.4.1",
- "split.js": "1.3.5"
+ "split.js": "1.3.5",
+ "jquery-ui": "1.12.1",
+ "jquery.tabulator": "3.4.2"
}
}
diff --git a/renderer.js b/renderer.js
index 8cd7701..9fe1be7 100644
--- a/renderer.js
+++ b/renderer.js
@@ -1,9 +1,10 @@
"use strict";
const { ipcRenderer } = require('electron');
-const $ = require("jquery");
+const $ = window.jQuery = require("jquery");
+require("jquery-ui");
+require("jquery.tabulator");
const cm = require("codemirror");
-require("datatables")(window, $);
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint.js")
require("codemirror/addon/hint/sql-hint.js")
@@ -48,8 +49,6 @@ function runQuery() {
let query = findQuery();
- _destroyDataTable();
-
ipcRenderer.send("queryExecutor.runQuery", query);
}
@@ -155,22 +154,20 @@ function _stopExecTimer() {
function handleError(err) {
_stopExecTimer();
_destroyDataTable();
- $("#result-error").text("Error (" + err.code + ") - " + err.message);
+ $("#result-error").removeAttr("style").text("Error (" + err.code + ") - " + err.message);
_setExecutionStatusIndicator("ERROR");
$("#execution-time").text("failed after " + execElapsedTime + " ms");
}
function handleResult(results) {
_stopExecTimer();
- $("#result-error").empty();
+ _clearErrors();
_destroyDataTable();
- dataTable = _resultTable().DataTable({
- paging: false,
- order: [],
- dom: "tr",
- data: results.rows,
- columns: _mapColumnProperties(results)
+ dataTable = $("#result-table").tabulator({
+ height: "100%",
+ columns: _mapColumnProperties(results),
+ data: results.rows
});
_setExecutionStatusIndicator("OK");
@@ -180,8 +177,8 @@ function handleResult(results) {
function _mapColumnProperties(results) {
return results.fields.map((column) => {
return {
- "data": column.name,
- "title": column.name
+ field: column.name,
+ title: column.name
};
});
}
@@ -205,13 +202,17 @@ function _setExecutionStatusIndicator(status) {
}
function _destroyDataTable() {
- if (dataTable) {
- dataTable.destroy();
- _resultTable().empty();
+ if(dataTable) {
+ _resultTable().tabulator("destroy");
+ _resultTable().removeAttr("style").empty();
dataTable = undefined;
}
}
+function _clearErrors() {
+ $("#result-error").attr("style", "display:none;").empty();
+}
+
function _onKeyUp(event) {
if (event.ctrlKey && event.keyCode == 13) {
runQuery();
diff --git a/styles/style.css b/styles/style.css
index b24351a..7ae5727 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -51,6 +51,7 @@ body {
flex-direction: row;
font-family: monospace;
align-items: center;
+ height: 20px;
}
.flex-wrapper .row .split-row {
diff --git a/styles/table-style.css b/styles/table-style.css
index 7bf1222..ddceb38 100644
--- a/styles/table-style.css
+++ b/styles/table-style.css
@@ -1,43 +1,30 @@
-table.dataTable thead .sorting {
- background-image: url("../images/sort_both.png");
-}
-table.dataTable thead .sorting_asc {
- background-image: url("../images/sort_asc.png");
-}
-table.dataTable thead .sorting_desc {
- background-image: url("../images/sort_desc.png");
-}
-table.dataTable thead .sorting_asc_disabled {
- background-image: url("../images/sort_asc_disabled.png");
-}
-table.dataTable thead .sorting_desc_disabled {
- background-image: url("../images/sort_desc_disabled.png");
-}
-table.dataTable tbody tr {
- background-color: #282a36;
-}
-table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
- background-color: #474A5E;
-}
-table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
- background-color: #262834;
-}
-table.dataTable.order-column tbody tr > .sorting_1,
-table.dataTable.order-column tbody tr > .sorting_2,
-table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
-table.dataTable.display tbody tr > .sorting_2,
-table.dataTable.display tbody tr > .sorting_3 {
- background-color: #4F4837;
-}
-table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
- background-color: #897E63;
-}
-table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
- background-color: #897E63;
-}
-table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
- background-color: #4F4837;
-}
-table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
- background-color: #242631;
+.tabulator {
+ border: none;
+ background-color: #282a36;
+}
+
+.tabulator .tabulator-header {
+ background-color: #474A5E;
+ color: whitesmoke;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+ background-color: #474A5E;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+ background-color: #6D8A88;
+}
+
+.tabulator .tabulator-row {
+ background-color: #282a36;
+ color: whitesmoke;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+ background-color: #474A5E;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+ background-color: #6D8A88;
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-10 16:50:18 +0000