Demos Back to Docs

Remove Filter from Columns

61 of 124
You can remove a column filter by defining the filter="disabled" attribute on your columns. This is useful for disabling the default filters that are added to every column.
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/dev/zinggrid-dev.min.js"></script>
  <style>
    zing-grid[loading] {
      height: 653px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="HTML filter Ex" filter 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>
      <!-- remove filter from column -->
      <zg-column index="title" filter="disabled"></zg-column>
      <zg-column index="year" filter="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></script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
	</head>
	<body class="zg-body">
		<zing-grid 
      caption="HTML filter Ex"
      filter
      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>
        <!-- remove filter from column -->
      	<zg-column index="title" filter="disabled"></zg-column>
      	<zg-column index="year" filter="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>

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