Skip to content

Commit 71c9ab4

Browse files
adamschwartzadamschwartz
committed
Add intro, options, and themes docs pages
1 parent 38062b8 commit 71c9ab4

3 files changed

Lines changed: 202 additions & 0 deletions

File tree

‎docs/api/1-Options.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
## API Options
2+
3+
#### Initializing sortable
4+
5+
To be properly initialized and pick up the default styling, your table must add the attribute `data-sortable`.
6+
7+
Example:
8+
9+
```html
10+
<table data-sortable>
11+
<!-- ... -->
12+
</table>
13+
```
14+
15+
##### `init`
16+
17+
To initialize all tables on the page, call `init`.
18+
19+
```coffeescript
20+
sortable.init()
21+
```
22+
23+
##### `initTable`
24+
25+
To initialize an individual table, call `initTable`.
26+
27+
```coffeescript
28+
exampleTable = document.querySelector('#exampleTable[data-sortable]')
29+
sortable.initTable(exampleTable)
30+
```
31+
32+
#### Sorting options
33+
34+
##### `data-value`
35+
36+
By default, sortable will automatically detect whether a column contains alpha or numeric data. If you'd rather have a particular column sort on custom data, set the attribute `data-value` on a `<td>`.
37+
38+
```html
39+
<table data-sortable>
40+
<thead><!-- ... --></thead>
41+
<tbody>
42+
<tr>
43+
<td>Adam</td>
44+
<td data-value="1384904153699">3 hours ago</td>
45+
<td><a href="#">New</a></td>
46+
</tr>
47+
<!-- ... -->
48+
</tbody>
49+
</table>
50+
```
51+
52+
##### `th` `data-sortable="false"`
53+
54+
To disable sorting on a particular column, add `data-sortable="false"` to the `<th>` for that column.
55+
56+
```html
57+
<table data-sortable>
58+
<thead>
59+
<tr>
60+
<th>Name</th>
61+
<th>Date</th>
62+
<th data-sortable="false">Actions</th>
63+
</tr>
64+
</thead>
65+
<tbody><!-- ... --></tbody>
66+
</table>
67+
```
68+
69+
<!-- Resources for the demos -->
70+
<p style="-webkit-transform: translateZ(0)"></p>
71+
<script src="/sortable/js/sortable.js"></script>
72+
<link rel="stylesheet" href="/sortable/css/sortable-theme-light.css" />
73+
<script>setTimeout(function(){ sortable.init(); }, 0);</script>

