Demos Back to Docs

Default Search

122 of 124
Once you add the search attribute, a search icon will appear on the caption to make the grid searchable.
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>
    zing-grid[loading] {
      height: 380px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Actors/Actresses" search pager page-size="4">
    <zg-data data='[{"name": "Tom Hanks"}, {"name": "Meryl Streep"}, {"name": "Matt Damon"}, {"name": "Morgan Freeman"}, {"name": "Julia Roberts"}, {"name": "Brad Pitt"}, {"name": "Natalie Portman"}, {"name": "Angelina Jolie"}, {"name": "Johnny Depp"}, {"name": "Keira Knightley"}, {"name": "Harrison Ford"}]'></zg-data>
  </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" search pager page-size="4">
		  <zg-data data='[{"name": "Tom Hanks"}, {"name": "Meryl Streep"}, {"name": "Matt Damon"}, {"name": "Morgan Freeman"}, {"name": "Julia Roberts"}, {"name": "Brad Pitt"}, {"name": "Natalie Portman"}, {"name": "Angelina Jolie"}, {"name": "Johnny Depp"}, {"name": "Keira Knightley"}, {"name": "Harrison Ford"}]'></zg-data>
		</zing-grid>
	</body>
</html>
/* No CSS styles */
// 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