melondtable 1.18.5 → 1.20.7

package/LICENSE

@@ -0,0 +1,2 @@
+The MIT License
+

package/dist/melondtable.cjs.js

@@ -1985,6 +1985,7 @@ class DataManager {
                 sortable: false,
                 focusable: false,
                 dropdown: false,
+                sticky: true,
                 width: 32
             };
             this.columns.push(cell);
@@ -1993,16 +1994,14 @@ class DataManager {
         if (this.options.serialNoColumn && !this.hasColumnById('_rowIndex')) {
             let cell = {
                 id: '_rowIndex',
-                content: '',
+                content: this.options.serialNoColumnLabel || '',
                 align: 'center',
                 editable: false,
-                resizable: false,
+                resizable: true,
                 focusable: false,
-                dropdown: false
+                dropdown: false,
+                sticky: true
             };
-            if (this.options.data.length > 1000) {
-                cell.resizable = true;
-            }
             this.columns.push(cell);
         }
     }
@@ -2586,6 +2585,7 @@ class CellManager {
         this.bindKeyboardSelection();
         this.bindCopyCellContents();
         this.bindMouseEvents();
+        this.bindWheelEvents();
         this.bindTreeEvents();
     }
 
@@ -2634,6 +2634,7 @@ class CellManager {
             }
 
             this.focusCell($cell);
+            sessionStorage.setItem('dt-last-nav-method', 'key');
             return true;
         };
 
@@ -2742,6 +2743,12 @@ class CellManager {
         $.on(this.bodyScrollable, 'mousemove', '.dt-cell', throttle$1(selectArea, 50));
     }
 
+    bindWheelEvents() {
+        $.on(this.bodyScrollable, 'wheel', (e) => {
+            sessionStorage.setItem('dt-last-nav-method', 'scroll');
+        });
+    }
+
     bindTreeEvents() {
         $.on(this.bodyScrollable, 'click', '.dt-tree-node__toggle', (e, $toggle) => {
             const $cell = $.closest('.dt-cell', $toggle);
@@ -2866,11 +2873,13 @@ class CellManager {
         // this function is called after hyperlist renders the rows after scroll,
         // focusCell calls clearSelection which resets the area selection
         // so a flag to skip it
-        // we also skip DOM focus and scroll to cell
-        // because it fights with the user scroll
+        // we skip scroll to cell
+        // and also skip DOM focus (if user is scrolling) because it fights with the user scroll
+        const skipDOMFocus = sessionStorage.getItem('dt-last-nav-method') !== 'key';
+
         this.focusCell($cell, {
+            skipDOMFocus,
             skipClearSelection: 1,
-            skipDOMFocus: 1,
             skipScrollToCell: 1
         });
     }
@@ -2886,7 +2895,6 @@ class CellManager {
 
     _selectArea($cell1, $cell2) {
         if ($cell1 === $cell2) return false;
-
         const cells = this.getCellsInRange($cell1, $cell2);
         if (!cells) return false;
 
@@ -2913,9 +2921,17 @@ class CellManager {
             const cell2 = $.data($cell2);
 
             colIndex1 = +cell1.colIndex;
-            rowIndex1 = +cell1.rowIndex;
             colIndex2 = +cell2.colIndex;
-            rowIndex2 = +cell2.rowIndex;
+
+            if (this.columnmanager.sortState) {
+                this.sortedColumn = true;
+                rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex, 10));
+                rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex, 10));
+            } else {
+                rowIndex1 = +cell1.rowIndex;
+                rowIndex2 = +cell2.rowIndex;
+            }
+
         }
 
         if (rowIndex1 > rowIndex2) {
@@ -2947,7 +2963,11 @@ class CellManager {
             }
             colIndex = colIndex1;
         });
-
+        if (this.columnmanager.sortState) {
+            cells.forEach(selectedCells => {
+                selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]];
+            });
+        }
         return cells;
     }
 
@@ -3256,6 +3276,7 @@ class CellManager {
         }
 
         this.focusCell($cell);
