secure-sharing/SecureSharing/wwwroot/plugins/datatables-responsive/js/dataTables.responsive.js

/*! Responsive 2.2.7
 * 2014-2021 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     Responsive
 * @description Responsive tables plug-in for DataTables
 * @version     2.2.7
 * @file        dataTables.responsive.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2014-2021 SpryMedia Ltd.
 *
 * This source file is free software, available under the following license:
 *   MIT license - http://datatables.net/license/mit
 *
 * This source file is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 *
 * For details please refer to: http://www.datatables.net
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'datatables.net'], function ($) {
            return factory($, window, document);
        });
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = function (root, $) {
            if (!root) {
                root = window;
            }

            if (!$ || !$.fn.dataTable) {
                $ = require('datatables.net')(root, $).$;
            }

            return factory($, root, root.document);
        };
    } else {
        // Browser
        factory(jQuery, window, document);
    }
}(function ($, window, document, undefined) {
    'use strict';
    var DataTable = $.fn.dataTable;


    /**
     * Responsive is a plug-in for the DataTables library that makes use of
     * DataTables' ability to change the visibility of columns, changing the
     * visibility of columns so the displayed columns fit into the table container.
     * The end result is that complex tables will be dynamically adjusted to fit
     * into the viewport, be it on a desktop, tablet or mobile browser.
     *
     * Responsive for DataTables has two modes of operation, which can used
     * individually or combined:
     *
     * * Class name based control - columns assigned class names that match the
     *   breakpoint logic can be shown / hidden as required for each breakpoint.
     * * Automatic control - columns are automatically hidden when there is no
     *   room left to display them. Columns removed from the right.
     *
     * In additional to column visibility control, Responsive also has built into
     * options to use DataTables' child row display to show / hide the information
     * from the table that has been hidden. There are also two modes of operation
     * for this child row display:
     *
     * * Inline - when the control element that the user can use to show / hide
     *   child rows is displayed inside the first column of the table.
     * * Column - where a whole column is dedicated to be the show / hide control.
     *
     * Initialisation of Responsive is performed by:
     *
     * * Adding the class `responsive` or `dt-responsive` to the table. In this case
     *   Responsive will automatically be initialised with the default configuration
     *   options when the DataTable is created.
     * * Using the `responsive` option in the DataTables configuration options. This
     *   can also be used to specify the configuration options, or simply set to
     *   `true` to use the defaults.
     *
     *  @class
     *  @param {object} settings DataTables settings object for the host table
     *  @param {object} [opts] Configuration options
     *  @requires jQuery 1.7+
     *  @requires DataTables 1.10.3+
     *
     *  @example
     *      $('#example').DataTable( {
     *        responsive: true
     *      } );
     *    } );
     */
    var Responsive = function (settings, opts) {
        // Sanity check that we are using DataTables 1.10 or newer
        if (!DataTable.versionCheck || !DataTable.versionCheck('1.10.10')) {
            throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
        }

        this.s = {
            dt: new DataTable.Api(settings),
            columns: [],
            current: []
        };

        // Check if responsive has already been initialised on this table
        if (this.s.dt.settings()[0].responsive) {
            return;
        }

        // details is an object, but for simplicity the user can give it as a string
        // or a boolean
        if (opts && typeof opts.details === 'string') {
            opts.details = {type: opts.details};
        } else if (opts && opts.details === false) {
            opts.details = {type: false};
        } else if (opts && opts.details === true) {
            opts.details = {type: 'inline'};
        }

        this.c = $.extend(true, {}, Responsive.defaults, DataTable.defaults.responsive, opts);
        settings.responsive = this;
        this._constructor();
    };

    $.extend(Responsive.prototype, {
        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
         * Constructor
         */

        /**
         * Initialise the Responsive instance
         *
         * @private
         */
        _constructor: function () {
            var that = this;
            var dt = this.s.dt;
            var dtPrivateSettings = dt.settings()[0];
            var oldWindowWidth = $(window).innerWidth();

            dt.settings()[0]._responsive = this;

            // Use DataTables' throttle function to avoid processor thrashing on
            // resize
            $(window).on('resize.dtr orientationchange.dtr', DataTable.util.throttle(function () {
                // iOS has a bug whereby resize can fire when only scrolling
                // See: http://stackoverflow.com/questions/8898412
                var width = $(window).innerWidth();

                if (width !== oldWindowWidth) {
                    that._resize();
                    oldWindowWidth = width;
                }
            }));

            // DataTables doesn't currently trigger an event when a row is added, so
            // we need to hook into its private API to enforce the hidden rows when
            // new data is added
            dtPrivateSettings.oApi._fnCallbackReg(dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
                if ($.inArray(false, that.s.current) !== -1) {
                    $('>td, >th', tr).each(function (i) {
                        var idx = dt.column.index('toData', i);

                        if (that.s.current[idx] === false) {
                            $(this).css('display', 'none');
                        }
                    });
                }
            });

            // Destroy event handler
            dt.on('destroy.dtr', function () {
                dt.off('.dtr');
                $(dt.table().body()).off('.dtr');
                $(window).off('resize.dtr orientationchange.dtr');
                dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');

                // Restore the columns that we've hidden
                $.each(that.s.current, function (i, val) {
                    if (val === false) {
                        that._setColumnVis(i, true);
                    }
                });
            });

            // Reorder the breakpoints array here in case they have been added out
            // of order
            this.c.breakpoints.sort(function (a, b) {
                return a.width < b.width ? 1 :
                    a.width > b.width ? -1 : 0;
            });

            this._classLogic();
            this._resizeAuto();

            // Details handler
            var details = this.c.details;

            if (details.type !== false) {
                that._detailsInit();

                // DataTables will trigger this event on every column it shows and
                // hides individually
                dt.on('column-visibility.dtr', function () {
                    // Use a small debounce to allow multiple columns to be set together
                    if (that._timer) {
                        clearTimeout(that._timer);
                    }

                    that._timer = setTimeout(function () {
                        that._timer = null;

                        that._classLogic();
                        that._resizeAuto();
                        that._resize(true);

                        that._redrawChildren();
                    }, 100);
                });

                // Redraw the details box on each draw which will happen if the data
                // has changed. This is used until DataTables implements a native
                // `updated` event for rows
                dt.on('draw.dtr', function () {
                    that._redrawChildren();
                });

                $(dt.table().node()).addClass('dtr-' + details.type);
            }

            dt.on('column-reorder.dtr', function (e, settings, details) {
                that._classLogic();
                that._resizeAuto();
                that._resize(true);
            });

            // Change in column sizes means we need to calc
            dt.on('column-sizing.dtr', function () {
                that._resizeAuto();
                that._resize();
            });

            // On Ajax reload we want to reopen any child rows which are displayed
            // by responsive
            dt.on('preXhr.dtr', function () {
                var rowIds = [];
                dt.rows().every(function () {
                    if (this.child.isShown()) {
                        rowIds.push(this.id(true));
                    }
                });

                dt.one('draw.dtr', function () {
                    that._resizeAuto();
                    that._resize();

                    dt.rows(rowIds).every(function () {
                        that._detailsDisplay(this, false);
                    });
                });
            });

            dt
                .on('draw.dtr', function () {
                    that._controlClass();
                })
                .on('init.dtr', function (e, settings, details) {
                    if (e.namespace !== 'dt') {
                        return;
                    }

                    that._resizeAuto();
                    that._resize();

                    // If columns were hidden, then DataTables needs to adjust the
                    // column sizing
                    if ($.inArray(false, that.s.current)) {
                        dt.columns.adjust();
                    }
                });

            // First pass - draw the table for the current viewport size
            this._resize();
        },


        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
         * Private methods
         */

        /**
         * Calculate the visibility for the columns in a table for a given
         * breakpoint. The result is pre-determined based on the class logic if
         * class names are used to control all columns, but the width of the table
         * is also used if there are columns which are to be automatically shown
         * and hidden.
         *
         * @param  {string} breakpoint Breakpoint name to use for the calculation
         * @return {array} Array of boolean values initiating the visibility of each
         *   column.
         *  @private
         */
        _columnsVisiblity: function (breakpoint) {
            var dt = this.s.dt;
            var columns = this.s.columns;
            var i, ien;

            // Create an array that defines the column ordering based first on the
            // column's priority, and secondly the column index. This allows the
            // columns to be removed from the right if the priority matches
            var order = columns
                .map(function (col, idx) {
                    return {
                        columnIdx: idx,
                        priority: col.priority
                    };
                })
                .sort(function (a, b) {
                    if (a.priority !== b.priority) {
                        return a.priority - b.priority;
                    }
                    return a.columnIdx - b.columnIdx;
                });

            // Class logic - determine which columns are in this breakpoint based
            // on the classes. If no class control (i.e. `auto`) then `-` is used
            // to indicate this to the rest of the function
            var display = $.map(columns, function (col, i) {
                if (dt.column(i).visible() === false) {
                    return 'not-visible';
                }
                return col.auto && col.minWidth === null ?
                    false :
                    col.auto === true ?
                        '-' :
                        $.inArray(breakpoint, col.includeIn) !== -1;
            });

            // Auto column control - first pass: how much width is taken by the
            // ones that must be included from the non-auto columns
            var requiredWidth = 0;
            for (i = 0, ien = display.length; i < ien; i++) {
                if (display[i] === true) {
                    requiredWidth += columns[i].minWidth;
                }
            }

            // Second pass, use up any remaining width for other columns. For
            // scrolling tables we need to subtract the width of the scrollbar. It
            // may not be requires which makes this sub-optimal, but it would
            // require another full redraw to make complete use of those extra few
            // pixels
            var scrolling = dt.settings()[0].oScroll;
            var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
            var widthAvailable = dt.table().container().offsetWidth - bar;
            var usedWidth = widthAvailable - requiredWidth;

            // Control column needs to always be included. This makes it sub-
            // optimal in terms of using the available with, but to stop layout
            // thrashing or overflow. Also we need to account for the control column
            // width first so we know how much width is available for the other
            // columns, since the control column might not be the first one shown
            for (i = 0, ien = display.length; i < ien; i++) {
                if (columns[i].control) {
                    usedWidth -= columns[i].minWidth;
                }
            }

            // Allow columns to be shown (counting by priority and then right to
            // left) until we run out of room
            var empty = false;
            for (i = 0, ien = order.length; i < ien; i++) {
                var colIdx = order[i].columnIdx;

                if (display[colIdx] === '-' && !columns[colIdx].control && columns[colIdx].minWidth) {
                    // Once we've found a column that won't fit we don't let any
                    // others display either, or columns might disappear in the
                    // middle of the table
                    if (empty || usedWidth - columns[colIdx].minWidth < 0) {
                        empty = true;
                        display[colIdx] = false;
                    } else {
                        display[colIdx] = true;
                    }

                    usedWidth -= columns[colIdx].minWidth;
                }
            }

            // Determine if the 'control' column should be shown (if there is one).
            // This is the case when there is a hidden column (that is not the
            // control column). The two loops look inefficient here, but they are
            // trivial and will fly through. We need to know the outcome from the
            // first , before the action in the second can be taken
            var showControl = false;

            for (i = 0, ien = columns.length; i < ien; i++) {
                if (!columns[i].control && !columns[i].never && display[i] === false) {
                    showControl = true;
                    break;
                }
            }

            for (i = 0, ien = columns.length; i < ien; i++) {
                if (columns[i].control) {
                    display[i] = showControl;
                }

                // Replace not visible string with false from the control column detection above
                if (display[i] === 'not-visible') {
                    display[i] = false;
                }
            }

            // Finally we need to make sure that there is at least one column that
            // is visible
            if ($.inArray(true, display) === -1) {
                display[0] = true;
            }

            return display;
        },


        /**
         * Create the internal `columns` array with information about the columns
         * for the table. This includes determining which breakpoints the column
         * will appear in, based upon class names in the column, which makes up the
         * vast majority of this method.
         *
         * @private
         */
        _classLogic: function () {
            var that = this;
            var calc = {};
            var breakpoints = this.c.breakpoints;
            var dt = this.s.dt;
            var columns = dt.columns().eq(0).map(function (i) {
                var column = this.column(i);
                var className = column.header().className;
                var priority = dt.settings()[0].aoColumns[i].responsivePriority;
                var dataPriority = column.header().getAttribute('data-priority');

                if (priority === undefined) {
                    priority = dataPriority === undefined || dataPriority === null ?
                        10000 :
                        dataPriority * 1;
                }

                return {
                    className: className,
                    includeIn: [],
                    auto: false,
                    control: false,
                    never: className.match(/\bnever\b/) ? true : false,
                    priority: priority
                };
            });

            // Simply add a breakpoint to `includeIn` array, ensuring that there are
            // no duplicates
            var add = function (colIdx, name) {
                var includeIn = columns[colIdx].includeIn;

                if ($.inArray(name, includeIn) === -1) {
                    includeIn.push(name);
                }
            };

            var column = function (colIdx, name, operator, matched) {
                var size, i, ien;

                if (!operator) {
                    columns[colIdx].includeIn.push(name);
                } else if (operator === 'max-') {
                    // Add this breakpoint and all smaller
                    size = that._find(name).width;

                    for (i = 0, ien = breakpoints.length; i < ien; i++) {
                        if (breakpoints[i].width <= size) {
                            add(colIdx, breakpoints[i].name);
                        }
                    }
                } else if (operator === 'min-') {
                    // Add this breakpoint and all larger
                    size = that._find(name).width;

                    for (i = 0, ien = breakpoints.length; i < ien; i++) {
                        if (breakpoints[i].width >= size) {
                            add(colIdx, breakpoints[i].name);
                        }
                    }
                } else if (operator === 'not-') {
                    // Add all but this breakpoint
                    for (i = 0, ien = breakpoints.length; i < ien; i++) {
                        if (breakpoints[i].name.indexOf(matched) === -1) {
                            add(colIdx, breakpoints[i].name);
                        }
                    }
                }
            };

            // Loop over each column and determine if it has a responsive control
            // class
            columns.each(function (col, i) {
                var classNames = col.className.split(' ');
                var hasClass = false;

                // Split the class name up so multiple rules can be applied if needed
                for (var k = 0, ken = classNames.length; k < ken; k++) {
                    var className = classNames[k].trim();

                    if (className === 'all') {
                        // Include in all
                        hasClass = true;
                        col.includeIn = $.map(breakpoints, function (a) {
                            return a.name;
                        });
                        return;
                    } else if (className === 'none' || col.never) {
                        // Include in none (default) and no auto
                        hasClass = true;
                        return;
                    } else if (className === 'control' || className === 'dtr-control') {
                        // Special column that is only visible, when one of the other
                        // columns is hidden. This is used for the details control
                        hasClass = true;
                        col.control = true;
                        return;
                    }

                    $.each(breakpoints, function (j, breakpoint) {
                        // Does this column have a class that matches this breakpoint?
                        var brokenPoint = breakpoint.name.split('-');
                        var re = new RegExp('(min\\-|max\\-|not\\-)?(' + brokenPoint[0] + ')(\\-[_a-zA-Z0-9])?');
                        var match = className.match(re);

                        if (match) {
                            hasClass = true;

                            if (match[2] === brokenPoint[0] && match[3] === '-' + brokenPoint[1]) {
                                // Class name matches breakpoint name fully
                                column(i, breakpoint.name, match[1], match[2] + match[3]);
                            } else if (match[2] === brokenPoint[0] && !match[3]) {
                                // Class name matched primary breakpoint name with no qualifier
                                column(i, breakpoint.name, match[1], match[2]);
                            }
                        }
                    });
                }

                // If there was no control class, then automatic sizing is used
                if (!hasClass) {
                    col.auto = true;
                }
            });

            this.s.columns = columns;
        },

        /**
         * Update the cells to show the correct control class / button
         * @private
         */
        _controlClass: function () {
            if (this.c.details.type === 'inline') {
                var dt = this.s.dt;
                var columnsVis = this.s.current;
                var firstVisible = $.inArray(true, columnsVis);

                // Remove from any cells which shouldn't have it
                dt.cells(
                    null,
                    function (idx) {
                        return idx !== firstVisible;
                    },
                    {page: 'current'}
                )
                    .nodes()
                    .to$()
                    .filter('.dtr-control')
                    .removeClass('dtr-control');

                dt.cells(null, firstVisible, {page: 'current'})
                    .nodes()
                    .to$()
                    .addClass('dtr-control');
            }
        },

        /**
         * Show the details for the child row
         *
         * @param  {DataTables.Api} row    API instance for the row
         * @param  {boolean}        update Update flag
         * @private
         */
        _detailsDisplay: function (row, update) {
            var that = this;
            var dt = this.s.dt;
            var details = this.c.details;

            if (details && details.type !== false) {
                var res = details.display(row, update, function () {
                    return details.renderer(
                        dt, row[0], that._detailsObj(row[0])
                    );
                });

                if (res === true || res === false) {
                    $(dt.table().node()).triggerHandler('responsive-display.dt', [dt, row, res, update]);
                }
            }
        },


        /**
         * Initialisation for the details handler
         *
         * @private
         */
        _detailsInit: function () {
            var that = this;
            var dt = this.s.dt;
            var details = this.c.details;

            // The inline type always uses the first child as the target
            if (details.type === 'inline') {
                details.target = 'td.dtr-control, th.dtr-control';
            }

            // Keyboard accessibility
            dt.on('draw.dtr', function () {
                that._tabIndexes();
            });
            that._tabIndexes(); // Initial draw has already happened

            $(dt.table().body()).on('keyup.dtr', 'td, th', function (e) {
                if (e.keyCode === 13 && $(this).data('dtr-keyboard')) {
                    $(this).click();
                }
            });

            // type.target can be a string jQuery selector or a column index
            var target = details.target;
            var selector = typeof target === 'string' ? target : 'td, th';

            if (target !== undefined || target !== null) {
                // Click handler to show / hide the details rows when they are available
                $(dt.table().body())
                    .on('click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
                        // If the table is not collapsed (i.e. there is no hidden columns)
                        // then take no action
                        if (!$(dt.table().node()).hasClass('collapsed')) {
                            return;
                        }

                        // Check that the row is actually a DataTable's controlled node
                        if ($.inArray($(this).closest('tr').get(0), dt.rows().nodes().toArray()) === -1) {
                            return;
                        }

                        // For column index, we determine if we should act or not in the
                        // handler - otherwise it is already okay
                        if (typeof target === 'number') {
                            var targetIdx = target < 0 ?
                                dt.columns().eq(0).length + target :
                                target;

                            if (dt.cell(this).index().column !== targetIdx) {
                                return;
                            }
                        }

                        // $().closest() includes itself in its check
                        var row = dt.row($(this).closest('tr'));

                        // Check event type to do an action
                        if (e.type === 'click') {
                            // The renderer is given as a function so the caller can execute it
                            // only when they need (i.e. if hiding there is no point is running
                            // the renderer)
                            that._detailsDisplay(row, false);
                        } else if (e.type === 'mousedown') {
                            // For mouse users, prevent the focus ring from showing
                            $(this).css('outline', 'none');
                        } else if (e.type === 'mouseup') {
                            // And then re-allow at the end of the click
                            $(this).trigger('blur').css('outline', '');
                        }
                    });
            }
        },


        /**
         * Get the details to pass to a renderer for a row
         * @param  {int} rowIdx Row index
         * @private
         */
        _detailsObj: function (rowIdx) {
            var that = this;
            var dt = this.s.dt;

            return $.map(this.s.columns, function (col, i) {
                // Never and control columns should not be passed to the renderer
                if (col.never || col.control) {
                    return;
                }

                var dtCol = dt.settings()[0].aoColumns[i];

                return {
                    className: dtCol.sClass,
                    columnIndex: i,
                    data: dt.cell(rowIdx, i).render(that.c.orthogonal),
                    hidden: dt.column(i).visible() && !that.s.current[i],
                    rowIndex: rowIdx,
                    title: dtCol.sTitle !== null ?
                        dtCol.sTitle :
                        $(dt.column(i).header()).text()
                };
            });
        },


        /**
         * Find a breakpoint object from a name
         *
         * @param  {string} name Breakpoint name to find
         * @return {object}      Breakpoint description object
         * @private
         */
        _find: function (name) {
            var breakpoints = this.c.breakpoints;

            for (var i = 0, ien = breakpoints.length; i < ien; i++) {
                if (breakpoints[i].name === name) {
                    return breakpoints[i];
                }
            }
        },


        /**
         * Re-create the contents of the child rows as the display has changed in
         * some way.
         *
         * @private
         */
        _redrawChildren: function () {
            var that = this;
            var dt = this.s.dt;

            dt.rows({page: 'current'}).iterator('row', function (settings, idx) {
                var row = dt.row(idx);

                that._detailsDisplay(dt.row(idx), true);
            });
        },


        /**
         * Alter the table display for a resized viewport. This involves first
         * determining what breakpoint the window currently is in, getting the
         * column visibilities to apply and then setting them.
         *
         * @param  {boolean} forceRedraw Force a redraw
         * @private
         */
        _resize: function (forceRedraw) {
            var that = this;
            var dt = this.s.dt;
            var width = $(window).innerWidth();
            var breakpoints = this.c.breakpoints;
            var breakpoint = breakpoints[0].name;
            var columns = this.s.columns;
            var i, ien;
            var oldVis = this.s.current.slice();

            // Determine what breakpoint we are currently at
            for (i = breakpoints.length - 1; i >= 0; i--) {
                if (width <= breakpoints[i].width) {
                    breakpoint = breakpoints[i].name;
                    break;
                }
            }

            // Show the columns for that break point
            var columnsVis = this._columnsVisiblity(breakpoint);
            this.s.current = columnsVis;

            // Set the class before the column visibility is changed so event
            // listeners know what the state is. Need to determine if there are
            // any columns that are not visible but can be shown
            var collapsedClass = false;

            for (i = 0, ien = columns.length; i < ien; i++) {
                if (columnsVis[i] === false && !columns[i].never && !columns[i].control && !dt.column(i).visible() === false) {
                    collapsedClass = true;
                    break;
                }
            }

            $(dt.table().node()).toggleClass('collapsed', collapsedClass);

            var changed = false;
            var visible = 0;

            dt.columns().eq(0).each(function (colIdx, i) {
                if (columnsVis[i] === true) {
                    visible++;
                }

                if (forceRedraw || columnsVis[i] !== oldVis[i]) {
                    changed = true;
                    that._setColumnVis(colIdx, columnsVis[i]);
                }
            });

            if (changed) {
                this._redrawChildren();

                // Inform listeners of the change
                $(dt.table().node()).trigger('responsive-resize.dt', [dt, this.s.current]);

                // If no records, update the "No records" display element
                if (dt.page.info().recordsDisplay === 0) {
                    $('td', dt.table().body()).eq(0).attr('colspan', visible);
                }
            }

            that._controlClass();
        },


        /**
         * Determine the width of each column in the table so the auto column hiding
         * has that information to work with. This method is never going to be 100%
         * perfect since column widths can change slightly per page, but without
         * seriously compromising performance this is quite effective.
         *
         * @private
         */
        _resizeAuto: function () {
            var dt = this.s.dt;
            var columns = this.s.columns;

            // Are we allowed to do auto sizing?
            if (!this.c.auto) {
                return;
            }

            // Are there any columns that actually need auto-sizing, or do they all
            // have classes defined
            if ($.inArray(true, $.map(columns, function (c) {
                return c.auto;
            })) === -1) {
                return;
            }

            // Need to restore all children. They will be reinstated by a re-render
            if (!$.isEmptyObject(_childNodeStore)) {
                $.each(_childNodeStore, function (key) {
                    var idx = key.split('-');

                    _childNodesRestore(dt, idx[0] * 1, idx[1] * 1);
                });
            }

            // Clone the table with the current data in it
            var tableWidth = dt.table().node().offsetWidth;
            var columnWidths = dt.columns;
            var clonedTable = dt.table().node().cloneNode(false);
            var clonedHeader = $(dt.table().header().cloneNode(false)).appendTo(clonedTable);
            var clonedBody = $(dt.table().body()).clone(false, false).empty().appendTo(clonedTable); // use jQuery because of IE8

            clonedTable.style.width = 'auto';

            // Header
            var headerCells = dt.columns()
                .header()
                .filter(function (idx) {
                    return dt.column(idx).visible();
                })
                .to$()
                .clone(false)
                .css('display', 'table-cell')
                .css('width', 'auto')
                .css('min-width', 0);

            // Body rows - we don't need to take account of DataTables' column
            // visibility since we implement our own here (hence the `display` set)
            $(clonedBody)
                .append($(dt.rows({page: 'current'}).nodes()).clone(false))
                .find('th, td').css('display', '');

            // Footer
            var footer = dt.table().footer();
            if (footer) {
                var clonedFooter = $(footer.cloneNode(false)).appendTo(clonedTable);
                var footerCells = dt.columns()
                    .footer()
                    .filter(function (idx) {
                        return dt.column(idx).visible();
                    })
                    .to$()
                    .clone(false)
                    .css('display', 'table-cell');

                $('<tr/>')
                    .append(footerCells)
                    .appendTo(clonedFooter);
            }

            $('<tr/>')
                .append(headerCells)
                .appendTo(clonedHeader);

            // In the inline case extra padding is applied to the first column to
            // give space for the show / hide icon. We need to use this in the
            // calculation
            if (this.c.details.type === 'inline') {
                $(clonedTable).addClass('dtr-inline collapsed');
            }

            // It is unsafe to insert elements with the same name into the DOM
            // multiple times. For example, cloning and inserting a checked radio
            // clears the chcecked state of the original radio.
            $(clonedTable).find('[name]').removeAttr('name');

            // A position absolute table would take the table out of the flow of
            // our container element, bypassing the height and width (Scroller)
            $(clonedTable).css('position', 'relative')

            var inserted = $('<div/>')
                .css({
                    width: 1,
                    height: 1,
                    overflow: 'hidden',
                    clear: 'both'
                })
                .append(clonedTable);

            inserted.insertBefore(dt.table().node());

            // The cloned header now contains the smallest that each column can be
            headerCells.each(function (i) {
                var idx = dt.column.index('fromVisible', i);
                columns[idx].minWidth = this.offsetWidth || 0;
            });

            inserted.remove();
        },

        /**
         * Get the state of the current hidden columns - controlled by Responsive only
         */
        _responsiveOnlyHidden: function () {
            var dt = this.s.dt;

            return $.map(this.s.current, function (v, i) {
                // If the column is hidden by DataTables then it can't be hidden by
                // Responsive!
                if (dt.column(i).visible() === false) {
                    return true;
                }
                return v;
            });
        },

        /**
         * Set a column's visibility.
         *
         * We don't use DataTables' column visibility controls in order to ensure
         * that column visibility can Responsive can no-exist. Since only IE8+ is
         * supported (and all evergreen browsers of course) the control of the
         * display attribute works well.
         *
         * @param {integer} col      Column index
         * @param {boolean} showHide Show or hide (true or false)
         * @private
         */
        _setColumnVis: function (col, showHide) {
            var dt = this.s.dt;
            var display = showHide ? '' : 'none'; // empty string will remove the attr

            $(dt.column(col).header()).css('display', display);
            $(dt.column(col).footer()).css('display', display);
            dt.column(col).nodes().to$().css('display', display);

            // If the are child nodes stored, we might need to reinsert them
            if (!$.isEmptyObject(_childNodeStore)) {
                dt.cells(null, col).indexes().each(function (idx) {
                    _childNodesRestore(dt, idx.row, idx.column);
                });
            }
        },


        /**
         * Update the cell tab indexes for keyboard accessibility. This is called on
         * every table draw - that is potentially inefficient, but also the least
         * complex option given that column visibility can change on the fly. Its a
         * shame user-focus was removed from CSS 3 UI, as it would have solved this
         * issue with a single CSS statement.
         *
         * @private
         */
        _tabIndexes: function () {
            var dt = this.s.dt;
            var cells = dt.cells({page: 'current'}).nodes().to$();
            var ctx = dt.settings()[0];
            var target = this.c.details.target;

            cells.filter('[data-dtr-keyboard]').removeData('[data-dtr-keyboard]');

            if (typeof target === 'number') {
                dt.cells(null, target, {page: 'current'}).nodes().to$()
                    .attr('tabIndex', ctx.iTabIndex)
                    .data('dtr-keyboard', 1);
            } else {
                // This is a bit of a hack - we need to limit the selected nodes to just
                // those of this table
                if (target === 'td:first-child, th:first-child') {
                    target = '>td:first-child, >th:first-child';
                }

                $(target, dt.rows({page: 'current'}).nodes())
                    .attr('tabIndex', ctx.iTabIndex)
                    .data('dtr-keyboard', 1);
            }
        }
    });


    /**
     * List of default breakpoints. Each item in the array is an object with two
     * properties:
     *
     * * `name` - the breakpoint name.
     * * `width` - the breakpoint width
     *
     * @name Responsive.breakpoints
     * @static
     */
    Responsive.breakpoints = [
        {name: 'desktop', width: Infinity},
        {name: 'tablet-l', width: 1024},
        {name: 'tablet-p', width: 768},
        {name: 'mobile-l', width: 480},
        {name: 'mobile-p', width: 320}
    ];


    /**
     * Display methods - functions which define how the hidden data should be shown
     * in the table.
     *
     * @namespace
     * @name Responsive.defaults
     * @static
     */
    Responsive.display = {
        childRow: function (row, update, render) {
            if (update) {
                if ($(row.node()).hasClass('parent')) {
                    row.child(render(), 'child').show();

                    return true;
                }
            } else {
                if (!row.child.isShown()) {
                    row.child(render(), 'child').show();
                    $(row.node()).addClass('parent');

                    return true;
                } else {
                    row.child(false);
                    $(row.node()).removeClass('parent');

                    return false;
                }
            }
        },

        childRowImmediate: function (row, update, render) {
            if ((!update && row.child.isShown()) || !row.responsive.hasHidden()) {
                // User interaction and the row is show, or nothing to show
                row.child(false);
                $(row.node()).removeClass('parent');

                return false;
            } else {
                // Display
                row.child(render(), 'child').show();
                $(row.node()).addClass('parent');

                return true;
            }
        },

        // This is a wrapper so the modal options for Bootstrap and jQuery UI can
        // have options passed into them. This specific one doesn't need to be a
        // function but it is for consistency in the `modal` name
        modal: function (options) {
            return function (row, update, render) {
                if (!update) {
                    // Show a modal
                    var close = function () {
                        modal.remove(); // will tidy events for us
                        $(document).off('keypress.dtr');
                    };

                    var modal = $('<div class="dtr-modal"/>')
                        .append($('<div class="dtr-modal-display"/>')
                            .append($('<div class="dtr-modal-content"/>')
                                .append(render())
                            )
                            .append($('<div class="dtr-modal-close">&times;</div>')
                                .click(function () {
                                    close();
                                })
                            )
                        )
                        .append($('<div class="dtr-modal-background"/>')
                            .click(function () {
                                close();
                            })
                        )
                        .appendTo('body');

                    $(document).on('keyup.dtr', function (e) {
                        if (e.keyCode === 27) {
                            e.stopPropagation();

                            close();
                        }
                    });
                } else {
                    $('div.dtr-modal-content')
                        .empty()
                        .append(render());
                }

                if (options && options.header) {
                    $('div.dtr-modal-content').prepend(
                        '<h2>' + options.header(row) + '</h2>'
                    );
                }
            };
        }
    };


    var _childNodeStore = {};

    function _childNodes(dt, row, col) {
        var name = row + '-' + col;

        if (_childNodeStore[name]) {
            return _childNodeStore[name];
        }

        // https://jsperf.com/childnodes-array-slice-vs-loop
        var nodes = [];
        var children = dt.cell(row, col).node().childNodes;
        for (var i = 0, ien = children.length; i < ien; i++) {
            nodes.push(children[i]);
        }

        _childNodeStore[name] = nodes;

        return nodes;
    }

    function _childNodesRestore(dt, row, col) {
        var name = row + '-' + col;

        if (!_childNodeStore[name]) {
            return;
        }

        var node = dt.cell(row, col).node();
        var store = _childNodeStore[name];
        var parent = store[0].parentNode;
        var parentChildren = parent.childNodes;
        var a = [];

        for (var i = 0, ien = parentChildren.length; i < ien; i++) {
            a.push(parentChildren[i]);
        }

        for (var j = 0, jen = a.length; j < jen; j++) {
            node.appendChild(a[j]);
        }

        _childNodeStore[name] = undefined;
    }


    /**
     * Display methods - functions which define how the hidden data should be shown
     * in the table.
     *
     * @namespace
     * @name Responsive.defaults
     * @static
     */
    Responsive.renderer = {
        listHiddenNodes: function () {
            return function (api, rowIdx, columns) {
                var ul = $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>');
                var found = false;

                var data = $.each(columns, function (i, col) {
                    if (col.hidden) {
                        var klass = col.className ?
                            'class="' + col.className + '"' :
                            '';

                        $(
                            '<li ' + klass + ' data-dtr-index="' + col.columnIndex + '" data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                            '<span class="dtr-title">' +
                            col.title +
                            '</span> ' +
                            '</li>'
                        )
                            .append($('<span class="dtr-data"/>').append(_childNodes(api, col.rowIndex, col.columnIndex)))// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
                            .appendTo(ul);

                        found = true;
                    }
                });

                return found ?
                    ul :
                    false;
            };
        },

        listHidden: function () {
            return function (api, rowIdx, columns) {
                var data = $.map(columns, function (col) {
                    var klass = col.className ?
                        'class="' + col.className + '"' :
                        '';

                    return col.hidden ?
                        '<li ' + klass + ' data-dtr-index="' + col.columnIndex + '" data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                        '<span class="dtr-title">' +
                        col.title +
                        '</span> ' +
                        '<span class="dtr-data">' +
                        col.data +
                        '</span>' +
                        '</li>' :
                        '';
                }).join('');

                return data ?
                    $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>').append(data) :
                    false;
            }
        },

        tableAll: function (options) {
            options = $.extend({
                tableClass: ''
            }, options);

            return function (api, rowIdx, columns) {
                var data = $.map(columns, function (col) {
                    var klass = col.className ?
                        'class="' + col.className + '"' :
                        '';

                    return '<tr ' + klass + ' data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                        '<td>' + col.title + ':' + '</td> ' +
                        '<td>' + col.data + '</td>' +
                        '</tr>';
                }).join('');

                return $('<table class="' + options.tableClass + ' dtr-details" width="100%"/>').append(data);
            }
        }
    };

    /**
     * Responsive default settings for initialisation
     *
     * @namespace
     * @name Responsive.defaults
     * @static
     */
    Responsive.defaults = {
        /**
         * List of breakpoints for the instance. Note that this means that each
         * instance can have its own breakpoints. Additionally, the breakpoints
         * cannot be changed once an instance has been creased.
         *
         * @type {Array}
         * @default Takes the value of `Responsive.breakpoints`
         */
        breakpoints: Responsive.breakpoints,

        /**
         * Enable / disable auto hiding calculations. It can help to increase
         * performance slightly if you disable this option, but all columns would
         * need to have breakpoint classes assigned to them
         *
         * @type {Boolean}
         * @default  `true`
         */
        auto: true,

        /**
         * Details control. If given as a string value, the `type` property of the
         * default object is set to that value, and the defaults used for the rest
         * of the object - this is for ease of implementation.
         *
         * The object consists of the following properties:
         *
         * * `display` - A function that is used to show and hide the hidden details
         * * `renderer` - function that is called for display of the child row data.
         *   The default function will show the data from the hidden columns
         * * `target` - Used as the selector for what objects to attach the child
         *   open / close to
         * * `type` - `false` to disable the details display, `inline` or `column`
         *   for the two control types
         *
         * @type {Object|string}
         */
        details: {
            display: Responsive.display.childRow,

            renderer: Responsive.renderer.listHidden(),

            target: 0,

            type: 'inline'
        },

        /**
         * Orthogonal data request option. This is used to define the data type
         * requested when Responsive gets the data to show in the child row.
         *
         * @type {String}
         */
        orthogonal: 'display'
    };


    /*
     * API
     */
    var Api = $.fn.dataTable.Api;

