diff --git a/src/body-renderer.js b/src/body-renderer.js
index f4b70a2..72a4c2e 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -87,6 +87,14 @@ export default class BodyRenderer {
this.clusterize.append(data);
}
+ showToastMessage(message) {
+ this.instance.toastMessage.innerHTML = `${message}`;
+ }
+
+ clearToastMessage() {
+ this.instance.toastMessage.innerHTML = '';
+ }
+
getDataForClusterize(rows) {
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
}
diff --git a/src/datatable.js b/src/datatable.js
index 33bad20..595b45d 100644
--- a/src/datatable.js
+++ b/src/datatable.js
@@ -52,23 +52,25 @@ class DataTable {
prepareDom() {
this.wrapper.innerHTML = `
-
-
-
-
-
- ${this.options.freezeMessage}
-
-
-
- `;
+
+
+
+
+
+ ${this.options.freezeMessage}
+
+
+
+
+ `;
this.datatableWrapper = $('.data-table', this.wrapper);
this.header = $('.data-table-header', this.wrapper);
this.bodyScrollable = $('.body-scrollable', this.wrapper);
this.freezeContainer = $('.freeze-container', this.wrapper);
+ this.toastMessage = $('.toast-message', this.wrapper);
}
refresh(data) {
@@ -108,6 +110,14 @@ class DataTable {
this.style.setDimensions();
}
+ showToastMessage(message) {
+ this.bodyRenderer.showToastMessage(message);
+ }
+
+ clearToastMessage() {
+ this.bodyRenderer.clearToastMessage();
+ }
+
getColumn(colIndex) {
return this.datamanager.getColumn(colIndex);
}
diff --git a/src/rowmanager.js b/src/rowmanager.js
index 86d3367..6c1a3c7 100644
--- a/src/rowmanager.js
+++ b/src/rowmanager.js
@@ -12,7 +12,8 @@ export default class RowManager {
linkProperties(this, this.instance, [
'options',
'wrapper',
- 'bodyScrollable'
+ 'bodyScrollable',
+ 'bodyRenderer'
]);
this.bindEvents();
@@ -71,16 +72,15 @@ export default class RowManager {
return [];
}
- return this.checkMap
- .map((c, rowIndex) => {
- if (c) {
- return rowIndex;
- }
- return null;
- })
- .filter(c => {
- return c !== null || c !== undefined;
- });
+ let out = [];
+ for (let rowIndex in this.checkMap) {
+ const checked = this.checkMap[rowIndex];
+ if (checked === 1) {
+ out.push(rowIndex)
+ }
+ }
+
+ return out;
}
highlightCheckedRows() {
@@ -101,6 +101,7 @@ export default class RowManager {
});
// highlight row
this.highlightRow(rowIndex, toggle);
+ this.showCheckStatus();
}
checkAll(toggle) {
@@ -119,6 +120,16 @@ export default class RowManager {
});
// highlight all
this.highlightAll(toggle);
+ this.showCheckStatus();
+ }
+
+ showCheckStatus() {
+ const checkedRows = this.getCheckedRows();
+ if (checkedRows.length > 0) {
+ this.bodyRenderer.showToastMessage(checkedRows.length + ' rows selected');
+ } else {
+ this.bodyRenderer.clearToastMessage();
+ }
}
highlightRow(rowIndex, toggle = true) {
diff --git a/src/style.css b/src/style.css
index f084e82..d4be1ca 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,6 +7,7 @@
--light-bg: #f5f7fa;
--light-red: #FD8B8B;
--text-color: #000000;
+ --text-light: #dfe2e5;
--spacer-1: 0.25rem;
--spacer-2: 0.5rem;
@@ -41,7 +42,6 @@
}
/* styling */
- width: 100%;
position: relative;
overflow: auto;
@@ -78,19 +78,24 @@
}
}
- .trash-container {
- position: absolute;
- bottom: 0;
- left: 30%;
- right: 30%;
- height: 70px;
- background: palevioletred;
- opacity: 0.5;
- }
-
.hide {
display: none;
}
+
+ .toast-message {
+ position: absolute;
+ bottom: var(--spacer-3);
+ left: 50%;
+ transform: translateX(-50%);
+
+ span {
+ display: inline-block;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: var(--text-light);
+ border-radius: 3px;
+ padding: var(--spacer-2) var(--spacer-3);
+ }
+ }
}
.body-scrollable {
@@ -272,4 +277,4 @@
body.data-table-resize {
cursor: col-resize;
-}
\ No newline at end of file
+}