Row Selection
Row selection will allow you to select all cells in a row by clicking the checkbox input. You can do batch actions (e.g., delete) when you select rows this way.
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/zinggrid.min.js"></script> <style> zing-grid[loading] { height: 325px; } </style> </head> <body class="zg-body"> <zing-grid selector> <zg-colgroup> <zg-column type="selector"></zg-column> <zg-column index="name" header="Name"></zg-column> <zg-column index="num" header="Phone #"></zg-column> </zg-colgroup> <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data> </zing-grid> <script></script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid Demo</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid selector> <zg-colgroup> <zg-column type="selector"></zg-column> <zg-column index="name" header="Name"></zg-column> <zg-column index="num" header="Phone #"></zg-column> </zg-colgroup> <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data> </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!