Demos Back to Docs

Native Element Column Type

11 of 124
ZingGrid provides a <zg-column type="element"> column type. This column type wraps cell content to tags specified by the type-element-tag-name attribute. The cell editor is input type string.
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: 481px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid editor caption="<code>element</code> Column Type" search sort editor-controls>
    <zg-colgroup>
      <zg-column index="name" type="element" type-element-tag-name="em" header="em"></zg-column>
      <zg-column index="nameB" type="element" type-element-tag-name="b" header="b"></zg-column>
      <zg-column index="nameH3" type="element" type-element-tag-name="h3" header="h3"></zg-column>
    </zg-colgroup>
    <zg-data data='[
        {
          "id": 1,
          "name": "Philip J. Fry",
          "nameB": "Philip J. Fry",
          "nameH3": "Philip J. Fry"
        },
        {
          "id": 2,
          "name": "Turanga Leela",
          "nameB": "Turanga Leela",
          "nameH3": "Turanga Leela"
        },
        {
          "id": 3,
          "name": "Bender Bending Rodriguez",
          "nameB": "Bender Bending Rodriguez",
          "nameH3": "Bender Bending Rodriguez"
        },
        {
          "id": 4,
          "name": "Amy Wong",
          "nameB": "Amy Wong",
          "nameH3": "Amy Wong"
        },
        {
          "id": 5,
          "name": "Doctor John Zoidberg",
          "nameB": "Doctor John Zoidberg",
          "nameH3": "Doctor John Zoidberg"
        },
        {
          "id": 6,
          "name": "Lord Nibbler",
          "nameB": "Lord Nibbler",
          "nameH3": "Lord Nibbler"
        }
      ]'></zg-data>
  </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
    editor
      caption="<code>element</code> Column Type"
      search
      sort
      editor-controls>
      <zg-colgroup>
        <zg-column index="name" type="element" type-element-tag-name="em" header="em"></zg-column>
        <zg-column index="nameB" type="element" type-element-tag-name="b" header="b"></zg-column>
        <zg-column index="nameH3" type="element" type-element-tag-name="h3" header="h3"></zg-column>
      </zg-colgroup>
      <zg-data data='[
        {
          "id": 1,
          "name": "Philip J. Fry",
          "nameB": "Philip J. Fry",
          "nameH3": "Philip J. Fry"
        },
        {
          "id": 2,
          "name": "Turanga Leela",
          "nameB": "Turanga Leela",
          "nameH3": "Turanga Leela"
        },
        {
          "id": 3,
          "name": "Bender Bending Rodriguez",
          "nameB": "Bender Bending Rodriguez",
          "nameH3": "Bender Bending Rodriguez"
        },
        {
          "id": 4,
          "name": "Amy Wong",
          "nameB": "Amy Wong",
          "nameH3": "Amy Wong"
        },
        {
          "id": 5,
          "name": "Doctor John Zoidberg",
          "nameB": "Doctor John Zoidberg",
          "nameH3": "Doctor John Zoidberg"
        },
        {
          "id": 6,
          "name": "Lord Nibbler",
          "nameB": "Lord Nibbler",
          "nameH3": "Lord Nibbler"
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

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

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