Demos Back to Docs

Column Sorted on Render

38 of 124
Add the sort-asc or sort-desc attribute to the <zg-column> you want sorted on render.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 355px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="Numbered Strings" layout="row" sort>
    <zg-data data='[
        { "number": 4510 },
        { "number": 210 },
        { "number": 0 },
        { "number": 649 }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="number" header="Not Sorted"></zg-column>
      <zg-column index="number" type="number" header="Sorted" cell-class="correct" sort-asc="true"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
    <zing-grid
      caption="Numbered Strings"
      layout="row"
      sort>
      <zg-data data='[
        { "number": 4510 },
        { "number": 210 },
        { "number": 0 },
        { "number": 649 }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column index="number" header="Not Sorted"></zg-column>
        <zg-column index="number" type="number" header="Sorted" cell-class="correct" sort-asc="true"></zg-column>
      </zg-colgroup>
    </zing-grid>
    
  </body>
</html>
.zg-body {background:#e6e6e6;}
// No JS code

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