First Name | Last Name | Age | Birthday |
---|---|---|---|
Tatyana | Thrash | 64 | 15 Feb 1960 |
Keven | Keniston | 20 | 23 Dec 2003 |
Faviola | Frankum | 97 | 26 Sep 1927 |
Suzan | Sweetman | 53 | 10 Jul 1971 |
Demetrius | Derosia | 32 | 13 Dec 1992 |
Leo | Lupo | 64 | 21 May 1960 |
Merlene | Mach | 105 | 2 Aug 1919 |
Nikki | Nath | 78 | 30 Nov 1946 |
Almeta | Acosta | 30 | 9 Jul 1994 |
Ferne | Fizer | 76 | 18 May 1948 |
Jennie | Jamieson | 34 | 11 Apr 1990 |
Isa | Isakson | 103 | 29 Oct 1921 |
Lakeesha | Lovell | 100 | 31 Jul 1924 |
Nyla | Niemiec | 28 | 15 Sep 1996 |
Sheron | Schmitmeyer | 57 | 22 Aug 1967 |
Elfrieda | Eguia | 79 | 20 Nov 1945 |
Stefany | Sheffey | 69 | 30 Nov 1955 |
Sudie | Suiter | 54 | 25 Sep 1970 |
Tristan | Townsley | 30 | 8 May 1994 |
Keitha | Kellen | 47 | 9 Jun 1977 |
Virgil | Victorino | 36 | 23 Jun 1988 |
Marvin | Mcfate | 50 | 20 Jun 1974 |
Trang | Tony | 42 | 4 Jun 1982 |
Lecia | Luong | 58 | 22 Jul 1966 |
Lon | Leung | 71 | 14 Feb 1953 |
Adah | Abell | 103 | 22 May 1921 |
Estefana | Ecklund | 100 | 9 Feb 1924 |
Simonne | Strauch | 84 | 21 Oct 1940 |
Osvaldo | Okane | 54 | 13 Jul 1970 |
Aurora | Archibald | 29 | 24 Dec 1994 |
Carina | Corby | 67 | 21 Oct 1957 |
Garth | Garr | 64 | 29 Jun 1960 |
Jayna | Jacobs | 86 | 12 Aug 1938 |
Rhoda | Rountree | 32 | 29 Jan 1992 |
Jacquelin | Jaco | 48 | 15 May 1976 |
Deangelo | Dressel | 47 | 3 Apr 1977 |
Man | Manalo | 94 | 21 Aug 1930 |
Violet | Vanzant | 84 | 16 May 1940 |
Jc | Joesph | 49 | 20 Feb 1975 |
Thomasine | Tripodi | 86 | 1 Sep 1938 |
Crissy | Collins | 58 | 12 Jun 1966 |
Jeffry | Jolly | 82 | 22 Jun 1942 |
Donnetta | Ducharme | 105 | 10 May 1919 |
Kayleen | Keehn | 83 | 12 Jul 1941 |
Shirleen | Sanford | 46 | 22 Nov 1978 |
Clora | Curlin | 59 | 20 Apr 1965 |
Cecille | Creed | 71 | 24 Jan 1953 |
Normand | Nolen | 92 | 30 Jan 1932 |
Horacio | Hazelrigg | 78 | 1 Jul 1946 |
Eloisa | Eisenberg | 25 | 15 Dec 1998 |
The first parameter passed to smpSortableTable()
is the data structure
containing the table data. If you would like to use the data from the table instead,
this parameter may be omitted or false
. (See examples below.)
The second parameter is the maximum number of rows to display. If omitted, the maximum number of rows will default to 10.
Localization may be set using an optional third parameter. Currently, English
("en"
), Spanish ("es"
), Portuguese ("pt"
),
and Symbols ("symbols"
) are supported.
(Thanks Víctor)
The table is optionally responsive for screens narrower than 768px
. At this width,
table cells will collapse down onto individual lines, prefixed by the column header
text. Column headers will display as buttons at the top of the table. At 450px
, the
navigation buttons at the bottom of the table will also collapse onto their own lines.
Responsiveness, as well as other options, can be set in the optional
settings
parameter.
<table id="people-table">
<thead>
<tr>
<th id="fname">First Name</th>
<th id="lname">Last Name</th>
<th id="age" class="smp-not-sortable">Age</th>
<th id="bdate">Birthday</th>
</tr>
</thead>
<tbody></tbody>
</table>
...
<script type="text/javascript">
const people = [{
"fname": "Tanner",
"lname": "Conner",
"age": 99,
"bdate": {
"text": "9 Apr 1925",
"sort": -1411540671
}
}, {
"fname": "Karin",
"lname": "Book",
"age": 39,
"bdate": {
"text": "21 Jan 1985",
"sort": 475176129
}
}, {
...
}] ;
let rows = 10 ;
let language = "en" ;
let settings = {
responsive: true, // Make table responsive at 768px (default: true)
stateful: true, // Whether to track table state in URL (default: true)
emptyCell: "N/A", // Text to display in empty cells (default: "N/A")
tr: {
class:"some-class" // Additional row class(es)
},
td: {
class:"some-other-class" // Additional cell class(es)
}
} ;
$('#people-table').smpSortableTable(people, rows, language, settings);
</script>
<table id="people-table">
<thead>
<tr>
<th id="fname">First Name</th>
<th id="lname">Last Name</th>
<th id="age" class="smp-not-sortable">Age</th>
<th id="bdate">Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tatyana</td>
<td>Thrash</td>
<td>64</td>
<td data-smp-sort="-311713200">15 Feb 1960</td>
</tr>
<tr>
<td>Keven</td>
<td>Keniston</td>
<td>20</td>
<td data-smp-sort="1072155600">23 Dec 2003</td>
</tr>
<tr>
...
</tr>
</tbody>
</table>
...
<script type="text/javascript">
let rows = 10 ;
let language = "en" ;
let settings = {
responsive: true, // Make table responsive at 768px (default: true)
stateful: true, // Whether to track table state in URL (default: true)
emptyCell: "N/A", // Text to display in empty cells (default: "N/A")
tr: {
class:"some-class" // Additional row class(es)
},
td: {
class:"some-other-class" // Additional cell class(es)
}
} ;
$('#people-table').smpSortableTable(false, rows, language, settings);
</script>