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
Download
Full 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> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </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; }
// No JS code
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!