+        sessionStorage.setItem('dt-last-nav-method', 'key');
         return true;
     }
 
@@ -3354,8 +3375,15 @@ class CellManager {
         });
 
         const row = this.datamanager.getRow(rowIndex);
+        const column = cell.column || this.datamanager.getColumn(colIndex) || {};
 
         const isBodyCell = !(isHeader || isFilter || isTotalRow);
+        const isSticky = Boolean(column.sticky);
+        const stickyColumns = this.datamanager.getColumns().filter(col => col.sticky);
+        const lastStickyColumn = stickyColumns[stickyColumns.length - 1];
+        const isLastStickyColumn = isSticky &&
+            lastStickyColumn &&
+            lastStickyColumn.colIndex === colIndex;
 
         const className = [
             'dt-cell',
@@ -3365,7 +3393,10 @@ class CellManager {
             isHeader ? 'dt-cell--header' : '',
             isHeader ? `dt-cell--header-${colIndex}` : '',
             isFilter ? 'dt-cell--filter' : '',
-            isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : ''
+            isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
+            isSticky ? 'dt-cell--sticky' : '',
+            isSticky && !isBodyCell ? 'dt-cell--sticky-top' : '',
+            isLastStickyColumn ? 'dt-cell--sticky-last' : ''
         ].join(' ');
 
         return `
@@ -3563,7 +3594,7 @@ class ColumnManager {
         });
 
         $.on(this.$dropdownList, 'click', '.dt-dropdown__list-item', (e, $item) => {
-            if (!this._dropdownActiveColIndex) return;
+            if (this._dropdownActiveColIndex == null) return;
             const dropdownItems = this.options.headerDropdown;
             const { index } = $.data($item);
             const colIndex = this._dropdownActiveColIndex;
@@ -3578,6 +3609,11 @@ class ColumnManager {
             _this.hideDropdown();
         }
 
+        this.stickDropdownIndex = this.options.headerDropdown
+            .findIndex(item => item.stickyAction === 'stick');
+        this.unstickDropdownIndex = this.options.headerDropdown
+            .findIndex(item => item.stickyAction === 'unstick');
+
         this.hideDropdown();
     }
 
@@ -3594,6 +3630,7 @@ class ColumnManager {
         const $cell = $.closest('.dt-cell', e.target);
         const { colIndex } = $.data($cell);
         this._dropdownActiveColIndex = colIndex;
+        this.updateStickyDropdownItems(this.getColumn(colIndex));
     }
 
     hideDropdown() {
@@ -3737,9 +3774,29 @@ class ColumnManager {
             .then(() => this.instance.unfreeze())
             .then(() => {
                 this.fireEvent('onSortColumn', this.getColumn(colIndex));
+                this.setSortState();
             });
     }
 
+    saveSorting(colIndex) {
+        let currentColumn = this.getColumn(colIndex);
+        let saveSorting = {
+            [currentColumn.name]: {
+                colIndex: colIndex,
+                sortOrder: currentColumn.sortOrder
+            }
+        };
+        this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
+        localStorage.setItem(this.sortingKey, JSON.stringify(saveSorting));
+    }
+    setSortState(sortOrder) {
+        if (sortOrder === 'none') {
+            this.sortState = false;
+        } else {
+            this.sortState = true;
+        }
+    }
+
     removeColumn(colIndex) {
         const removedCol = this.getColumn(colIndex);
         this.instance.freeze();
@@ -3754,6 +3811,20 @@ class ColumnManager {
             });
     }
 
+    setColumnSticky(colIndex, sticky) {
+        const column = this.getColumn(colIndex);
+        if (!column || column.sticky === sticky) {
+            return;
+        }
+
+        this.instance.freeze();
+        this.datamanager.updateColumn(colIndex, { sticky });
+
+        this.refreshHeader();
+        this.rowmanager.refreshRows()
+            .then(() => this.instance.unfreeze());
+    }
+
     switchColumn(oldIndex, newIndex) {
         this.instance.freeze();
         this.datamanager.switchColumn(oldIndex, newIndex)
@@ -3838,6 +3909,19 @@ class ColumnManager {
         }
     }
 
+    applySavedSortOrder() {
+
+        let key = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
+        let sortingConfig = JSON.parse(localStorage.getItem(key));
+        if (sortingConfig) {
+            const columnsToSort = Object.values(sortingConfig);
+            for (let column of columnsToSort) {
+                this.sortColumn(column.colIndex, column.sortOrder);
+                this.sortState = true;
+            }
+        }
+    }
+
     sortRows(colIndex, sortOrder) {
         return this.datamanager.sortRows(colIndex, sortOrder);
     }
@@ -3913,14 +3997,39 @@ class ColumnManager {
 
     getDropdownListHTML() {
         const { headerDropdown: dropdownItems } = this.options;
-
         return `
-            <div class="dt-dropdown__list">
-            ${dropdownItems.map((d, i) => `
-                <div class="dt-dropdown__list-item" data-index="${i}">${d.label}</div>
-            `).join('')}
+        <div class="dt-dropdown__list">
+        ${dropdownItems.map((d, i) => `
+            <div 
+                class="dt-dropdown__list-item${d.display ? ' dt-hidden' : ''}" 
+                data-index="${i}"
+            >
+                ${d.label}
             </div>
-        `;
+        `).join('')}
+        </div>
+    `;
+    }
+
+    toggleDropdownItem(index) {
+        $('.dt-dropdown__list', this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden');
+    }
+
+    updateStickyDropdownItems(column) {
+        if (!column) return;
+        if (this.stickDropdownIndex === -1 || this.unstickDropdownIndex === -1) return;
+
+        const stickItem = this.$dropdownList.children[this.stickDropdownIndex];
+        const unstickItem = this.$dropdownList.children[this.unstickDropdownIndex];
+        if (!(stickItem && unstickItem)) return;
+
+        if (column.sticky) {
+            stickItem.classList.add('dt-hidden');
+            unstickItem.classList.remove('dt-hidden');
+        } else {
+            stickItem.classList.remove('dt-hidden');
+            unstickItem.classList.add('dt-hidden');
+        }
     }
 }
 
@@ -4789,12 +4898,26 @@ class BodyRenderer {
     }
 
     render() {
-        const rows = this.datamanager.getRowsForView();
+        const rows = this.getRowsToRender();
         this.renderRows(rows);
         // setDimensions requires atleast 1 row to exist in dom
         this.instance.setDimensions();
     }
 
+    // Keep the current tree expand/collapse state on a full re-render
+    getRowsToRender() {
+        const rows = this.datamanager.getRowsForView();
+        let closedIndent = null;
+        return rows.filter(row => {
+            const { indent, isTreeNodeClose } = row.meta;
+            if (closedIndent !== null && indent > closedIndent) {
+                return false;
+            }
+            closedIndent = isTreeNodeClose ? indent : null;
+            return true;
+        });
+    }
+
     renderFooter() {
         if (!this.options.showTotalRow) return;
 
@@ -4924,6 +5047,7 @@ class Style {
 
     bindScrollHeader() {
         this._settingHeaderPosition = false;
+        this.updateStickyTopPositions(0);
 
         $.on(this.bodyScrollable, 'scroll', (e) => {
             if (this._settingHeaderPosition) return;
@@ -4931,7 +5055,8 @@ class Style {
             this._settingHeaderPosition = true;
 
             requestAnimationFrame(() => {
-                const left = -e.target.scrollLeft;
+                const scrollLeft = e.target.scrollLeft;
+                const left = -scrollLeft;
 
                 $.style(this.header, {
                     transform: `translateX(${left}px)`
@@ -4939,6 +5064,7 @@ class Style {
                 $.style(this.footer, {
                     transform: `translateX(${left}px)`
                 });
+                this.updateStickyTopPositions(scrollLeft);
                 this._settingHeaderPosition = false;
                 if (this.instance.noData) {
                     $.style($('.no-data-message'), {
@@ -5036,6 +5162,8 @@ class Style {
         this.setupColumnWidth();
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.setStickyColumnStyle();
+        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
         this.setBodyStyle();
     }
 
@@ -5193,6 +5321,8 @@ class Style {
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);
             });
+        this.setStickyColumnStyle();
+        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
     }
 
     setBodyStyle() {
@@ -5254,6 +5384,56 @@ class Style {
         return $(`.dt-cell--col-${colIndex}`, this.header);
     }
 
+    setStickyColumnStyle() {
+        if (!this.datamanager || !this.datamanager.getColumns) return;
+
+        const stickySelectors = [];
+        let stickyOffset = 0;
+        let normalOffset = 0;
+
+        this.datamanager.getColumns().forEach((column) => {
+            const $headerCell = this.getColumnHeaderElement(column.colIndex);
+            const renderedWidth = $headerCell ? $headerCell.offsetWidth : column.width;
+
+            if (column.sticky) {
+                const selector = `.dt-cell--col-${column.colIndex}.dt-cell--sticky`;
+                const style = {
+                    left: `${stickyOffset}px`
+                };
+
+                column.stickyLeft = stickyOffset;
+                column.stickyScrollTrigger = normalOffset - stickyOffset;
+                column.renderedWidth = renderedWidth;
+                this.setStyle(selector, style);
+                stickySelectors.push(selector);
+                stickyOffset += renderedWidth;
+            }
+            normalOffset += renderedWidth;
+        });
+
+        const staleSelectors = (this._stickySelectors || [])
+            .filter(selector => !stickySelectors.includes(selector));
+
+        staleSelectors.forEach(selector => this.removeStyle(selector));
+        this._stickySelectors = stickySelectors;
+    }
+
+    updateStickyTopPositions(scrollLeft) {
+        if (!this.datamanager || !this.datamanager.getColumns) return;
+
+        const stickyColumns = this.datamanager.getColumns().filter(column => column.sticky);
+
+        stickyColumns.forEach((column) => {
+            const trigger = Math.max(0, column.stickyScrollTrigger || 0);
+            const compensation = Math.max(0, scrollLeft - trigger);
+            const cells = $.each(`.dt-cell--col-${column.colIndex}.dt-cell--sticky-top`, this.wrapper) || [];
+
+            $.style(cells, {
+                transform: compensation ? `translateX(${compensation}px)` : ''
+            });
+        });
+    }
+
     getRowIndexColumnWidth() {
         const rowCount = this.datamanager.getRowCount();
         const padding = 22;
@@ -5317,7 +5497,11 @@ class Keyboard {
     }
 }
 
+var Freeze = "Freeze";
+var Unfreeze = "Unfreeze";
 var en = {
+	Freeze: Freeze,
+	Unfreeze: Unfreeze,
 	"Sort Ascending": "Sort Ascending",
 	"Sort Descending": "Sort Descending",
 	"Reset sorting": "Reset sorting",
@@ -5327,7 +5511,11 @@ var en = {
 	"{count} rows selected": {"1":"{count} row selected","default":"{count} rows selected"}
 };
 
+var Freeze$1 = "Bevriezen";
+var Unfreeze$1 = "Ontdooien";
 var de = {
+	Freeze: Freeze$1,
+	Unfreeze: Unfreeze$1,
 	"Sort Ascending": "Aufsteigend sortieren",
 	"Sort Descending": "Absteigend sortieren",
 	"Reset sorting": "Sortierung zurücksetzen",
@@ -5337,7 +5525,11 @@ var de = {
 	"{count} rows selected": {"1":"{count} Zeile ausgewählt","default":"{count} Zeilen ausgewählt"}
 };
 
+var Freeze$2 = "Geler";
+var Unfreeze$2 = "Dégeler";
 var fr = {
+	Freeze: Freeze$2,
+	Unfreeze: Unfreeze$2,
 	"Sort Ascending": "Trier par ordre croissant",
 	"Sort Descending": "Trier par ordre décroissant",
 	"Reset sorting": "Réinitialiser le tri",
@@ -5347,7 +5539,11 @@ var fr = {
 	"{count} rows selected": {"1":"{count} ligne sélectionnée","default":"{count} lignes sélectionnées"}
 };
 
+var Freeze$3 = "Congelare";
+var Unfreeze$3 = "Dégeler";
 var it = {
+	Freeze: Freeze$3,
+	Unfreeze: Unfreeze$3,
 	"Sort Ascending": "Ordinamento ascendente",
 	"Sort Descending": "Ordinamento decrescente",
 	"Reset sorting": "Azzeramento ordinamento",
@@ -5629,6 +5825,22 @@ function getDefaultOptions(instance) {
                 action: function (column) {
                     this.removeColumn(column.colIndex);
                 }
+            },
+            {
+                label: instance.translate('Freeze'),
+                stickyAction: 'stick',
+                display: 'hidden',
+                action: function (column) {
+                    this.setColumnSticky(column.colIndex, true);
+                }
+            },
+            {
+                label: instance.translate('Unfreeze'),
+                stickyAction: 'unstick',
+                display: 'hidden',
+                action: function (column) {
+                    this.setColumnSticky(column.colIndex, false);
+                }
             }
         ],
         events: {
@@ -5653,6 +5865,7 @@ function getDefaultOptions(instance) {
         freezeMessage: '',
         getEditor: null,
         serialNoColumn: true,
+        serialNoColumnLabel: '',
         checkboxColumn: false,
         clusterize: true,
         logs: false,
@@ -5703,6 +5916,10 @@ class DataTable {
         if (this.options.data) {
             this.refresh();
             this.columnmanager.applyDefaultSortOrder();
+            if (this.options.saveSorting) {
+                this.setupSaveSorting();
+                this.columnmanager.applySavedSortOrder();
+            }
         }
     }
 
@@ -5872,11 +6089,18 @@ class DataTable {
     sortColumn(colIndex, sortOrder) {
         this.columnmanager.sortColumn(colIndex, sortOrder);
     }
+    saveSorting(colIndex, nextSortOrder) {
+        this.columnmanager.saveSorting(colIndex, nextSortOrder);
+    }
 
     removeColumn(colIndex) {
         this.columnmanager.removeColumn(colIndex);
     }
 
+    setColumnSticky(colIndex, sticky) {
+        this.columnmanager.setColumnSticky(colIndex, sticky);
+    }
+
     scrollToLastColumn() {
         this.datatableWrapper.scrollLeft = 9999;
     }
@@ -5925,6 +6149,25 @@ class DataTable {
     translate(str, args) {
         return this.translationManager.translate(str, args);
     }
+    setupSaveSorting() {
+        // add options in default headerdropdown
+        let action = {
+            label: this.translate('Save Sorting'),
+            action: function (column) {
+                this.saveSorting(column.colIndex, column.sotOrder);
+            },
+            display: 'hidden'
+        };
+        this.options.headerDropdown.push(action);
+        this.columnmanager.bindDropdown();
+        // add events for onSortColumn
+        this.on('onSortColumn', function (column) {
+            this.columnmanager.toggleDropdownItem(4);
+            if (column.sortOrder === 'none') {
+                localStorage.removeItem(this.columnmanager.sortingKey);
+            }
+        });
+    }
 }
 
 DataTable.instances = 0;
@@ -5937,7 +6180,7 @@ var unpkg = "dist/melondtable.min.js";
 var jsdelivr = "dist/melondtable.min.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c && NODE_ENV=production rollup -c","dev":"rollup -c -w","cy:server":"http-server -p 8989","cy:open":"cypress open","cy:run":"cypress run","test":"start-server-and-test cy:server http://localhost:8989 cy:run","test-local":"start-server-and-test cy:server http://localhost:8989 cy:open","travis-deploy-once":"travis-deploy-once","semantic-release":"semantic-release","lint":"eslint src","lint-and-build":"yarn lint && yarn build","commit":"npx git-cz"};
 var files = ["dist","src"];
-var devDependencies = {"autoprefixer":"^9.0.0","chai":"3.5.0","cypress":"^9.2.0","cz-conventional-changelog":"^2.1.0","deepmerge":"^2.0.1","eslint":"^5.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","http-server":"^0.11.1","mocha":"3.3.0","postcss-custom-properties":"^7.0.0","postcss-nested":"^3.0.0","rollup":"^0.59.4","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","semantic-release":"^17.1.1","start-server-and-test":"^1.4.1","travis-deploy-once":"^5.0.1"};
+var devDependencies = {"autoprefixer":"^9.0.0","chai":"3.5.0","cypress":"^9.2.0","cz-conventional-changelog":"^2.1.0","deepmerge":"^2.0.1","eslint":"^5.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","http-server":"^0.11.1","mocha":"3.3.0","postcss-custom-properties":"^7.0.0","postcss-nested":"^3.0.0","rollup":"^0.59.4","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","semantic-release":"^25.0.3","start-server-and-test":"^1.4.1","travis-deploy-once":"^5.0.1"};
 var repository = {"type":"git","url":"https://github.com/amonak/melondtable.git"};
 var keywords = ["datatable","data","grid","table"];
 var author = "Alphamonak Solutions";

package/dist/melondtable.css

@@ -19,6 +19,7 @@
     --dt-header-cell-bg: #fff;
     --dt-header-cell-bg: var(--dt-cell-bg);
     --dt-no-data-message-width: 90px;
+    --dt-scroll-left: 0px;
 }
 
 .datatable *, .datatable *::after, .datatable *::before {
@@ -79,7 +80,7 @@
         display: none;
     }
 
-.dt-row:last-child:not(.dt-row-filter) {
+.dt-row:last-child:not(.dt-row-filter) .dt-cell {
         border-bottom: 1px solid #d1d8dd;
         border-bottom: 1px solid var(--dt-border-color);
     }
@@ -88,7 +89,7 @@
     border: 1px solid #d1d8dd;
     border: 1px solid var(--dt-border-color);
     border-bottom: none;
-    border-right: none;
+    border-left: none;
     position: relative;
     outline: none;
     padding: 0;
@@ -106,8 +107,14 @@
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
+
 }
 
+.dt-cell:first-child {
+        border-left: 1px solid #d1d8dd;
+        border-left: 1px solid var(--dt-border-color);
+    }
+
 .dt-cell__content {
         padding: 0.5rem;
         padding: var(--dt-spacer-2);
@@ -198,6 +205,29 @@
         border-right: 1px solid var(--dt-border-color);
     }
 
+.dt-cell--sticky {
+        position: -webkit-sticky;
+        position: sticky;
+        left: 0;
+        z-index: 1;
+    }
+
+.dt-cell--sticky-top {
+        z-index: 4;
+        will-change: transform;
+    }
+
+.dt-cell--sticky-last::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -1px;
+        width: 8px;
+        height: 100%;
+        pointer-events: none;
+        box-shadow: 4px 0 6px -4px rgba(15, 23, 42, 0.2);
+    }
+
 .datatable[dir=rtl] .dt-cell__resize-handle {
     right: unset;
     left: -3px;
@@ -235,7 +265,7 @@
 .dt-dropdown__list {
         position: fixed;
         min-width: 8rem;
-        z-index: 1;
+        z-index: 10;
         cursor: pointer;
         background-color: #fff;
         background-color: var(--dt-cell-bg);
@@ -279,6 +309,7 @@
     left: 50%;
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
+    z-index: 5;
 }
 
 .dt-toast__message {
@@ -335,6 +366,10 @@
     left: -999em;
 }
 
+.dt-hidden{
+    display: none;
+}
+
 body.dt-resize {
     cursor: col-resize;
 }