Demos Back to Docs

Default Sorting

110 of 124
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 Download

Full 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;
}

Related Docs

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!

Edit in Studio

Related Docs

Demo Gallery