// Doesn't do anything - work around for a bug in DT... Not documented
    Api.register('responsive()', function () {
        return this;
    });

    Api.register('responsive.index()', function (li) {
        li = $(li);

        return {
            column: li.data('dtr-index'),
            row: li.parent().data('dtr-index')
        };
    });

    Api.register('responsive.rebuild()', function () {
        return this.iterator('table', function (ctx) {
            if (ctx._responsive) {
                ctx._responsive._classLogic();
            }
        });
    });

    Api.register('responsive.recalc()', function () {
        return this.iterator('table', function (ctx) {
            if (ctx._responsive) {
                ctx._responsive._resizeAuto();
                ctx._responsive._resize();
            }
        });
    });

    Api.register('responsive.hasHidden()', function () {
        var ctx = this.context[0];

        return ctx._responsive ?
            $.inArray(false, ctx._responsive._responsiveOnlyHidden()) !== -1 :
            false;
    });

    Api.registerPlural('columns().responsiveHidden()', 'column().responsiveHidden()', function () {
        return this.iterator('column', function (settings, column) {
            return settings._responsive ?
                settings._responsive._responsiveOnlyHidden()[column] :
                false;
        }, 1);
    });


    /**
     * Version information
     *
     * @name Responsive.version
     * @static
     */
    Responsive.version = '2.2.7';


    $.fn.dataTable.Responsive = Responsive;
    $.fn.DataTable.Responsive = Responsive;

// Attach a listener to the document which listens for DataTables initialisation
// events so we can automatically initialise
    $(document).on('preInit.dt.dtr', function (e, settings, json) {
        if (e.namespace !== 'dt') {
            return;
        }

        if ($(settings.nTable).hasClass('responsive') ||
            $(settings.nTable).hasClass('dt-responsive') ||
            settings.oInit.responsive ||
            DataTable.defaults.responsive
        ) {
            var init = settings.oInit.responsive;

            if (init !== false) {
                new Responsive(settings, $.isPlainObject(init) ? init : {});
            }
        }
    });


    return Responsive;
}));