Email Column Type
ZingGrid provides a
<zg-column type="email"> column type. This column type will automatically format and validate email fields when using the built-in grid editor.
Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } .zg-body zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 421px; } </style> </head> <body class="zg-body"> <zing-grid caption="<code>email</code> Column Type" search sort> <zg-colgroup> <zg-column index="job"></zg-column> <zg-column index="email" type="email" sort="disabled"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "name": "Philip J. Fry", "actor": "Billy West", "job": "Delivery Boy", "age": 1025, "hourly_salary": 11.25, "email": "philipJFried@aol.com", "telephone": "+18584905281", "birth_date": "9/14/1974", "main_character": true, "origin": "Earth", "home_town": "New York City", "gender": "male", "species": "Human", "place_of_origin": "New York City, New York, United States", "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 2, "name": "Turanga Leela", "actor": "Katey Sagal", "job": "Captain", "age": 44, "hourly_salary": 150.00, "email": "tLeela@planetexpress.com", "telephone": "+18584905281", "birth_date": "7/29/2975", "main_character": true, "origin": "Earth", "home_town": "New New York City Sewers", "gender": "female", "species": "Mutant Human", "place_of_origin": "New York City, New York, United States", "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 3, "name": "Bender Bending Rodriguez", "actor": "John DiMaggio", "job": "Chef", "age": 24000, "hourly_salary": 25.00, "email": "bRodriguez@planetexpress.com", "telephone": "+18584905281", "birth_date": "8/04/0001", "main_character": true, "origin": "Earth", "gender": "male", "species": "Robot", "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 4, "name": "Amy Wong", "actor": "Lauren Tom", "job": "Intern", "age": 40, "hourly_salary": 14.75, "email": "aWong@hotmail.com", "telephone": "+18584905281", "birth_date": "05/04/2979", "main_character": true, "origin": "Mars", "gender": "Female", "species": "Alien", "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 5, "name": "Doctor John Zoidberg", "actor": "Billy West", "job": "Staff Doctor", "age": 92, "hourly_salary": 45.00, "email": "dr.JZoidberg@planetexpress.com", "telephone": "+18584905281", "birth_date": "5/05/2001", "main_character": true, "origin": "Decapod 10", "gender": "male", "species": "Alien", "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 6, "name": "Lord Nibbler", "actor": "Frank Welker", "job": "Ambassador to Earth", "age": 3294, "hourly_salary": 0.00, "email": "lordNibler@legend.com", "telephone": "+18584905281", "birth_date": "01/01/0001", "main_character": false, "origin": "Eternium", "gender": "male", "species": "Alien", "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg", "first_episode": "Love`s Labours Lost in Space", "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space" } ]'></zg-data> </zing-grid> <script></script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="<code>email</code> Column Type" search sort> <zg-colgroup> <zg-column index="job"></zg-column> <zg-column index="email" type="email" sort="disabled"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "name": "Philip J. Fry", "actor": "Billy West", "job": "Delivery Boy", "age": 1025, "hourly_salary": 11.25, "email": "philipJFried@aol.com", "telephone": "+18584905281", "birth_date": "9/14/1974", "main_character": true, "origin": "Earth", "home_town": "New York City", "gender": "male", "species": "Human", "place_of_origin": "New York City, New York, United States", "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 2, "name": "Turanga Leela", "actor": "Katey Sagal", "job": "Captain", "age": 44, "hourly_salary": 150.00, "email": "tLeela@planetexpress.com", "telephone": "+18584905281", "birth_date": "7/29/2975", "main_character": true, "origin": "Earth", "home_town": "New New York City Sewers", "gender": "female", "species": "Mutant Human", "place_of_origin": "New York City, New York, United States", "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 3, "name": "Bender Bending Rodriguez", "actor": "John DiMaggio", "job": "Chef", "age": 24000, "hourly_salary": 25.00, "email": "bRodriguez@planetexpress.com", "telephone": "+18584905281", "birth_date": "8/04/0001", "main_character": true, "origin": "Earth", "gender": "male", "species": "Robot", "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 4, "name": "Amy Wong", "actor": "Lauren Tom", "job": "Intern", "age": 40, "hourly_salary": 14.75, "email": "aWong@hotmail.com", "telephone": "+18584905281", "birth_date": "05/04/2979", "main_character": true, "origin": "Mars", "gender": "Female", "species": "Alien", "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 5, "name": "Doctor John Zoidberg", "actor": "Billy West", "job": "Staff Doctor", "age": 92, "hourly_salary": 45.00, "email": "dr.JZoidberg@planetexpress.com", "telephone": "+18584905281", "birth_date": "5/05/2001", "main_character": true, "origin": "Decapod 10", "gender": "male", "species": "Alien", "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 6, "name": "Lord Nibbler", "actor": "Frank Welker", "job": "Ambassador to Earth", "age": 3294, "hourly_salary": 0.00, "email": "lordNibler@legend.com", "telephone": "+18584905281", "birth_date": "01/01/0001", "main_character": false, "origin": "Eternium", "gender": "male", "species": "Alien", "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg", "first_episode": "Love`s Labours Lost in Space", "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space" } ]'></zg-data> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} .zg-body zing-grid[loading] { height:400px; }
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!