<!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>
body {
background: #e6e6e6;
}
.zg-body .test {
margin-left: 10px;
}
zing-grid[loading] {
height: 325px;
}
</style>
</head>
<body class="zg-body">
<zing-grid caption="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
<zg-data data='[
{
"name": "Tom"
},
{
"name": "Thorton"
},
{
"name": "Timmy"
},
{
"name": "Turner"
}
]'></zg-data>
<zg-colgroup>
<zg-column index="name"></zg-column>
<!-- custom column for delete button -->
<zg-column index="name" header="Delete Row" editor="false">
<zg-button action="removerecord">
<span name="close" slot="icon">❌ </span>
<em slot="label" class="test"> Delete</em>
</zg-button>
</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="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
<zg-data data='[
{
"name": "Tom"
},
{
"name": "Thorton"
},
{
"name": "Timmy"
},
{
"name": "Turner"
}
]'></zg-data>
<zg-colgroup>
<zg-column index="name"></zg-column>
<!-- custom column for delete button -->
<zg-column index="name" header="Delete Row" editor="false">
<zg-button action="removerecord">
<span name="close" slot="icon">❌ </span>
<em slot="label" class="test"> Delete</em>
</zg-button>
</zg-column>
</zg-colgroup>
</zing-grid>
</body>
</html>
body {
background: #e6e6e6;
}
.zg-body .test {
margin-left: 10px;
}