experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-search-subset-of-columns
mode: provenance
representation: html
origin_response_id: 1912e4ca6695cb2c12885e08668015b6
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.577Z
version_nonce: 4e1e6f4fee30123ca11e685938c96048
generated_at_utc: 2026-11-08T23:26:26.666Z
response_nonce: 842a401332b2a631f64f3b94d6dc557f
Demos Back to Docs

Search Subset of Columns

64 of 125
You can search a subset of columns by defining the search="disabled" attribute on columns you do not want to show up in the search. This is useful for turning off search on image columns. Try searching for "storage" in the following demo:
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;
    }

    zg-cell img {
      width: 100px;
      height: 100px;
    }

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

<body class="zg-body">
  <zing-grid caption="Actors/Actresses" src="https://cdn.zinggrid.com/datasets/users.json" search pager page-size="4">
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="actor"></zg-column>
      <zg-column index="job"></zg-column>
      <zg-column index="origin"></zg-column>
      <!-- excluded columns from search -->
      <zg-column type="image" index="img" search="disabled"></zg-column>
      <!-- column so you can view the string for the image url -->
      <zg-column index="img" search="disabled"></zg-column>
    </zg-colgroup>
  </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="Actors/Actresses"
      src="https://cdn.zinggrid.com/datasets/users.json"
      search pager page-size="4">
      <zg-colgroup>
        <zg-column index="name"></zg-column>
        <zg-column index="actor"></zg-column>
        <zg-column index="job"></zg-column>
        <zg-column index="origin"></zg-column>
        <!-- excluded columns from search -->
        <zg-column type="image" index="img" search="disabled"></zg-column>
        <!-- column so you can view the string for the image url -->
        <zg-column index="img" search="disabled"></zg-column>
      </zg-colgroup>
    </zing-grid>
	</body>
</html>
.zg-body {background:#e6e6e6;}

zg-cell img { width:100px; height:100px; }
// 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