jQuery UI Table WIP

by secretgspot

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>
<h2>All out</h2>
<table summary="this is a table">
    <caption>Table caption</caption>
    <thead>
        <tr>
            <th width="100" data-sort-order="-1">Numbers</th>
            <th width="250">Strings</th>
            <th>Dates</th>
            <th>Mixed</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    
    <tfoot>
        <tr>
            <th width="100">Numbers</th>
            <th width="250">Strings</th>
            <th>Dates</th>
            <th>Mixed</th>
        </tr>
    </tfoot>
</table>

<br />
<button id="serialize">Serialize selection</button>
<div id="results"></div>

<button id="remote">Load remote data</button>

<div id="paginator"></div>

<h2>Default table</h2>
<table style="width: 100%">
    <thead>
        <tr>
            <th width="33%">Header 1</th>
            <th width="33%">Header 2</th>
            <th width="33%">Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This</td>
            <td>Is</td>
            <td>Defaults</td>
        </tr>
    </tbody>
</table>

CSS

html, body {
    font-size: .9em;
    font-family: Verdana;
}

h2 {
    font-size: 1.2em;
    line-height: 2em;
    margin-top: 1em;
}

table {
    width: 100%;
}

/**
 * Table
 */
.ui-table {
    position: relative;
}

.ui-table .ui-table-head tr,
.ui-table .ui-table-head th {
    border: none !important;
}

.ui-table-sortable-helper {
    opacity: .75;
    cursor: move;
    border: 1px solid #ccc;
}

.ui-table-sortable-helper div {
    font-weight: normal !important;
    padding: .3em .5em;
    background-color: #fff;
    border-bottom: 1px solid transparent;
}

.ui-table-sortable-helper .ui-widget-header {
    border-width: 0px;
}

.ui-table table {
    /*width: 100%; */
}

.ui-table .ui-table-body tr {
    border: 1px solid transparent;
}

.ui-table .ui-table-head {
    border-bottom-width: 0;
    overflow: hidden;
}

.ui-table .ui-table-head.ui-table-minimized {
    border-bottom-width: 1px;
}

.ui-table .ui-table-foot {
    border-top: 0;
}

.ui-table tbody {
    border: 0;
}

.ui-table .ui-table-header {
    cursor: pointer;
    vertical-align: bottom;
    height: 1.8em;
}


.ui-table .ui-table-caption {
    padding: .3em .5em;
    border-bottom: 1px solid rgba(255,255,255,.3);
}

.ui-table .ui-table-minimized .ui-table-caption {
    border-bottom: 0;
}

.ui-table .ui-table-body tr.ui-table-row-even td {
}

.ui-table .ui-table-body tr.ui-table-row-odd td {
    background-color: rgba(0,0,0,.05);
}

.ui-table .ui-table-body tr.ui-state-active td {
    background-color: rgba(0,0,100,.2) !important;
}

.ui-table th {
    font-weight: normal;
    text-align: left;
}

.ui-table .ui-table-head th.ui-state-hover {
    border-bottom: 2px yellow;
}

.ui-table th,
.ui-table td {
    padding: .3em .5em;
    white-space:nowrap;
}

.ui-table .ui-table-head th span {
    float: right;
    margin-left: .5em;
    height: 16px;
    width: 16px;
}

.ui-table .ui-table-body {
    position: relative;
    overflow: auto;
}

.ui-table .ui-table-status {
    border-top: 1px solid...

JavaScript

;(function($) {
    
    $.widget("ui.table", {
        options: {
            minimizable: false,
            //searchable: false, TODO
            //resizable: false, TODO
            sortable: false,
            movableColumns: false,
            pagination: false,
            scrolling: false,
            statusBar: false,
            maxRows: 0,
            remote: {
                type: "post",
                dataType: "json"
            }
        },
        _update: function() {
            var self = this;
            
            // reset height
            this.body.container.height("");
            
            // refresh references
            this.head.headers = this.head.table.find("th.ui-table-header");
            this.body.rows = this.body.table.find("tr");
            this.body.cells = this.body.table.find("tr > td");
            
            // if maximum rows where specified
            if (this.options.maxRows) {
                this.rowHeight = this.body.rows.find("td:first").outerHeight(true);
                this.body.container.height(this.rowHeight*this.options.maxRows);
                if (
                    (this.body.container[0].scrollHeight > this.body.container.height()) &&
                    (this.body.table.height() >= this.body.container.height())
                    ) {
                    var margin = this.body.container.width()-this.body.table.width();
                    // add a spacer to fix layout when there's a scrollbar
                    if (!this.head.container.find(".ui-table-spacer").length) {
                        var spacer = $("<th>")
                            .addClass("ui-table-spacer")
                            .width(margin)
                            .css("padding", 0);
                        this.head.rows.append(spacer.clone());
                        this.foot.rows.append(spacer);
                    }
                }
            }
            
            // we like zebra row styling
    ...