datatables.net-columncontrol 1.0.6 → 1.1.0

package/js/dataTables.columnControl.mjs

@@ -1,4 +1,4 @@
-/*! ColumnControl 1.0.6
+/*! ColumnControl 1.1.0
  * Copyright (c) SpryMedia Ltd - datatables.net/license
  *
  * SVG icons: ISC License
@@ -62,6 +62,14 @@ var icons = {
     greater: wrap('<path d="m9 18 6-6-6-6"/>'),
     // Custom
     greaterOrEqual: wrap('<path d="m9 16 6-6-6-6"/><path d="m9 21 6-6"/>'),
+    // Custom
+    groupAdd: wrap('<path d="M6 21v-7.5m-3.549 3.75H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" fill="currentColor" rx="1.5"/>'),
+    // Custom
+    groupClear: wrap('<rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
+    // Custom
+    groupTop: wrap('<rect width="13.5" height="7.5" x="3" y="3" fill="currentColor" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
+    // Custom
+    groupRemove: wrap('<path d="M2.451 17.25H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
     less: wrap('<path d="m15 18-6-6 6-6"/>'),
     // Custom
     lessOrEqual: wrap('<path d="m15 16-6-6 6-6"/><path d="m15 21-6-6"/>'),
@@ -168,6 +176,7 @@ function attachDropdown(dropdown, dt, btn) {
     dropdown._shown = true;
     dtContainer.append(dropdown);
     positionDropdown(dropdown, dt, btn.element());
+    btn.element().setAttribute('aria-expanded', 'true');
     // Note that this could be called when the dropdown has already been removed from the document
     // via another dropdown being shown. This will clean up the event on the next body click.
     var removeDropdown = function (e) {
@@ -180,6 +189,12 @@ function attachDropdown(dropdown, dt, btn) {
         if (e.target === dropdown || dropdown.contains(e.target)) {
             return;
         }
+        // If there is currently a datetime picker visible on the page, assume that it belongs to
+        // this dropdown. Don't want to close while operating on the picker.
+        var datetime = document.querySelector('div.dt-datetime');
+        if (datetime && (e.target === datetime || datetime.contains(e.target))) {
+            return;
+        }
         dropdown._close();
         document.body.removeEventListener('click', removeDropdown);
     };
@@ -277,6 +292,7 @@ var dropdownContent = {
         dropdown._close = function () {
             dropdown.remove();
             dropdown._shown = false;
+            btn.element().setAttribute('aria-expanded', 'false');
         };
         dropdown.setAttribute('role', 'dialog');
         dropdown.setAttribute('aria-label', dt.i18n('columnControl.dropdown', config.text));
@@ -289,7 +305,7 @@ var dropdownContent = {
         });
         // A liner element allows more styling options, so the contents go inside this
         var liner = dropdown.childNodes[0];
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.dropdown', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -308,6 +324,7 @@ var dropdownContent = {
             }
         });
         btn.element().setAttribute('aria-haspopup', 'dialog');
+        btn.element().setAttribute('aria-expanded', 'false');
         // Add the content for the dropdown
         for (var i = 0; i < config.content.length; i++) {
             var content = this.resolve(config.content[i]);
@@ -344,18 +361,20 @@ var Button = /** @class */ (function () {
      * Create a new button for use in ColumnControl contents. Buttons created by this class can be
      * used at the top level in the header or in a dropdown.
      */
-    function Button(dt) {
+    function Button(dt, host) {
         this._s = {
             active: false,
             activeList: [],
             buttonClick: null,
             dt: null,
             enabled: true,
+            host: null,
             label: '',
             namespace: '',
             value: null
         };
         this._s.dt = dt;
+        this._s.host = host;
         this._dom = {
             button: createElement('button', Button.classes.container),
             dropdownDisplay: null,
@@ -433,9 +452,7 @@ var Button = /** @class */ (function () {
             this._dom.button.removeEventListener('click', this._s.buttonClick);
             this._dom.button.removeEventListener('keypress', this._s.buttonClick);
         }
-        if (this._s.namespace) {
-            this._s.dt.off('destroy.' + this._s.namespace);
-        }
+        this._s.host.destroyRemove(this);
     };
     /**
      * Relevant for drop downs only. When a button in a dropdown is hidden, we might want to
@@ -457,13 +474,10 @@ var Button = /** @class */ (function () {
     Button.prototype.element = function () {
         return this._dom.button;
     };
-    /**
-     * Set if the button should be enabled or not.
-     *
-     * @param enable Toggle the enable state
-     * @returns Button instance
-     */
     Button.prototype.enable = function (enable) {
+        if (enable === undefined) {
+            return this._s.enabled;
+        }
         this._dom.button.classList.toggle('dtcc-button_disabled', !enable);
         this._s.enabled = enable;
         return this;
@@ -500,10 +514,7 @@ var Button = /** @class */ (function () {
         this._s.namespace = 'dtcc-' + _namespace++;
         this._dom.button.addEventListener('click', buttonClick);
         this._dom.button.addEventListener('keypress', buttonClick);
-        // Use a unique namespace to be able to easily remove per button
-        this._s.dt.on('destroy.' + this._s.namespace, function () {
-            _this.destroy();
-        });
+        this._s.host.destroyAdd(this);
         return this;
     };
     /**
@@ -558,19 +569,22 @@ var CheckList = /** @class */ (function () {
     /**
      * Container for a list of buttons
      */
-    function CheckList(dt, opts) {
+    function CheckList(dt, host, opts) {
         var _this = this;
         this._s = {
             buttons: [],
             dt: null,
             handler: function () { },
+            host: null,
             search: ''
         };
         this._s.dt = dt;
+        this._s.host = host;
         this._dom = {
             buttons: createElement('div', 'dtcc-list-buttons'),
             container: createElement('div', CheckList.classes.container),
             controls: createElement('div', 'dtcc-list-controls'),
+            empty: createElement('div', 'dtcc-list-empty', dt.i18n('columnControl.list.empty', 'No options')),
             title: createElement('div', 'dtcc-list-title'),
             selectAll: createElement('button', 'dtcc-list-selectAll', dt.i18n('columnControl.list.all', 'Select all')),
             selectAllCount: createElement('span'),
@@ -582,6 +596,7 @@ var CheckList = /** @class */ (function () {
         dom.search.setAttribute('type', 'text');
         dom.container.append(dom.title);
         dom.container.append(dom.controls);
+        dom.container.append(dom.empty);
         dom.container.append(dom.buttons);
         if (opts.select) {
             dom.controls.append(dom.selectAll);
@@ -632,7 +647,7 @@ var CheckList = /** @class */ (function () {
         }
         var _loop_1 = function (i) {
             var option = options[i];
-            var btn = new Button(this_1._s.dt)
+            var btn = new Button(this_1._s.dt, this_1._s.host)
                 .active(option.active || false)
                 .handler(function (e) {
                 _this._s.handler(e, btn, _this._s.buttons, true);
@@ -641,7 +656,7 @@ var CheckList = /** @class */ (function () {
                 .icon(option.icon || '')
                 .text(option.label !== ''
                 ? option.label
-                : this_1._s.dt.i18n('columnControl.list.emptyOption', 'Empty'))
+                : this_1._s.dt.i18n('columnControl.list.empty', 'Empty'))
                 .value(option.value);
             if (option.label === '') {
                 btn.className('empty');
@@ -712,11 +727,11 @@ var CheckList = /** @class */ (function () {
      * @param dt DataTable instance
      * @param idx Column index
      */
-    CheckList.prototype.searchListener = function (dt, parent) {
+    CheckList.prototype.searchListener = function (dt) {
         var _this = this;
-        // Column control search clearing (column().ccSearchClear() method)
+        // Column control search clearing (column().columnControl.searchClear() method)
         dt.on('cc-search-clear', function (e, colIdx) {
-            if (colIdx === parent.idx()) {
+            if (colIdx === _this._s.host.idx()) {
                 _this.selectNone();
                 _this._s.handler(e, null, _this._s.buttons, false);
                 _this._s.search = '';
@@ -804,6 +819,8 @@ var CheckList = /** @class */ (function () {
                 el.appendChild(btn.element());
             }
         }
+        this._dom.empty.style.display = buttons.length === 0 ? 'block' : 'none';
+        el.style.display = buttons.length > 0 ? 'block' : 'none';
     };
     CheckList.classes = {
         container: 'dtcc-list',
@@ -822,7 +839,7 @@ var colVis = {
     },
     init: function (config) {
         var dt = this.dt();
-        var checkList = new CheckList(dt, {
+        var checkList = new CheckList(dt, this, {
             search: config.search,
             select: config.select
         })
@@ -905,7 +922,7 @@ var reorder = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.reorder', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -938,7 +955,7 @@ var reorderLeft = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.reorderLeft', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -968,7 +985,7 @@ var reorderRight = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.reorderRight', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1000,7 +1017,7 @@ var order = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.order', config.text))
             .icon('orderAsc')
             .className(config.className);
@@ -1032,7 +1049,7 @@ var orderAddAsc = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderAddAsc', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1058,7 +1075,7 @@ var orderAddDesc = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderAddDesc', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1084,7 +1101,7 @@ var orderAsc = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderAsc', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1114,7 +1131,7 @@ var orderClear = {
     },
     init: function (config) {
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderClear', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1140,7 +1157,7 @@ var orderDesc = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderDesc', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1171,7 +1188,7 @@ var orderRemove = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.orderRemove', config.text))
             .icon(config.icon)
             .className(config.className)
@@ -1205,6 +1222,190 @@ var orderStatus = {
     }
 };
 
+/**
+ * Add an item to the grouping structure
+ *
+ * @param dt DataTable API instance
+ * @param dataSrc Grouping data point to add
+ * @returns Grouping array
+ */
+function rowGroupAdd$1(dt, dataSrc) {
+    var applied = rowGroupApplied(dt);
+    var idx = applied.indexOf(dataSrc);
+    if (idx === -1) {
+        applied.push(dataSrc);
+        dt.rowGroup().dataSrc(applied);
+    }
+    return applied;
+}
+/**
+ * Always want an array return
+ *
+ * @param dt DataTable API instance
+ * @returns
+ */
+function rowGroupApplied(dt) {
+    var applied = dt.rowGroup().dataSrc();
+    return Array.isArray(applied)
+        ? applied
+        : [applied];
+}
+/**
+ * Remove all grouping
+ *
+ * @param dt DataTable API instance
+ */
+function rowGroupClear$1(dt) {
+    dt.rowGroup().dataSrc([]);
+}
+/**
+ * Remove an item from the grouping structure
+ *
+ * @param dt DataTable API instance
+ * @param dataSrc Grouping data point to remove
+ * @returns Grouping array
+ */
+function rowGroupRemove$1(dt, dataSrc) {
+    var applied = rowGroupApplied(dt);
+    var idx = applied.indexOf(dataSrc);
+    if (idx !== -1) {
+        applied.splice(idx, 1);
+        dt.rowGroup().dataSrc(applied);
+    }
+    return applied;
+}
+var rowGroup = {
+    defaults: {
+        className: 'rowGroup',
+        icon: 'groupTop',
+        order: true,
+        text: 'Group rows'
+    },
+    init: function (config) {
+        var _this = this;
+        var dt = this.dt();
+        var btn = new Button(dt, this)
+            .text(dt.i18n('columnControl.rowGroup', config.text))
+            .icon(config.icon)
+            .className(config.className)
+            .handler(function () {
+            var dataSrc = dt.column(_this.idx()).dataSrc();
+            if (btn.active()) {
+                // Grouping is active - remove
+                rowGroupRemove$1(dt, dataSrc);
+            }
+            else {
+                // No grouping by this column yet, set it
+                rowGroupClear$1(dt);
+                rowGroupAdd$1(dt, dataSrc);
+                if (config.order !== false) {
+                    dt.order([_this.idx(), 'asc']);
+                }
+            }
+            dt.draw();
+        });
+        // Show as active when grouping is applied
+        dt.on('rowgroup-datasrc', function () {
+            var applied = rowGroupApplied(dt);
+            var ours = dt.column(_this.idx()).dataSrc();
+            btn.active(applied.includes(ours));
+        });
+        return btn.element();
+    }
+};
+
+var rowGroupAdd = {
+    defaults: {
+        className: 'rowGroupAdd',
+        icon: 'groupAdd',
+        order: true,
+        text: 'Add to grouping'
+    },
+    init: function (config) {
+        var _this = this;
+        var dt = this.dt();
+        var btn = new Button(dt, this)
+            .text(dt.i18n('columnControl.rowGroup', config.text))
+            .icon(config.icon)
+            .className(config.className)
+            .handler(function () {
+            var dataSrc = dt.column(_this.idx()).dataSrc();
+            if (btn.enable()) {
+                // No grouping by this column yet, add it
+                rowGroupAdd$1(dt, dataSrc);
+            }
+            dt.draw();
+        });
+        // Show as active when grouping is applied
+        dt.on('rowgroup-datasrc', function () {
+            var applied = rowGroupApplied(dt);
+            var ours = dt.column(_this.idx()).dataSrc();
+            btn.enable(!applied.includes(ours));
+        });
+        return btn.element();
+    }
+};
+
+var rowGroupClear = {
+    defaults: {
+        className: 'rowGroupClear',
+        icon: 'groupClear',
+        text: 'Clear all grouping'
+    },
+    init: function (config) {
+        var dt = this.dt();
+        var btn = new Button(dt, this)
+            .text(dt.i18n('columnControl.rowGroup', config.text))
+            .icon(config.icon)
+            .className(config.className)
+            .handler(function () {
+            rowGroupClear$1(dt);
+            dt.draw();
+        });
+        // Show as active when any grouping is applied
+        dt.on('rowgroup-datasrc', function () {
+            btn.enable(rowGroupApplied(dt).length > 0);
+        });
+        // Default status
+        btn.enable(rowGroupApplied(dt).length > 0);
+        return btn.element();
+    }
+};
+
+var rowGroupRemove = {
+    defaults: {
+        className: 'rowGroupRemove',
+        icon: 'groupRemove',
+        order: true,
+        text: 'Remove from grouping'
+    },
+    init: function (config) {
+        var _this = this;
+        var dt = this.dt();
+        var btn = new Button(dt, this)
+            .text(dt.i18n('columnControl.rowGroup', config.text))
+            .icon(config.icon)
+            .className(config.className)
+            .handler(function () {
+            var dataSrc = dt.column(_this.idx()).dataSrc();
+            if (btn.enable()) {
+                // Grouping is active - remove
+                rowGroupRemove$1(dt, dataSrc);
+                dt.draw();
+            }
+        });
+        // Show as active when grouping is applied
+        dt.on('rowgroup-datasrc', function () {
+            var applied = rowGroupApplied(dt);
+            var ours = dt.column(_this.idx()).dataSrc();
+            btn.enable(applied.includes(ours));
+        });
+        // Default disabled
+        btn.enable(false);
+        return btn.element();
+    }
+};
+
 var SearchInput = /** @class */ (function () {
     /**
      * Create a container element, for consistent DOM structure and styling
@@ -1212,6 +1413,8 @@ var SearchInput = /** @class */ (function () {
     function SearchInput(dt, idx) {
         var _this = this;
         this._type = 'text';
+        this._sspTransform = null;
+        this._sspData = {};
         this._dt = dt;
         this._idx = idx;
         this._dom = {
@@ -1250,28 +1453,28 @@ var SearchInput = /** @class */ (function () {
         });
         // State handling - all components that use this class have the same state saving structure
         // so shared handling can be performed here.
-        dt.on('stateSaveParams', function (e, s, data) {
+        dt.on('stateSaveParams.DT', function (e, s, data) {
             if (!data.columnControl) {
                 data.columnControl = {};
             }
-            if (!data.columnControl[idx]) {
-                data.columnControl[idx] = {};
+            if (!data.columnControl[_this._idx]) {
+                data.columnControl[_this._idx] = {};
             }
-            data.columnControl[idx].searchInput = {
+            data.columnControl[_this._idx].searchInput = {
                 logic: dom.select.value,
                 type: _this._type,
                 value: dom.input.value
             };
         });
-        dt.on('stateLoaded', function (e, s, state) {
+        dt.on('stateLoaded.DT', function (e, s, state) {
             _this._stateLoad(state);
         });
         // Same as for ColumnControl - reassign a column index if needed.
-        dt.on('columns-reordered', function (e, details) {
+        dt.on('columns-reordered.DT', function (e, details) {
             _this._idx = dt.colReorder.transpose(originalIdx, 'fromOriginal');
         });
-        // Column control search clearing (column().ccSearchClear() method)
-        dt.on('cc-search-clear', function (e, colIdx) {
+        // Column control search clearing (column().columnControl.searchClear() method)
+        dt.on('cc-search-clear.DT', function (e, colIdx) {
             if (colIdx === _this._idx) {
                 // Don't want an automatic redraw on this event
                 _this._loadingState = true;
@@ -1279,6 +1482,23 @@ var SearchInput = /** @class */ (function () {
                 _this._loadingState = false;
             }
         });
+        // Data for server-side processing
+        if (dt.page.info().serverSide) {
+            dt.on('preXhr.DT', function (e, s, d) {
+                if (!d.columns[_this._idx].columnControl) {
+                    d.columns[_this._idx].columnControl = {};
+                }
+                var val = _this._dom.input.value;
+                if (_this._sspTransform) {
+                    val = _this._sspTransform(val);
+                }
+                d.columns[_this._idx].columnControl.search = Object.assign({
+                    value: val,
+                    logic: _this._dom.select.value,
+                    type: _this._type
+                }, _this._sspData);
+            });
+        }
     }
     /**
      * Add a class to the container
@@ -1401,6 +1621,26 @@ var SearchInput = /** @class */ (function () {
         this.runSearch();
         return this;
     };
+    /**
+     * Set a function to transform the input value before SSP data submission
+     *
+     * @param fn Transform function
+     * @returns Self for chaining
+     */
+    SearchInput.prototype.sspTransform = function (fn) {
+        this._sspTransform = fn;
+        return this;
+    };
+    /**
+     * Set extra information to be send to the server for server-side processing
+     *
+     * @param data Data object
+     * @returns Self for chaining
+     */
+    SearchInput.prototype.sspData = function (data) {
+        this._sspData = data;
+        return this;
+    };
     /**
      * Set the text that will be shown as the title for the control
      *
@@ -1463,6 +1703,8 @@ var SearchInput = /** @class */ (function () {
 var searchDateTime = {
     defaults: {
         clear: true,
+        format: '',
+        mask: '',
         placeholder: '',
         title: '',
         titleAttr: ''
@@ -1474,11 +1716,14 @@ var searchDateTime = {
         var luxon = DataTable.use('luxon');
         var dt = this.dt();
         var i18nBase = 'columnControl.search.datetime.';
-        var displayFormat = '';
+        var pickerFormat = '';
+        var dataSrcFormat = '';
         var dateTime;
         var searchInput = new SearchInput(dt, this.idx())
             .type('date')
             .addClass('dtcc-searchDateTime')
+            .sspTransform(function (val) { return toISO(val, pickerFormat, moment, luxon); })
+            .sspData({ mask: config.mask })
             .clearable(config.clear)
             .placeholder(config.placeholder)
             .title(config.title)
@@ -1492,10 +1737,18 @@ var searchDateTime = {
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
         ])
             .search(function (searchType, searchTerm, loadingState) {
+            // When SSP, don't apply a filter here, SearchInput will add to the submit data
+            if (dt.page.info().serverSide) {
+                if (!loadingState) {
+                    dt.draw();
+                }
+                return;
+            }
+            var mask = config.mask;
             var column = dt.column(_this.idx());
             var search = searchTerm === ''
                 ? ''
-                : dateToNum(dateTime && fromPicker ? dateTime.val() : searchTerm.trim(), displayFormat, moment, luxon);
+                : dateToNum(dateTime && fromPicker ? dateTime.val() : searchTerm.trim(), pickerFormat, moment, luxon, mask);
             if (searchType === 'empty') {
                 column.search.fixed('dtcc', function (haystack) { return !haystack; });
             }
@@ -1514,16 +1767,24 @@ var searchDateTime = {
                 // Use a function for matching - weak typing
                 // Note that the haystack in the search function is the rendered date - it
                 // might need to be converted back to a date
-                column.search.fixed('dtcc', function (haystack) { return dateToNum(haystack, displayFormat, moment, luxon) == search; });
+                column.search.fixed('dtcc', function (haystack) {
+                    return dateToNum(haystack, dataSrcFormat, moment, luxon, mask) == search;
+                });
             }
             else if (searchType === 'notEqual') {
-                column.search.fixed('dtcc', function (haystack) { return dateToNum(haystack, displayFormat, moment, luxon) != search; });
+                column.search.fixed('dtcc', function (haystack) {
+                    return dateToNum(haystack, dataSrcFormat, moment, luxon, mask) != search;
+                });
             }
             else if (searchType === 'greater') {
-                column.search.fixed('dtcc', function (haystack) { return dateToNum(haystack, displayFormat, moment, luxon) > search; });
+                column.search.fixed('dtcc', function (haystack) {
+                    return dateToNum(haystack, dataSrcFormat, moment, luxon, mask) > search;
+                });
             }
             else if (searchType === 'less') {
-                column.search.fixed('dtcc', function (haystack) { return dateToNum(haystack, displayFormat, moment, luxon) < search; });
+                column.search.fixed('dtcc', function (haystack) {
+                    return dateToNum(haystack, dataSrcFormat, moment, luxon, mask) < search;
+                });
             }
             // If in a dropdown, set the parent levels as active
             if (config._parents) {
@@ -1538,10 +1799,13 @@ var searchDateTime = {
         // Once data has been loaded we can run DateTime with the specified format
         dt.ready(function () {
             var DateTime = DataTable.use('datetime');
-            displayFormat = getFormat(dt, _this.idx());
+            dataSrcFormat = getFormat(dt, _this.idx());
+            pickerFormat = config.format
+                ? config.format
+                : dataSrcFormat;
             if (DateTime) {
                 dateTime = new DateTime(searchInput.input(), {
-                    format: displayFormat,
+                    format: pickerFormat,
                     i18n: dt.settings()[0].oLanguage.datetime, // could be undefined
                     onChange: function () {
                         fromPicker = true;
@@ -1568,18 +1832,36 @@ function getFormat(dt, column) {
         return 'YYYY-MM-DD';
     }
     else if (type === 'datetime') {
-        // If no format was specified in the DT type, then we need to use Moment / Luxon's default
-        // locale formatting.
-        var moment = DataTable.use('moment');
-        var luxon = DataTable.use('luxon');
-        if (moment) {
-            return moment().creationData().locale._longDateFormat.L;
-        }
-        if (luxon) {
-            // Luxon doesn't appear to provide a way to let us get the default locale formatting
-            // string, so we need to attempt to decode it.
-            return luxon.DateTime.fromISO('1999-08-07')
-                .toLocaleString()
+        // If no format was specified in the DT type, a Javascript native toLocaleDateString
+        // was used. Need to work out what that format is in Moment or Luxon. We need to pass
+        // a known value though the renderer and work out the format
+        var renderer = dt.settings()[0].aoColumns[column].mRender;
+        var resultPm = renderer('1999-08-07T23:05:04Z', 'display');
+        var resultAm = renderer('1999-08-07T03:05:04Z', 'display');
+        var leadingZero = resultAm.includes('03');
+        // What formatter are we using?
+        if (DataTable.use('moment')) {
+            return resultPm
+                .replace('23', leadingZero ? 'HH' : 'H')
+                .replace('11', leadingZero ? 'hh' : 'h')
+                .replace('05', 'mm')
+                .replace('04', 'ss')
+                .replace('PM', 'A')
+                .replace('pm', 'a')
+                .replace('07', 'DD')
+                .replace('7', 'D')
+                .replace('08', 'MM')
+                .replace('8', 'M')
+                .replace('1999', 'YYYY')
+                .replace('99', 'YY');
+        }
+        else if (DataTable.use('luxon')) {
+            return resultPm
+                .replace('23', leadingZero ? 'HH' : 'H')
+                .replace('11', leadingZero ? 'hh' : 'h')
+                .replace('05', 'mm')
+                .replace('04', 'ss')
+                .replace('PM', 'a')
                 .replace('07', 'dd')
                 .replace('7', 'd')
                 .replace('08', 'MM')
@@ -1587,6 +1869,13 @@ function getFormat(dt, column) {
                 .replace('1999', 'yyyy')
                 .replace('99', 'yy');
         }
+        else if (resultPm.includes('23') && resultPm.includes('1999')) {
+            return 'YYYY-MM-DD hh:mm:ss';
+        }
+        else if (resultPm.includes('23')) {
+            return 'hh:mm:ss';
+        }
+        // fall through to final return
     }
     else if (type.includes('datetime-')) {
         // Column was specified with a particular display format - we can extract that format from
@@ -1610,19 +1899,75 @@ function getFormat(dt, column) {
  * @param luxon Luxon object, if it is available
  * @returns Time stamp - milliseconds
  */
-function dateToNum(input, srcFormat, moment, luxon) {
+function dateToNum(input, srcFormat, moment, luxon, mask) {
+    var d;
     if (input === '') {
         return '';
     }
-    else if (input instanceof Date) {
-        return input.getTime();
+    if (input instanceof Date) {
+        d = input;
     }
     else if (srcFormat !== 'YYYY-MM-DD' && (moment || luxon)) {
-        return moment
+        d = new Date(moment
             ? moment(input, srcFormat).unix() * 1000
-            : luxon.DateTime.fromFormat(input, srcFormat).toMillis();
+            : luxon.DateTime.fromFormat(input, srcFormat).toMillis());
+    }
+    else {
+        // new Date() with `/` separators will treat the input as local time, but with `-` it will
+        // treat it as UTC. We want UTC so do a replacement
+        d = new Date(input.replace(/\//g, '-'));
     }
-    return new Date(input).getTime();
+    if (mask) {
+        if (!mask.includes('YYYY')) {
+            d.setFullYear(1970);
+        }
+        if (!mask.includes('MM')) {
+            d.setUTCMonth(0);
+        }
+        if (!mask.includes('DD')) {
+            d.setUTCDate(1);
+        }
+        if (!mask.includes('hh')) {
+            d.setUTCHours(0);
+        }
+        if (!mask.includes('mm')) {
+            d.setUTCMinutes(0);
+        }
+        if (!mask.includes('ss')) {
+            // This will match milliseconds as well, but that's fine, you won't match mS but not S
+            d.setUTCSeconds(0);
+        }
+        if (!mask.includes('sss')) {
+            d.setUTCMilliseconds(0);
+        }
+    }
+    return d.getTime();
+}
+/**
+ * Convert an input string to an ISO formatted date
+ *
+ * @param input Input value
+ * @param srcFormat String format of the input
+ * @param moment Moment instance, if it is available
+ * @param luxon Luxon object, if it is available
+ * @returns Value in ISO
+ */
+function toISO(input, srcFormat, moment, luxon) {
+    if (input === '') {
+        return '';
+    }
+    else if (srcFormat !== 'YYYY-MM-DD' && moment) {
+        // TODO Does it have a time component?
+        return moment.utc(input, srcFormat).toISOString();
+    }
+    else if (srcFormat !== 'YYYY-MM-DD' && luxon) {
+        // TODO Does it have a time component?
+        return luxon.DateTime.fromFormat(input, srcFormat).toISO();
+    }
+    // new Date() with `/` separators will treat the input as local time, but with `-` it will
+    // treat it as UTC. We want UTC so do a replacement
+    input = input.replace(/\//g, '-');
+    return input;
 }
 
 /** Set the options to show in the list */
@@ -1688,17 +2033,19 @@ function reloadOptions(dt, config, idx, checkList, loadedValues) {
         options = jsonOptions;
     }
     else if (json && config.ajaxOnly) {
-        // Ajax only options - need to hide the search list
-        checkList.element().style.display = 'none';
-        // Check if the parent buttons should be hidden as well (they will be if there
-        // is no visible content in them)
-        if (config._parents) {
-            config._parents.forEach(function (btn) { return btn.checkDisplay(); });
+        if (config.hidable) {
+            // Ajax only options - need to hide the search list
+            checkList.element().style.display = 'none';
+            // Check if the parent buttons should be hidden as well (they will be if there
+            // is no visible content in them)
+            if (config._parents) {
+                config._parents.forEach(function (btn) { return btn.checkDisplay(); });
+            }
         }
         // No point in doing any further processing here
         return;
     }
-    else {
+    else if (!dt.page.info().serverSide) {
         // Either no ajax object (i.e. not an Ajax table), or no matching ajax options
         // for this column - get the values for the column, taking into account
         // orthogonal rendering
@@ -1706,11 +2053,14 @@ function reloadOptions(dt, config, idx, checkList, loadedValues) {
         var rows = dt.rows({ order: idx }).indexes().toArray();
         var settings = dt.settings()[0];
         for (var i = 0; i < rows.length; i++) {
-            var filter = settings.fastData(rows[i], idx, 'filter').toString();
+            var raw = settings.fastData(rows[i], idx, 'filter');
+            var filter = raw !== null && raw !== undefined
+                ? raw.toString()
+                : '';
             if (!found[filter]) {
                 found[filter] = true;
                 options.push({
-                    label: settings.fastData(rows[i], idx, 'display'),
+                    label: settings.fastData(rows[i], idx, config.orthogonal),
                     value: filter
                 });
             }
@@ -1727,7 +2077,9 @@ var searchList = {
     defaults: {
         ajaxOnly: true,
         className: 'searchList',
+        hidable: true,
         options: null,
+        orthogonal: 'display',
         search: true,
         select: true,
         title: ''
@@ -1739,6 +2091,10 @@ var searchList = {
         // The search can be applied from a stored start at start up before the options are
         // available. It can also be applied by user input, so it is generalised into this function.
         var applySearch = function (values) {
+            // When SSP, don't do any client-side filtering
+            if (dt.page.info().serverSide) {
+                return;
+            }
             var col = dt.column(_this.idx());
             if (!values) {
                 return;
@@ -1758,11 +2114,11 @@ var searchList = {
                 config._parents.forEach(function (btn) { return btn.activeList(_this.unique(), !!values.length); });
             }
         };
-        var checkList = new CheckList(dt, {
+        var checkList = new CheckList(dt, this, {
             search: config.search,
             select: config.select
         })
-            .searchListener(dt, this)
+            .searchListener(dt)
             .title(dt
             .i18n('columnControl.searchList', config.title)
             .replace('[title]', dt.column(this.idx()).title()))
@@ -1782,14 +2138,24 @@ var searchList = {
             dt.ready(function () {
                 reloadOptions(dt, config, _this.idx(), checkList, loadedValues);
             });
+            // Xhr event listener for updates of options
+            dt.on('xhr', function (e, s, json) {
+                // Need to wait for the draw to complete so the table has the latest data
+                dt.one('draw', function () {
+                    reloadOptions(dt, config, _this.idx(), checkList, loadedValues);
+                });
+            });
         }
-        // Xhr event listener for updates of options
-        dt.on('xhr', function (e, s, json) {
-            // Need to wait for the draw to complete so the table has the latest data
-            dt.one('draw', function () {
-                reloadOptions(dt, config, _this.idx(), checkList, loadedValues);
+        // Data for server-side processing
+        if (dt.page.info().serverSide) {
+            dt.on('preXhr.DT', function (e, s, d) {
+                if (!d.columns[_this.idx()].columnControl) {
+                    d.columns[_this.idx()].columnControl = {};
+                }
+                // We need the indexes in the HTTP parameter names (for .NET), so use an object.
+                d.columns[_this.idx()].columnControl.list = Object.assign({}, checkList.values());
             });
-        });
+        }
         // Unlike the SearchInput based search contents, CheckList does not handle state saving
         // (since the mechanism for column visibility is different), so state saving is handled
         // here.
@@ -1797,6 +2163,7 @@ var searchList = {
             var values = getState(_this.idx(), state);
             if (values) {
                 checkList.values(values);
+                applySearch(values);
             }
         });
         dt.on('stateSaveParams', function (e, s, data) {
@@ -1814,6 +2181,14 @@ var searchList = {
                 ? checkList.values()
                 : loadedValues;
         });
+        dt.settings()[0].aoColumns[this.idx()].columnControlSearchList = function (options) {
+            if (options === 'refresh') {
+                reloadOptions(dt, config, _this.idx(), checkList, null);
+            }
+            else {
+                setOptions(checkList, options);
+            }
+        };
         loadedValues = getState(this.idx(), dt.state.loaded());
         applySearch(loadedValues);
         return checkList.element();
@@ -1852,6 +2227,13 @@ var searchNumber = {
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
         ])
             .search(function (searchType, searchTerm, loadingState) {
+            // When SSP, don't apply a filter here, SearchInput will add to the submit data
+            if (dt.page.info().serverSide) {
+                if (!loadingState) {
+                    dt.draw();
+                }
+                return;
+            }
             var column = dt.column(_this.idx());
             if (searchType === 'empty') {
                 column.search.fixed('dtcc', function (haystack) { return !haystack; });
@@ -1949,6 +2331,13 @@ var searchText = {
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
         ])
             .search(function (searchType, searchTerm, loadingState) {
+            // When SSP, don't apply a filter here, SearchInput will add to the submit data
+            if (dt.page.info().serverSide) {
+                if (!loadingState) {
+                    dt.draw();
+                }
+                return;
+            }
             var column = dt.column(_this.idx());
             searchTerm = searchTerm.toLowerCase();
             if (searchType === 'empty') {
@@ -2055,7 +2444,7 @@ var search = {
     }
 };
 
-var searchClear = {
+var searchClear$1 = {
     defaults: {
         className: 'searchClear',
         icon: 'searchClear',
@@ -2064,12 +2453,12 @@ var searchClear = {
     init: function (config) {
         var _this = this;
         var dt = this.dt();
-        var btn = new Button(dt)
+        var btn = new Button(dt, this)
             .text(dt.i18n('columnControl.searchClear', config.text))
             .icon(config.icon)
             .className(config.className)
             .handler(function () {
-            dt.column(_this.idx()).ccSearchClear().draw();
+            dt.column(_this.idx()).columnControl.searchClear().draw();
         })
             .enable(false);
         dt.on('draw', function () {
@@ -2089,7 +2478,9 @@ var searchDropdown = {
         className: 'searchDropdown',
         clear: true,
         columns: '',
+        hidable: true,
         options: null,
+        orthogonal: 'display',
         placeholder: '',
         search: true,
         select: true,
@@ -2146,6 +2537,10 @@ var contentTypes = {
     reorder: reorder,
     reorderLeft: reorderLeft,
     reorderRight: reorderRight,
+    rowGroup: rowGroup,
+    rowGroupAdd: rowGroupAdd,
+    rowGroupClear: rowGroupClear,
+    rowGroupRemove: rowGroupRemove,
     order: order,
     orderAddAsc: orderAddAsc,
     orderAddDesc: orderAddDesc,
@@ -2155,7 +2550,7 @@ var contentTypes = {
     orderRemove: orderRemove,
     orderStatus: orderStatus,
     search: search,
-    searchClear: searchClear,
+    searchClear: searchClear$1,
     searchDropdown: searchDropdown,
     searchDateTime: searchDateTime,
     searchList: searchList,
@@ -2185,7 +2580,8 @@ var ColumnControl = /** @class */ (function () {
         this._c = {};
         this._s = {
             columnIdx: null,
-            unique: null
+            unique: null,
+            toDestroy: []
         };
         this._dt = dt;
         this._s.columnIdx = columnIdx;
@@ -2211,10 +2607,33 @@ var ColumnControl = /** @class */ (function () {
                 _this._dom.wrapper.appendChild(el);
             });
             dt.on('destroy', function () {
+                _this._s.toDestroy.slice().forEach(function (el) {
+                    el.destroy();
+                });
                 _this._dom.wrapper.remove();
             });
         }
     }
+    /**
+     * Add a component to the destroy list. This is so there is a single destroy event handler,
+     * which is much better for performance.
+     *
+     * @param component Any instance with a `destroy` method
+     */
+    ColumnControl.prototype.destroyAdd = function (component) {
+        this._s.toDestroy.push(component);
+    };
+    /**
+     * Remove an instance from the destroy list (it has been destroyed itself)
+     *
+     * @param component Any instance with a `destroy` method
+     */
+    ColumnControl.prototype.destroyRemove = function (component) {
+        var idx = this._s.toDestroy.indexOf(component);
+        if (idx !== -1) {
+            this._s.toDestroy.splice(idx, 1);
+        }
+    };
     /**
      * Get the DataTables API instance that hosts this instance of ColumnControl
      *
@@ -2325,7 +2744,7 @@ var ColumnControl = /** @class */ (function () {
     /** SVG icons that can be used by the content plugins */
     ColumnControl.icons = icons;
     /** Version */
-    ColumnControl.version = '1.0.6';
+    ColumnControl.version = '1.1.0';
     return ColumnControl;
 }());
 
@@ -2354,7 +2773,9 @@ $(document).on('i18n.dt', function (e, settings) {
         settings.titleRow = 0;
     }
     identifyTargets(baseTargets, tableInit);
-    identifyTargets(baseTargets, defaultInit);
+    if (ColumnControl.defaults.content) {
+        identifyTargets(baseTargets, defaultInit);
+    }
     api.columns().every(function (i) {
         var columnInit = this.init().columnControl;
         identifyTargets(baseTargets, columnInit);
@@ -2374,7 +2795,10 @@ $(document).on('preInit.dt', function (e, settings) {
     var defaultInit = ColumnControl.defaults;
     var baseTargets = [];
     identifyTargets(baseTargets, tableInit);
-    identifyTargets(baseTargets, defaultInit);
+    // Only add the default target if there is actually content for it
+    if (ColumnControl.defaults.content) {
+        identifyTargets(baseTargets, defaultInit);
+    }
     api.columns().every(function (i) {
         var columnInit = this.init().columnControl;
         var targets = identifyTargets(baseTargets.slice(), columnInit);
@@ -2392,12 +2816,20 @@ $(document).on('preInit.dt', function (e, settings) {
         }
     });
 });
-DataTable.Api.registerPlural('columns().ccSearchClear()', 'column().ccSearchClear()', function () {
+function searchClear() {
     var ctx = this;
     return this.iterator('column', function (settings, idx) {
         // Note that the listeners for this will not redraw the table.
         ctx.trigger('cc-search-clear', [idx]);
     });
+}
+DataTable.Api.registerPlural('columns().columnControl.searchClear()', 'column().columnControl.searchClear()', searchClear);
+// Legacy (1.0.x)) - was never documented, but was mentioned in the forum
+DataTable.Api.registerPlural('columns().ccSearchClear()', 'column().ccSearchClear()', searchClear);
+DataTable.Api.registerPlural('columns().columnControl.searchList()', 'column().columnControl.searchList()', function (options) {
+    return this.iterator('column', function (settings, idx) {
+        settings.aoColumns[idx].columnControlSearchList(options);
+    });
 });
 DataTable.ext.buttons.ccSearchClear = {
     text: function (dt) {
@@ -2405,7 +2837,7 @@ DataTable.ext.buttons.ccSearchClear = {
     },
     init: function (dt, node, config) {
         var _this = this;
-        dt.on('draw', function () {
+        dt.on('draw.DT', function () {
             var enabled = false;
             var glob = !!dt.search();
             // No point in wasting clock cycles if we already know it will be enabled
@@ -2422,7 +2854,7 @@ DataTable.ext.buttons.ccSearchClear = {
     },
     action: function (e, dt, node, config) {
         dt.search('');
-        dt.columns().ccSearchClear();
+        dt.columns().columnControl.searchClear();
         dt.draw();
     }
 };
@@ -2558,12 +2990,18 @@ function identifyTargets(targets, input) {
         }
     }
     if (Array.isArray(input)) {
-        // Array of options, or an array of content
-        input.forEach(function (item) {
-            add(typeof item === 'object' && item.target !== undefined
-                ? item.target
-                : ColumnControl.defaults.target);
-        });
+        if (input.length === 0) {
+            // Empty array - assume it is empty content
+            add(ColumnControl.defaults.target);
+        }
+        else {
+            // Array of options, or an array of content
+            input.forEach(function (item) {
+                add(typeof item === 'object' && item.target !== undefined
+                    ? item.target
+                    : ColumnControl.defaults.target);
+            });
+        }
     }
     else if (typeof input === 'object') {
         // Full options defined: { target: x, content: [] }
@@ -2578,9 +3016,7 @@ function identifyTargets(targets, input) {
  * @returns true if it is a config object
  */
 function isIConfig(item) {
-    return typeof item === 'object' && item.target !== undefined
-        ? true
-        : false;
+    return typeof item === 'object' && item.target !== undefined ? true : false;
 }
 /**
  * Determine if an array contains only content items or not