Basic usage
The below example makes the table with the id attribute value of example-1 sortable using the default options and styling provided by the default stylesheet (sortable.css).
sortable('#example-1');
| ID | First Name | Surname | Date of Birth | Email Address | Donation | IP Address |
|---|---|---|---|---|---|---|
| 8074 | Gay | Clark | Jul 14, 1991 | cursus@aol.net | 20.02 | 95.230.218.101 |
| 8548 | Candace | Cain | Apr 17, 1995 | erat.vivamus.nisi@outlook.edu | 99.33 | 124.157.239.56 |
| 2878 | Zeph | Acosta | Aug 11, 1991 | penatibus.et@yahoo.org | 97.88 | 237.147.199.198 |
| 8586 | Yoshio | Hopper | Jul 1, 2000 | aliquet.magna.a@aol.ca | 78.07 | 214.183.243.28 |
| 7336 | Ursula | Welch | Aug 21, 1995 | odio@yahoo.edu | 64.97 | 54.113.112.160 |
| 8353 | Ivor | Combs | Jun 12, 1999 | dolor.dolor@google.org | 53.30 | 177.224.126.72 |
| 5589 | Simon | Haley | Jun 8, 1992 | proin@icloud.com | 72.56 | 217.236.56.182 |
| 2873 | Orlando | Zamora | Jul 31, 1991 | nec@aol.edu | 38.83 | 117.200.39.162 |
| 2175 | Colt | Lucas | Apr 30, 1995 | in@aol.com | 70.90 | 68.114.16.232 |
| 1875 | Colette | Stout | May 11, 1995 | neque.in.ornare@aol.com | 84.21 | 112.142.211.169 |
Advanced usage
The below example makes the table with the id attribute value of example-2 sortable and makes use of the options parameter to add custom CSS classes.
sortable('#example-2', {
buttonClasses: ['btn', 'btn-sm', 'btn-outline-dark', 'w-100'],
sortClasses: ['bg-light'],
sortStringClasses: ['fst-italic'],
sortNumberClasses: ['font-monospace', 'text-end', 'small'],
sortDateClasses: ['text-uppercase', 'small'],
sortDotDecimalClasses: ['font-monospace', 'text-end', 'small'],
sortAscendingClasses: ['bg-opacity-100'],
sortDescendingClasses: ['bg-opacity-75']
});
| ID | First Name | Surname | Date of Birth | Email Address | Donation | IP Address |
|---|---|---|---|---|---|---|
| 2539 | Naida | Day | Jul 4, 1987 | ornare.lectus@yahoo.ca | 86.13 | 13.212.157.126 |
| 2903 | Ignatius | Yang | Dec 8, 1995 | ornare@icloud.ca | 91.26 | 85.93.101.112 |
| 2378 | Vincent | Ruiz | Feb 15, 1994 | ac@outlook.edu | 47.91 | 2.42.135.144 |
| 4752 | Hilda | Larson | May 11, 1986 | taciti.sociosqu@hotmail.com | 22.29 | 72.134.238.161 |
| 3852 | Brenden | Santiago | Aug 22, 1995 | mattis@protonmail.net | 22.62 | 24.57.165.54 |
| 5365 | MacKensie | Hess | Nov 4, 1994 | semper@google.net | 40.67 | 176.53.119.255 |
| 1965 | Colton | Cervantes | Jan 17, 1997 | adipiscing.elit@protonmail.org | 43.33 | 97.205.145.49 |
| 6526 | Morgan | Monroe | Jul 30, 2000 | id.libero@google.couk | 29.35 | 60.211.192.84 |
| 4969 | Gareth | Key | Nov 24, 1999 | malesuada.vel.venenatis@hotmail.org | 62.56 | 206.221.197.88 |
| 6534 | Nichole | Pacheco | Nov 19, 1995 | nec@outlook.ca | 22.96 | 157.232.111.27 |
| 9985 | Bevis | Pittman | Jun 29, 1997 | mi.duis.risus@aol.ca | 69.17 | 218.230.218.226 |
| 9998 | Xavier | Mullen | Sep 12, 2002 | eu.euismod.ac@protonmail.ca | 46.47 | 45.73.4.132 |
| 5065 | Stewart | Wood | Mar 7, 1993 | et@protonmail.org | 9.47 | 7.99.32.216 |
| 8862 | Tatiana | Gray | Jun 26, 1988 | vivamus.rhoncus@outlook.com | 53.48 | 190.131.31.230 |
| 5124 | Haley | Reese | Sep 15, 1993 | nec@protonmail.com | 74.74 | 157.26.203.196 |
| 3686 | Karina | Barrera | Mar 21, 1985 | ligula.aenean.euismod@aol.org | 97.85 | 192.249.114.156 |
| 8639 | Katelyn | Stephenson | Jul 17, 2002 | neque.venenatis@aol.com | 91.92 | 237.242.178.0 |
| 3977 | Cally | Mccray | Jun 1, 1990 | blandit.nam@icloud.ca | 4.09 | 243.146.10.64 |
| 5642 | Hop | Gross | Jul 13, 1989 | cras.vehicula.aliquet@google.org | 88.55 | 247.85.6.89 |
| 8288 | Tate | Myers | Sep 11, 1988 | et@protonmail.ca | 39.47 | 6.15.221.239 |