Demos Back to Docs

Filter Types

90 of 124
Defining <zg-column> types will adjust the filter to the corresponding input type. We support different types of filtering so if you have a predefined set of options you want to filter by, you can filter by select dropdown.
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: 653px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Filter Types" filter="both" viewport-stop>
    <zg-data data=' [{
        "title": "The Shawshank Redemption", 
        "year": "1994", 
        "genre": "Crime, Drama"
      }, {
        "title": "The Godfather", 
        "year": "1972", 
        "genre": "Crime, Drama"
      }, {
        "title": "Forest Gump", 
        "year": "1994", 
        "genre": "Comedy, Drama, Romance"
      }, {
        "title": "The Matrix", 
        "year": "1999", 
        "genre": "Action, Sci-Fi"
      }, {
        "title": "Inception", 
        "year": "2010", 
        "genre": "Action, Adventure, Sci-Fi"
      }, {
        "title": "Pulp Fiction", 
        "year": "1994", 
        "genre": "Crime, Drama"
      }, {
        "title": "Django Unchained", 
        "year": "2012", 
        "genre": "Drama, Western"
      }, {
        "title": "The Prestige", 
        "year": "2006", 
        "genre": "Drama, Mystery, Sci-Fi"
      }, {
        "title": "Memento", 
        "year": "2000", 
        "genre": "Mystery, Thriller"
      }, {
        "title": "Gone Girl", 
        "year": "2014", 
        "genre":"Crime, Drama, Mystery"
      }]'>
    </zg-data>
    <zg-colgroup>
      <!-- default type is text -->
      <zg-column index="title"></zg-column>
      <zg-column index="year" type="number" type-number-formatting="disabled"></zg-column>
      <zg-column index="genre" type="select" type-select-options="Crime, Drama, Romance, Sci-Fi, Western, Mystery, Thriller"></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="Filter Types"
      filter="both"
      viewport-stop>
		  <zg-data data=' [{
        "title": "The Shawshank Redemption", 
        "year": "1994", 
        "genre": "Crime, Drama"
      }, {
        "title": "The Godfather", 
        "year": "1972", 
        "genre": "Crime, Drama"
      }, {
        "title": "Forest Gump", 
        "year": "1994", 
        "genre": "Comedy, Drama, Romance"
      }, {
        "title": "The Matrix", 
        "year": "1999", 
        "genre": "Action, Sci-Fi"
      }, {
        "title": "Inception", 
        "year": "2010", 
        "genre": "Action, Adventure, Sci-Fi"
      }, {
        "title": "Pulp Fiction", 
        "year": "1994", 
        "genre": "Crime, Drama"
      }, {
        "title": "Django Unchained", 
        "year": "2012", 
        "genre": "Drama, Western"
      }, {
        "title": "The Prestige", 
        "year": "2006", 
        "genre": "Drama, Mystery, Sci-Fi"
      }, {
        "title": "Memento", 
        "year": "2000", 
        "genre": "Mystery, Thriller"
      }, {
        "title": "Gone Girl", 
        "year": "2014", 
        "genre":"Crime, Drama, Mystery"
      }]'>
		  </zg-data>
      <zg-colgroup>
        <!-- default type is text -->
      	<zg-column index="title"></zg-column>
      	<zg-column index="year" type="number" type-number-formatting="disabled"></zg-column>
      	<zg-column index="genre" type="select" type-select-options="Crime, Drama, Romance, Sci-Fi, Western, Mystery, Thriller"></zg-column>
      </zg-colgroup>
		</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