<!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="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> <!-- 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> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </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="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> <!-- 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>