Default Sorting
First click sorts by ascending order, second by descending, and third removes the sorting and resets to the natural order.
Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid Demo</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } zing-grid { overflow: hidden; } zing-grid[loading] { height: 373px; } </style> </head> <body class="zg-body"> <zing-grid caption="Class Schedules" sort viewport-stop data='[ { "class": "Biology 101", "days": "M/W", "time": "7:00 - 8:30am", "instructor": "Foster" }, { "class": "C++ Programming 101", "days" : "-- TBD --", "time": "-- TBD --", "instructor": "Smith" }, { "class": "Biology 101", "days" : "T/TH", "time": "2:30 - 4:00pm", "instructor": "Doe" }, { "class": "Biology 101", "days" : "-- TBD --", "time": "-- TBD --", "instructor": "-- TBD --" }, { "class": "C++ Programming 101", "days" : "M", "time": "10:00 - 12:30pm", "instructor": "-- TBD --" } ]'> </zing-grid> <script></script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid Demo</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="Class Schedules" sort viewport-stop data='[ { "class": "Biology 101", "days": "M/W", "time": "7:00 - 8:30am", "instructor": "Foster" }, { "class": "C++ Programming 101", "days" : "-- TBD --", "time": "-- TBD --", "instructor": "Smith" }, { "class": "Biology 101", "days" : "T/TH", "time": "2:30 - 4:00pm", "instructor": "Doe" }, { "class": "Biology 101", "days" : "-- TBD --", "time": "-- TBD --", "instructor": "-- TBD --" }, { "class": "C++ Programming 101", "days" : "M", "time": "10:00 - 12:30pm", "instructor": "-- TBD --" } ]'> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} zing-grid { overflow: hidden; }
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!