pragma-views2/webcomponents/pragma-grid/pragma-grid.html

<template id="pragma-grid">
    <table role="grid">
        <thead>
        <tr id="pragma-grid-header">
            <th class="row-selection checkbox-column">
                <input type="checkbox">
            </th>
        </tr>
        </thead>
        <tbody id="pragma-grid-body"></tbody>
    </table>
</template>

<template id="pragma-grid-grouped-row-template">
    <tr class="grouped-row" aria-selected="false" aria-hidden="false" tabindex="-1">
        <td>
            <div class="grouped-row-container">
                <input type="checkbox" aria-label="Grouped row checkbox"/>
                <div class="grouped-row-info">
                    <icon-button icon-name="rightchevron" aria-label="toggle button" role="button">
                    </icon-button>
                    <div class="grouped-item-title">#item.model.title</div>
                    <div class="grouped-item-aggregate">
                        <span>#item.model.aggregate.aggregate</span>:
                        <span><b>#item.model.aggregate.value</b></span>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</template>

<template id="pragma-grid-leaf-row-template">
        <tr class="leaf-row" aria-selected="false" aria-hidden="false" tabindex="-1">
            <td class="checkbox-column">
                <input type="checkbox" aria-label="Grouped row checkbox" />
            </td>
        </tr>
    </template>

<script>
    if (window.templates == undefined) {
        window.templates = new Map();
    }

    window.templates.set("pragma-grid-grouped-row-template", document.currentScript.ownerDocument.querySelector("#pragma-grid-grouped-row-template").content);
    window.templates.set("pragma-grid-leaf-row-template", document.currentScript.ownerDocument.querySelector("#pragma-grid-leaf-row-template").content);
</script>