Skip to content

Commit bd9f05b

Browse files
kyle-wannacottkyle-wannacott
committed
Update docs to include data-sort class tag and some other minor edits.
1 parent 003e1fd commit bd9f05b

File tree

3 files changed

+173
-74
lines changed

3 files changed

+173
-74
lines changed

‎public/docs/about.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,14 @@ <h2> Objectives of table-sort-js:</h2>
6666
<hr>
6767
<br>
6868
<ul>
69-
<li class="bullet-point">Be easy to use (add class "table-sort" on
70-
&lt;table&gt; tags to make a table sortable).</li>
69+
<li class="bullet-point">Be easy to use; add class "table-sort" on
70+
&lt;table&gt; tags to make a table sortable.</li>
7171
<li class="bullet-point">Having no dependencies keeps the library
72-
size down and avoids the left-pad fiasco. (for example jquery is around 80KB.</li>
72+
size down and avoids the left-pad fiasco. (for example jquery is around 80KB).</li>
7373
<li class="bullet-point">Be versatile; sorts dates, numbers (in a
74-
natural order), alphanumeric, etc.</li>
75-
<li class="bullet-point"> Minimal changes to the CSS of tables,
76-
Allow users to style tables how they wish, (Bootstap etc.)</li>
74+
natural order), alphanumeric, etc; out of the box.</li>
75+
<li class="bullet-point"> Minimal changes to the CSS of tables;
76+
Allow users to style tables how they wish, (Bootstap, Tailwind, etc.)</li>
7777
</ul>
7878
</div>
7979
</div>

‎public/docs/classes.html‎