‎docs/api/2-Themes.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
## Themes
2+
3+
To use a builtin theme, you must include the theme style sheet, and add the class name to the table to match:
4+
5+
```html
6+
<link rel="stylesheet" href="sortable-theme-light.css" />
7+
<table class="sortable-theme-light" data-sortable>
8+
<!-- ... -->
9+
</table>
10+
```
11+
12+
At the moment, there are 6 themes:
13+
14+
<table id="exampleTable" class="sortable-theme-light" data-sortable>
15+
<thead>
16+
<tr>
17+
<th data-sortable="false"></th>
18+
<th>Theme</th>
19+
<th>Class name</th>
20+
<th></th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr><td>1</td><td data-value="0">Minimal</td><td>(No class name necessary)</td><td><a href data-theme="sortable-theme-default">Preview</td></tr>
25+
<tr><td>2</td><td data-value="1">Light</td><td>sortable-theme-light</td><td><a href data-theme="sortable-theme-light">Preview</td></tr>
26+
<tr><td>3</td><td data-value="2">Dark</td><td>sortable-theme-dark</td><td><a href data-theme="sortable-theme-dark">Preview</td></tr>
27+
<tr><td>4</td><td data-value="3">Bootstrap</td><td>sortable-bootstrap</td><td><a href data-theme="sortable-theme-bootstrap">Preview</td></tr>
28+
<tr><td>5</td><td data-value="4">Slick</td><td>sortable-theme-slick</td><td><a href data-theme="sortable-theme-flat-slick">Preview</td></tr>
29+
<tr><td>6</td><td data-value="5">Finder</td><td>sortable-theme-finder</td><td><a href data-theme="sortable-theme-finder">Preview</td></tr>
30+
</tbody>
31+
</table>
32+
33+
You can download a release (containing all 6 themes) [here](/sortable). Or you can download them individually [here](https://github.com/HubSpot/sortable/tree/master/css).
34+
35+
<!-- Resources for the demos -->
36+
<p style="-webkit-transform: translateZ(0)"></p>
37+
<script src="/sortable/js/sortable.js"></script>
38+
<script>setTimeout(function(){ sortable.init(); }, 0);</script>
39+
<style>
40+
.hs-doc-content table {
41+
border: 0;
42+
}
43+
.hs-doc-content table th {
44+
background: initial;
45+
}
46+
</style>
47+
<link rel="stylesheet" href="/sortable/css/sortable-theme-minimal.css" />
48+
<link rel="stylesheet" href="/sortable/css/sortable-theme-light.css">
49+
<link rel="stylesheet" href="/sortable/css/sortable-theme-dark.css">
50+
<link rel="stylesheet" href="/sortable/css/sortable-theme-bootstrap.css">
51+
<link rel="stylesheet" href="/sortable/css/sortable-theme-slick.css">
52+
<link rel="stylesheet" href="/sortable/css/sortable-theme-finder.css">
53+
<script>
54+
$('[data-theme]').each(function(){
55+
$(this).click(function(e){
56+
e.preventDefault();
57+
$('#exampleTable').get(0).className = $(this).data('theme');
58+
return false;
59+
});
60+
});
61+
</script>

‎docs/intro.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
## Sortable
2+
3+
Sortable is an open-source javascript and CSS library which adds sorting functionality to tables. It is tiny (<code>&lt;2kb</code>) and has no dependencies.
4+
5+
#### Demo
6+
7+
<p style="display: none"></p>
8+
<table data-sortable> <thead> <tr> <th data-sortable="false">Browser</th> <th data-sorted="true" data-sorted-direction="descending">Usage</th> <th>Initial release</th> <th>Stable version</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>42.68%</td> <td data-value="2008">September 2, 2008</td> <td>31.0.1650.57</td> </tr> <tr> <td>Internet Explorer</td> <td>25.44%</td> <td data-value="1995">August 16, 1995</td> <td>11.0.1</td> </tr> <tr> <td>Firefox</td> <td>20.01%</td> <td data-value="2002">September 23, 2002</td> <td>25.0.1</td> </tr> <tr> <td>Safari</td> <td>8.39%</td> <td data-value="2003">January 7, 2003</td> <td>7.0</td> </tr> <tr> <td>Opera</td> <td>1.03%</td> <td data-value="1994">Late 1994</td> <td>18.0.1284.49</td> </tr> <tr> <td>Other</td> <td data-value="0">2.44%</td> <td data-value="-1"></td> <td></td> </tr> </tbody> </table>
9+
<p style="display: none"></p>
10+
11+
#### Features
12+
13+
- Drop-in script and styles
14+
- 6 beautiful CSS themes
15+
- Tiny footprint (<code>&lt;2kb</code>) and no dependencies
16+
- Looks and behaves great on mobile devices
17+
18+
#### Requirements
19+
20+
- None
21+
22+
#### Browser Support
23+
24+
- IE10+
25+
- Firefox 4+
26+
- Current WebKit (Chrome, Safari)
27+
- Opera
28+
29+
#### Including
30+
31+
For the most common usage of sortable, you'll want to include following:
32+
33+
```html
34+
<script src="sortable.min.js"></script>
35+
<link rel="stylesheet" href="sortable-theme-light.css" />
36+
<script>setTimeout(function(){ sortable.init(); }, 0);</script>
37+
```
38+
39+
Now any table with the attribute `data-sortable` will be made sortable. To get the styling, you'll also need to add a class name to the table to match the theme you chose:
40+
41+
```html
42+
<table class="sortable-theme-light" data-sortable>
43+
<!-- ... -->
44+
</table>
45+
```
46+
47+
This example uses the "light" theme. For a full list of supported themes, check out [Themes](/sortable/api/themes).
48+
49+
#### Learn More
50+
51+
To learn more about how to use sortable, visit our API pages.
52+
53+
- [Basic](http://github.hubspot.com/vex/api/basic)
54+
- [Themes](http://github.hubspot.com/vex/api/themes)
55+
56+
#### Credits
57+
58+
Sortable is free and open-source, released on the [MIT Licenese](https://github.com/HubSpot/sortable/blob/master/LICENSE).
59+
60+
#### Credits
61+
62+
Sortable was built by [Adam Schwartz](http://twitter.com/adamfschwartz)
63+
64+
<!-- Resources for the demos -->
65+
<p style="-webkit-transform: translateZ(0)"></p>
66+
<script src="/sortable/js/sortable.js"></script>
67+
<link rel="stylesheet" href="/sortable/css/sortable-theme-light.css" />
68+
<script>setTimeout(function(){ sortable.init(); }, 0);</script>

0 commit comments

Comments
 (0)