Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.

Commit

Permalink
Fixes #86, added example to README.
Browse files Browse the repository at this point in the history
  • Loading branch information
@zachleat
zachleat committed Jan 27, 2015
1 parent 822f76a commit ce96461
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 3 deletions.
24 changes: 22 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ The “sortable” option allows the user to sort the the table data by clicking
<!-- Default column -->
<th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
<th data-tablesaw-sortable-col>Movie Title</th>
<th data-tablesaw-sortable-col>Year</th>
<th data-tablesaw-sortable-col><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-tablesaw-sortable-col data-sortable-numeric>Year</th>
<th data-tablesaw-sortable-col data-sortable-numeric><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<!-- Unsortable column -->
<th>Reviews</th>
</tr>
Expand All @@ -141,6 +141,26 @@ Use `data-tablesaw-sortable-switch` to add a select form element to manually cho

* [Sortable Demo](http://filamentgroup.github.io/tablesaw/demo/sort.html)

We also provide the option to specify Custom Sort functions on individual columns ([working example](http://filamentgroup.github.io/tablesaw/demo/sort-custom.html)). In the contrived example below, we want to sort full dates (e.g. `12/02/2014`) just on the year.

```
$( "#custom-sort" ).data( "tablesaw-sort", function( ascending ) {
// return a function
return function( a, b ) {
// use a.cell and b.cell for cell values
var dateA = a.cell.split( "/" ),
dateB = b.cell.split( "/" ),
yearA = parseInt( dateA[ 2 ], 10 ),
yearB = parseInt( dateB[ 2 ], 10 );
if( ascending ) {
return yearA > yearB;
} else { // descending
return yearA < yearB;
}
};
});
## Kitchen ~~Table~~ Sink
All of the above options combined into a single table.
Expand Down
153 changes: 153 additions & 0 deletions demo/sort-custom.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>

<link rel="stylesheet" href="../dist/tablesaw.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="/demo-head/demohead.css">

<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
<script src="../dist/dependencies/jquery.js"></script>
<script src="../dist/tablesaw.js"></script>
<script src="/demo-head/loadfont.js"></script>
<script>
$(function() {
$( "#custom-sort" ).data( "tablesaw-sort", function( ascending ) {
return function( a, b ) {
var yearA = a.cell.split( "/" ),
yearB = b.cell.split( "/" );

if( ascending ) {
return parseInt( yearA[ 1 ], 10 ) > parseInt( yearB[ 1 ], 10 );
} else {
// descending
return parseInt( yearA[ 1 ], 10 ) < parseInt( yearB[ 1 ], 10 );
}
};
});
});
</script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html" class="current">Sortable</a>
<a href="stack.html">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Sortable Table</h2>
<h3 class="docs">Default appearance (with optional sortable-switch)</h3>

<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
<th id="custom-sort" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
<td>1</td>
<td>11/2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
<td>2</td>
<td>12/1997</td>
<td>88%</td>
<td>$2.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
<td>3</td>
<td>3/2012</td>
<td>92%</td>
<td>$1.5B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
<td>4</td>
<td>5/2011</td>
<td>96%</td>
<td>$1.3B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
<td>5</td>
<td>9/2013</td>
<td>89%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
<td>6</td>
<td>1/2013</td>
<td>78%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
<td>7</td>
<td>3/2011</td>
<td>36%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
<td>8</td>
<td>4/2003</td>
<td>95%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
<td>9</td>
<td>11/2012</td>
<td>92%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
<td>10</td>
<td>12/2014</td>
<td>18%</td>
<td>$1.0B</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
4 changes: 3 additions & 1 deletion src/tables.sortable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,9 @@
};

cells = getCells( rows );
fn = getSortFxn( ascending, $( col ).is( '[data-sortable-numeric]' ) );
var customFn = $( col ).data( 'tablesaw-sort' );
fn = ( customFn && typeof customFn === "function" ? customFn( ascending ) : false ) ||
getSortFxn( ascending, $( col ).is( '[data-sortable-numeric]' ) );
sorted = cells.sort( fn );
rows = applyToRows( sorted , rows );
return rows;
Expand Down

0 comments on commit ce96461

Please sign in to comment.