JSFiddle - React, Tailwind, and code Playground

by georgeosddev

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<h4>Hang up with sort by hobby</h4>

<table id="example-table1" class="table">
    <thead>
        <tr>
            <th>name</th>
            <th>hobby</th>
            <th>favorite</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<hr>
<table id="example-table2" class="table">
    <thead>
        <tr>
            <th>name</th>
            <th>hobby</th>
            <th>favorite</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript

var data = [
    {"name":"NameA","hobby":"hobyA", "favorite":"FavoriteA"},
    {"name":"NameB","hobby":"hobyB", "favorite":"FavoriteB"},
    {"name":"NameC","hobby":"hobyC", "favorite":"FavoriteC"},
    {"name":"NameD","hobby": null,   "favorite":"FavoriteD"},
    {"name":"NameE","hobby": undefined,   "favorite":"FavoriteE"},
    {"name":"NameF",                 "favorite":"FavoriteF"}
];

function mySort(a, b, attr, direction) {
  var aAttr = (a['dynatable-sortable-text'] && a['dynatable-sortable-text'][attr]) ? a['dynatable-sortable-text'][attr] : a[attr],
     bAttr = (b['dynatable-sortable-text'] && b['dynatable-sortable-text'][attr]) ? b['dynatable-sortable-text'][attr] : b[attr],
     comparison;

    aAttr = aAttr ? aAttr.toLowerCase() : aAttr+"".toLowerCase();
    bAttr = bAttr ? bAttr.toLowerCase() : bAttr+"".toLowerCase();
    comparison = aAttr === bAttr ? 0 : (direction > 0 ? aAttr > bAttr : bAttr > aAttr);
    // force false boolean value to -1, true to 1, and tie to 0
    return comparison === false ? -1 : (comparison - 0);
}; 
    
$(document).ready( function() {
    $('#example-table1').dynatable({
        dataset:{
          records:data
        }
    });

    $('#example-table2')
    .bind('dynatable:init', function(e, dynatable) {
      dynatable.sorts.functions["mysorter"] = mySort;
    }).dynatable({
        dataset:{
          records:data,
            sortTypes:{
                "hobby" : "mysorter"
            }
        }
    });
});