Row Selector Column Type
ZingGrid provides a
<zg-column type="selector">
column type. This column type is a render-only field and will automatically display a checkbox to select or multi-select rows to delete.Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> <!-- Point ZingChart to modules folder so ZingChart can automatically grab the CSV module --> <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; </script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { min-height: 150px; overflow: auto; position: relative; width: 100%; height: 100%; } #myChart { width: 100%; height: 100%; } .zc-ref { display: none; } </style> </head> <body> <!-- CHART CONTAINER --> <div id="myChart" class="chart--container"> <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ let chartData = [{ id: 'theworld', parent: '', name: 'The World', group: '' }, { id: 'russia', parent: 'theworld', name: 'Russia', value: 143989754, group: 'europe', }, { id: 'ukraine', parent: 'theworld', name: 'Ukraine', value: 44222947, group: 'europe' }, { id: 'poland', parent: 'theworld', name: 'Poland', value: 38170712, group: 'europe' }, { id: 'romania', parent: 'theworld', name: 'Romania', value: 19679306, group: 'europe' }, { id: 'czechia', parent: 'theworld', name: 'Czechia', value: 10618303, group: 'europe' }, { id: 'hungary', parent: 'theworld', name: 'Hungary', value: 9721559, group: 'europe' }, { id: 'belarus', parent: 'theworld', name: 'Belarus', value: 9468338, group: 'europe' }, { id: 'bulgaria', parent: 'theworld', name: 'Bulgaria', value: 7084571, group: 'europe' }, { id: 'slovakia', parent: 'theworld', name: 'Slovakia', value: 5447662, group: 'europe' }, { id: 'moldova', parent: 'theworld', name: 'Moldova', value: 4051212, group: 'europe' }, { id: 'unitedkingdom', parent: 'theworld', name: 'United Kingdom', value: 66181585, group: 'europe' }, { id: 'sweden', parent: 'theworld', name: 'Sweden', value: 9910701, group: 'europe' }, { id: 'denmark', parent: 'theworld', name: 'Denmark', value: 5733551, group: 'europe' }, { id: 'finland', parent: 'theworld', name: 'Finland', value: 5523231, group: 'europe' }, { id: 'norway', parent: 'theworld', name: 'Norway', value: 5305383, group: 'europe' }, { id: 'ireland', parent: 'theworld', name: 'Ireland', value: 4761657, group: 'europe' }, { id: 'lithuania', parent: 'theworld', name: 'Lithuania', value: 2890297, group: 'europe' }, { id: 'latvia', parent: 'theworld', name: 'Latvia', value: 1949670, group: 'europe' }, { id: 'estonia', parent: 'theworld', name: 'Estonia', value: 1309632, group: 'europe' }, { id: 'iceland', parent: 'theworld', name: 'Iceland', value: 335025, group: 'europe' }, { id: 'guernseyandjersey', parent: 'theworld', name: 'Guernsey and Jersey', value: 165314, group: 'europe' }, { id: 'isleofman', parent: 'theworld', name: 'Isle of Man', value: 84287, group: 'europe' }, { id: 'faroeislands', parent: 'theworld', name: 'Faroe Islands', value: 49290, group: 'europe' }, { id: 'italy', parent: 'theworld', name: 'Italy', value: 59359900, group: 'europe' }, { id: 'spain', parent: 'theworld', name: 'Spain', value: 46354321, group: 'europe' }, { id: 'greece', parent: 'theworld', name: 'Greece', value: 11159773, group: 'europe' }, { id: 'cyprus', parent: 'theworld', name: 'Cyprus', value: 1179551, group: 'europe' }, { id: 'portugal', parent: 'theworld', name: 'Portugal', value: 10329506, group: 'europe' }, { id: 'serbia', parent: 'theworld', name: 'Serbia', value: 8790574, group: 'europe' }, { id: 'croatia', parent: 'theworld', name: 'Croatia', value: 4189353, group: 'europe' }, { id: 'bosniaandherzegovina', parent: 'theworld', name: 'Bosnia and Herzegovina', value: 3507017, group: 'europe' }, { id: 'albania', parent: 'theworld', name: 'Albania', value: 2930187, group: 'europe' }, { id: 'republicofmacedonia', parent: 'theworld', name: 'Republic of Macedonia', value: 2083160, group: 'europe' }, { id: 'slovenia', parent: 'theworld', name: 'Slovenia', value: 2079976, group: 'europe' }, { id: 'montenegro', parent: 'theworld', name: 'Montenegro', value: 628960, group: 'europe' }, { id: 'malta', parent: 'theworld', name: 'Malta', value: 430835, group: 'europe' }, { id: 'andorra', parent: 'theworld', name: 'Andorra', value: 76965, group: 'europe' }, { id: 'gibraltar', parent: 'theworld', name: 'Gibraltar', value: 34571, group: 'europe' }, { id: 'sanmarino', parent: 'theworld', name: 'San Marino', value: 33400, group: 'europe' }, { id: 'vaticancity', parent: 'theworld', name: 'Vatican City', value: 792, group: 'europe' }, { id: 'germany', parent: 'theworld', name: 'Germany', value: 82114224, group: 'europe' }, { id: 'france', parent: 'theworld', name: 'France', value: 64979548, group: 'europe' }, { id: 'netherlands', parent: 'theworld', name: 'Netherlands', value: 17035938, group: 'europe' }, { id: 'belgium', parent: 'theworld', name: 'Belgium', value: 11429336, group: 'europe' }, { id: 'austria', parent: 'theworld', name: 'Austria', value: 8735453, group: 'europe' }, { id: 'switzerland', parent: 'theworld', name: 'Switzerland', value: 8476005, group: 'europe' }, { id: 'luxembourg', parent: 'theworld', name: 'Luxembourg', value: 583455, group: 'europe' }, { id: 'monaco', parent: 'theworld', name: 'Monaco', value: 38695, group: 'europe' }, { id: 'liechtenstein', parent: 'theworld', name: 'Liechtenstein', value: 37922, group: 'europe' }, { id: 'brazil', parent: 'theworld', name: 'Brazil', value: 209288278.71, group: 'southamerica', text: ' ' }, { id: 'colombia', parent: 'theworld', name: 'Colombia', value: 49065615, group: 'southamerica' }, { id: 'argentina', parent: 'theworld', name: 'Argentina', value: 44271041, group: 'southamerica' }, { id: 'peru', parent: 'theworld', name: 'Peru', value: 32165485, group: 'southamerica' }, { id: 'venezuela', parent: 'theworld', name: 'Venezuela', value: 31977065, group: 'southamerica' }, { id: 'chile', parent: 'theworld', name: 'Chile', value: 18054726, group: 'southamerica' }, { id: 'ecuador', parent: 'theworld', name: 'Ecuador', value: 16624858, group: 'southamerica' }, { id: 'bolivia', parent: 'theworld', name: 'Bolivia', value: 11051600, group: 'southamerica' }, { id: 'paraguay', parent: 'theworld', name: 'Paraguay', value: 6811297, group: 'southamerica' }, { id: 'uruguay', parent: 'theworld', name: 'Uruguay', value: 3456750, group: 'southamerica' }, { id: 'guyana', parent: 'theworld', name: 'Guyana', value: 777859, group: 'southamerica' }, { id: 'suriname', parent: 'theworld', name: 'Suriname', value: 563402, group: 'southamerica' }, { id: 'frenchguiana', parent: 'theworld', name: 'French Guiana', value: 282731, group: 'southamerica' }, { id: 'falklandislands', parent: 'theworld', name: 'Falkland Islands', value: 2910, group: 'southamerica' }, ]; let chartConfig = { type: 'bubble-pack', plotarea: { margin: 10 }, options: { palette: ['#ff5252', '#448aff', '#ffab40'], padding: 2, minSize: 3, groupFilter: ['southamerica', 'europe'], format: { short: true, decimals: 1, decimalsSeparator: '.', thousandsSeparator: ',' }, text: ' ' }, series: chartData }; zingchart.loadModules('bubble-pack', function() { zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> <!-- Point ZingChart to modules folder so ZingChart can automatically grab the CSV module --> <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script> </head> <body> <!-- CHART CONTAINER --> <div id="myChart" class="chart--container"> <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a> </div> </body> </html>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { min-height: 150px; overflow:auto; position:relative; width: 100%; height:100%; } #myChart { width: 100%; height:100%; } .zc-ref { display: none; }
// window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ let chartData = [ { id: 'theworld', parent: '', name: 'The World', group: '' }, { id: 'russia', parent: 'theworld', name: 'Russia', value: 143989754, group: 'europe', }, { id: 'ukraine', parent: 'theworld', name: 'Ukraine', value: 44222947, group: 'europe' }, { id: 'poland', parent: 'theworld', name: 'Poland', value: 38170712, group: 'europe' }, { id: 'romania', parent: 'theworld', name: 'Romania', value: 19679306, group: 'europe' }, { id: 'czechia', parent: 'theworld', name: 'Czechia', value: 10618303, group: 'europe' }, { id: 'hungary', parent: 'theworld', name: 'Hungary', value: 9721559, group: 'europe' }, { id: 'belarus', parent: 'theworld', name: 'Belarus', value: 9468338, group: 'europe' }, { id: 'bulgaria', parent: 'theworld', name: 'Bulgaria', value: 7084571, group: 'europe' }, { id: 'slovakia', parent: 'theworld', name: 'Slovakia', value: 5447662, group: 'europe' }, { id: 'moldova', parent: 'theworld', name: 'Moldova', value: 4051212, group: 'europe' }, { id: 'unitedkingdom', parent: 'theworld', name: 'United Kingdom', value: 66181585, group: 'europe' }, { id: 'sweden', parent: 'theworld', name: 'Sweden', value: 9910701, group: 'europe' }, { id: 'denmark', parent: 'theworld', name: 'Denmark', value: 5733551, group: 'europe' }, { id: 'finland', parent: 'theworld', name: 'Finland', value: 5523231, group: 'europe' }, { id: 'norway', parent: 'theworld', name: 'Norway', value: 5305383, group: 'europe' }, { id: 'ireland', parent: 'theworld', name: 'Ireland', value: 4761657, group: 'europe' }, { id: 'lithuania', parent: 'theworld', name: 'Lithuania', value: 2890297, group: 'europe' }, { id: 'latvia', parent: 'theworld', name: 'Latvia', value: 1949670, group: 'europe' }, { id: 'estonia', parent: 'theworld', name: 'Estonia', value: 1309632, group: 'europe' }, { id: 'iceland', parent: 'theworld', name: 'Iceland', value: 335025, group: 'europe' }, { id: 'guernseyandjersey', parent: 'theworld', name: 'Guernsey and Jersey', value: 165314, group: 'europe' }, { id: 'isleofman', parent: 'theworld', name: 'Isle of Man', value: 84287, group: 'europe' }, { id: 'faroeislands', parent: 'theworld', name: 'Faroe Islands', value: 49290, group: 'europe' }, { id: 'italy', parent: 'theworld', name: 'Italy', value: 59359900, group: 'europe' }, { id: 'spain', parent: 'theworld', name: 'Spain', value: 46354321, group: 'europe' }, { id: 'greece', parent: 'theworld', name: 'Greece', value: 11159773, group: 'europe' }, { id: 'cyprus', parent: 'theworld', name: 'Cyprus', value: 1179551, group: 'europe' }, { id: 'portugal', parent: 'theworld', name: 'Portugal', value: 10329506, group: 'europe' }, { id: 'serbia', parent: 'theworld', name: 'Serbia', value: 8790574, group: 'europe' }, { id: 'croatia', parent: 'theworld', name: 'Croatia', value: 4189353, group: 'europe' }, { id: 'bosniaandherzegovina', parent: 'theworld', name: 'Bosnia and Herzegovina', value: 3507017, group: 'europe' }, { id: 'albania', parent: 'theworld', name: 'Albania', value: 2930187, group: 'europe' }, { id: 'republicofmacedonia', parent: 'theworld', name: 'Republic of Macedonia', value: 2083160, group: 'europe' }, { id: 'slovenia', parent: 'theworld', name: 'Slovenia', value: 2079976, group: 'europe' }, { id: 'montenegro', parent: 'theworld', name: 'Montenegro', value: 628960, group: 'europe' }, { id: 'malta', parent: 'theworld', name: 'Malta', value: 430835, group: 'europe' }, { id: 'andorra', parent: 'theworld', name: 'Andorra', value: 76965, group: 'europe' }, { id: 'gibraltar', parent: 'theworld', name: 'Gibraltar', value: 34571, group: 'europe' }, { id: 'sanmarino', parent: 'theworld', name: 'San Marino', value: 33400, group: 'europe' }, { id: 'vaticancity', parent: 'theworld', name: 'Vatican City', value: 792, group: 'europe' }, { id: 'germany', parent: 'theworld', name: 'Germany', value: 82114224, group: 'europe' }, { id: 'france', parent: 'theworld', name: 'France', value: 64979548, group: 'europe' }, { id: 'netherlands', parent: 'theworld', name: 'Netherlands', value: 17035938, group: 'europe' }, { id: 'belgium', parent: 'theworld', name: 'Belgium', value: 11429336, group: 'europe' }, { id: 'austria', parent: 'theworld', name: 'Austria', value: 8735453, group: 'europe' }, { id: 'switzerland', parent: 'theworld', name: 'Switzerland', value: 8476005, group: 'europe' }, { id: 'luxembourg', parent: 'theworld', name: 'Luxembourg', value: 583455, group: 'europe' }, { id: 'monaco', parent: 'theworld', name: 'Monaco', value: 38695, group: 'europe' }, { id: 'liechtenstein', parent: 'theworld', name: 'Liechtenstein', value: 37922, group: 'europe' }, { id: 'brazil', parent: 'theworld', name: 'Brazil', value: 209288278.71, group: 'southamerica', text: ' ' }, { id: 'colombia', parent: 'theworld', name: 'Colombia', value: 49065615, group: 'southamerica' }, { id: 'argentina', parent: 'theworld', name: 'Argentina', value: 44271041, group: 'southamerica' }, { id: 'peru', parent: 'theworld', name: 'Peru', value: 32165485, group: 'southamerica' }, { id: 'venezuela', parent: 'theworld', name: 'Venezuela', value: 31977065, group: 'southamerica' }, { id: 'chile', parent: 'theworld', name: 'Chile', value: 18054726, group: 'southamerica' }, { id: 'ecuador', parent: 'theworld', name: 'Ecuador', value: 16624858, group: 'southamerica' }, { id: 'bolivia', parent: 'theworld', name: 'Bolivia', value: 11051600, group: 'southamerica' }, { id: 'paraguay', parent: 'theworld', name: 'Paraguay', value: 6811297, group: 'southamerica' }, { id: 'uruguay', parent: 'theworld', name: 'Uruguay', value: 3456750, group: 'southamerica' }, { id: 'guyana', parent: 'theworld', name: 'Guyana', value: 777859, group: 'southamerica' }, { id: 'suriname', parent: 'theworld', name: 'Suriname', value: 563402, group: 'southamerica' }, { id: 'frenchguiana', parent: 'theworld', name: 'French Guiana', value: 282731, group: 'southamerica' }, { id: 'falklandislands', parent: 'theworld', name: 'Falkland Islands', value: 2910, group: 'southamerica' }, ]; let chartConfig = { type: 'bubble-pack', plotarea: { margin: 10 }, options: { palette: ['#ff5252', '#448aff', '#ffab40'], padding: 2, minSize: 3, groupFilter: ['southamerica', 'europe'], format: { short: true, decimals: 1, decimalsSeparator: '.', thousandsSeparator: ',' }, text: ' ' }, series: chartData }; zingchart.loadModules('bubble-pack', function(){ zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); }); });
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!