Remove Filter from Columns
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 DownloadFull 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>
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!