Tablesorter demo

All options included, as well as the uitheme widget

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.min.js"></script>
<script src="http://mottie.github.com/tablesorter/js/widgets/widget-cssStickyHeaders.js"></script>
<a href="#popup" class="open-popup-link">Show table</a>

<div id="popup" class="white-popup mfp-hide">
    <table id="table1" class="tablesorter">
        <caption>Student Grades</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th>Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th class="filter-false sorter-false">Geometry</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th>Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th>Geometry</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Student01</td>
                <td>Languages</td>
                <td>male</td>
                <td>80</td>
                <td>70</td>
                <td>75</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Student02</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>90</td>
                <td>88</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student03</td>
                <td>Languages</td>
                <td>female</td>
                <td>85</td>
                <td>95</td>
               ...

CSS

#popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}
/* Magnific Popup CSS */
 .mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}
.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.mfp-container:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
    display: none;
}
.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}
.mfp-ajax-cur {
    cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}
.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
    cursor: auto;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.mfp-loading.mfp-figure {
    display: none;
}
.mfp-hide {
    display: none !important;
}
.mfp-preloader {
    color: #cccccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
   ...

JavaScript

$(function () {

    $('.open-popup-link').magnificPopup({
        type: 'inline',
        midClick: true,
        callbacks: {
            open: function () {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object
                $('table').tablesorter({
                    theme: 'blue',
                    widgets: ['zebra', 'filter', 'cssStickyHeaders'],
                    widgetOptions: {
                        // jQuery selector or object to attach sticky header to
                        cssStickyHeaders_attachTo: '.mfp-wrap',
                        cssStickyHeaders_addCaption: true
                    }
                });
            }
        }
    });


});