experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-sorting
mode: provenance
representation: html
origin_response_id: b598eb519865ab3c4df6563b6d8e0aea
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.581Z
version_nonce: 7d00a1ba7fbce35473f211fb5ccd1616
generated_at_utc: 2026-10-25T01:38:35.934Z
response_nonce: 154f059db47211e4f3fe1a279214d267

Default Sorting

111 of 125
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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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;
}
// No JS code

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

Demo Gallery