Demos Back to Docs

Row Selector Column Type

2 of 124
ZingGrid provides a <zg-column type="selector"> column type. This column type is a render-only field and will automatically display a checkbox to select or multi-select rows to delete.
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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

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

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

<body class="zg-body">
  <zing-grid caption="<code>row-selector</code> Column Type" row-selector search sort editor src="https://cdn.zinggrid.com/datasets/users.json">
    <zg-column index="name"></zg-column>
    <zg-column index="origin"></zg-column>
  </zing-grid>
  <script></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" defer></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="<code>row-selector</code> Column Type"
      row-selector
      search
      sort
      editor
      src="https://cdn.zinggrid.com/datasets/users.json">
      <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;
}

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