Row Number Column Type

21 of 125

ZingGrid provides a <zg-column type="row-number"> column type. This column type is a render-only field and will automatically display the index of the row.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/0CJSMWH3

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

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

    .zg-body zing-grid[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <zing-grid caption="<code>row-number</code> Column Type" search sort editor src="https://cdn.zinggrid.com/datasets/users.json">
    <zg-column type="row-number"></zg-column>
    <zg-column index="name"></zg-column>
    <zg-column index="origin"></zg-column>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="<code>row-number</code> Column Type"
      search
      sort
      editor
      src="https://cdn.zinggrid.com/datasets/users.json">
      <zg-column type="row-number"></zg-column>
      <zg-column index="name"></zg-column>
      <zg-column index="origin"></zg-column>
    </zing-grid>
  </body>
</html>

.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] {
  height:400px;
}

// 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

Row Number Column Type

Full Code

Related Docs

Related Docs

Demo Gallery