experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-sorting
mode: provenance
representation: html
origin_response_id: f8272c780491275f25c0e4e4b29e072c
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.581Z
version_nonce: 7d00a1ba7fbce35473f211fb5ccd1616
generated_at_utc: 2026-11-15T01:34:53.241Z
response_nonce: da52885034322dbb385ec8576db71628

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