Lines changed: 124 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>table-sort-js : documentation</title>
6-
<link rel="stylesheet" href="index.css" />
76
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
7+
<link rel="stylesheet" href="index.css" />
88
<script src="../table-sort.js"></script>
9+
<link href="assets/solarized-dark.css" rel="stylesheet" type="text/css" />
910
</head>
1011
<body>
12+
<script src="./assets/rainbow.js"></script>
1113
<div class="wrapper">
1214
<div class="sidebar">
1315
<h2>table-sort-js</h2>
@@ -63,48 +65,145 @@ <h2>table-sort-js</h2>
6365
<div class="main_content">
6466
<div class="header">Classes that can be used with table-sort-js.</div>
6567
<div class="info">
66-
<table class="table table-sort" id="classes-table" style="width: 100%">
68+
<table
69+
class="table table-sort"
70+
id="classes-table"
71+
style="width: 100%"
72+
>
6773
<thead>
68-
<tr>
69-
<th>&lt;table class=""&gt;</th>
70-
<th>Description</th>
71-
</tr>
74+
<tr>
75+
<th>&lt;table class=""&gt;</th>
76+
<th>Description</th>
77+
</tr>
7278
</thead>
7379
<tr>
7480
<td>table-sort</td>
75-
<td>Make tables sortable!. Sorts: Words, Numbers(naturally) and Dates
76-
out of the box without any config.</td>
81+
<td>
82+
Make tables sortable!. Sorts: Words, Numbers(naturally) and
83+
Dates out of the box without any config.
84+
</td>
7785
</tr>
7886
<tr>
7987
<td>table-arrows</td>
80-
<td>Adds up or down arrows to indicate whether column is sorted in aescending
81-
or descending order.</td>
88+
<td>
89+
Adds up or down arrows to indicate whether column is sorted in
90+
aescending or descending order.
91+
</td>
8292
</tr>
8393
</table>
84-
<br>
85-
<table class="table table-sort" id="classes-table" style="width: 100%">
94+
<br />
95+
<table
96+
class="table table-sort"
97+
id="classes-table"
98+
style="width: 100%"
99+
>
86100
<thead>
87-
<tr>
88-
<th>&lt;th class=""></th>
89-
<th>Description</th>
90-
</tr>
101+
<tr>
102+
<th>&lt;th class=""></th>
103+
<th>Description</th>
104+
</tr>
91105
</thead>
92106
<tr>
93107
<td>order-by-desc</td>
94-
<td>Orders by descending on the first click of a column (default
95-
aescending). Naming inspired by
96-
SQL.</td>
108+
<td>
109+
Orders by descending on the first click of a column (default
110+
aescending). Naming inspired by SQL.
111+
</td>
97112
</tr>
98113
<tr>
99114
<td>file-size</td>
100-
<td>Supports sorting files sizes from bytes to Tebibytes (B -> TiB). Can be Metric prefix (e.g 10KB), or Binary
101-
prefix(e.g 25KiB) and can contain a space or no space
102-
between number and unit type (e.g 25KB or 25 KB). It converts
103-
units into numbers (bytes) does
104-
conversion and then outputs to the binary prefix rounded to two
105-
decimal places. (e.g 25.00 KiB).</td>
115+
<td>
116+
Supports sorting files sizes from bytes to Tebibytes (B -> TiB).
117+
Can be Metric prefix (e.g 10KB), or Binary prefix(e.g 25KiB) and
118+
can contain a space or no space between number and unit type
119+
(e.g 25KB or 25 KB). It converts units into numbers (bytes) does
120+
conversion and then outputs to the binary prefix rounded to two
121+
decimal places. (e.g 25.00 KiB).
122+
</td>
123+
</tr>
124+
<tr>
125+
<td>data-sort</td>
126+
<td>
127+
Sort by data <a
128+
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes"
129+
target="blank">attributes<a/>, e.g &lt;td
130+
data-sort="42"&gt;&lt;/td&gt; useful when you want to sort
131+
by the values inside of data-sort="" rather than values between
132+
td tags. For example:<br/><br/>
133+
<li>&lt;td data-sort="1"&gt;table&lt;/td&gt;</li>
134+
<li>&lt;td data-sort="2"&gt;sort&lt;/td&gt; </li>
135+
<li>&lt;td data-sort="3"&gt;js&lt;/td&gt; </li>
136+
<br/>
137+
Will end up sorting in the order 1, 2 ,3 which spells out:
138+
<mark><i>table sort
139+
js</i></mark>. As opposed to sorting what is inside the
140+
&lt;td&gt; tags alphabetically which would spell: <mark
141+
><i>js sort
142+
table</i></mark>. This is useful for making custom sorts
143+
not supported by table-sort-js.
144+
</td>
106145
</tr>
107146
</table>
147+
<br>
148+
<h3>Example using tags:</h3>
149+
150+
<pre>
151+
<code style="font-size:1.3em" data-language="html">
152+
&lt;script src="table-sort.js"&gt;&lt;/script&gt;
153+
&lt;table class="table-sort table-arrows"&gt;
154+
&lt;thead&gt;
155+
&lt;tr&gt;
156+
&lt;th class="data-sort"&gt;data&lt;/th&gt;
157+
&lt;th class="file-size"&gt;file sizes&lt;/th&gt;
158+
&lt;th class="order-by-desc"&gt;birth date&lt;/th&gt;
159+
&lt;/tr&gt;
160+
&lt;/thead&gt;
161+
&lt;tbody&gt;
162+
&lt;tr&gt;
163+
&lt;td data-sort="2"&gt;sort&lt;/td&gt;
164+
&lt;td&gt;10KiB&lt;/td&gt;
165+
&lt;td&gt;1706/1/17&lt;/td&gt;
166+
&lt;/tr&gt;
167+
&lt;tr&gt;
168+
&lt;td data-sort="3"&gt;js&lt;/td&gt;
169+
&lt;td&gt;1MB&lt;/td&gt;
170+
&lt;td&gt;1835/11/25&lt;/td&gt;
171+
&lt;/tr&gt;
172+
&lt;tr&gt;
173+
&lt;td data-sort="1"&gt;table&lt;/td&gt;
174+
&lt;td&gt;1TB&lt;/td&gt;
175+
&lt;td&gt;1835/11/30&lt;/td&gt;
176+
&lt;/tr&gt;
177+
&lt;/tbody&gt;
178+
&lt;/table&gt;
179+
</code>
180+
</pre>
181+
<table class="table-sort table-arrows" id="classes-table">
182+
<thead>
183+
<tr>
184+
<th class="data-sort">data</th>
185+
<th class="file-size">file sizes</th>
186+
<th class="order-by-desc">birth date</th>
187+
</tr>
188+
</thead>
189+
<tbody>
190+
<tr>
191+
<td data-sort="2">sort</td>
192+
<td>10KiB</td>
193+
<td>1706/1/17</td>
194+
</tr>
195+
<tr>
196+
<td data-sort="3">js</td>
197+
<td>1 MB</td>
198+
<td>1835/11/25</td>
199+
</tr>
200+
<tr>
201+
<td data-sort="1">table</td>
202+
<td>1TB</td>
203+
<td>1835/11/30</td>
204+
</tr>
205+
</tbody>
206+
</table>
108207
</div>
109208
</div>
110209
</div>

0 commit comments

Comments
 (0)