- <!DOCTYPE html>
- <html class="zg-html">
- <head>
- <meta charset="utf-8">
- <title>ZingGrid Demo</title>
- <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
- <style>
- .zg-body {
- background: #fff;
- }
- zing-grid[loading] {
- height: 500px;
- }
- /** Expandable Row Trigger **/
- .zg-body .arrow {
- display: inline-block;
- transform: rotate(90deg);
- transform-origin: 0% 0%;
- cursor: pointer;
- font-size: 1.5rem;
- position: relative;
- left: 2.5rem;
- top: 0.25rem;
- }
- .zg-body .active .arrow {
- transform: rotate(180deg);
- left: 2.5rem;
- top: 1.5rem;
- }
- /** Expandable Row Header **/
- .zg-body .header {
- display: flex;
- align-items: center;
- }
- .zg-body .team--info {
- margin-left: 2.5rem;
- }
- /** Expandable Row CSS **/
- .zg-body .default {
- border-bottom: 1px solid #ebebeb;
- }
- .zg-body zg-row:hover {
- cursor: pointer;
- background-color: #f5f7fa;
- transition: background-color 0.25s ease-in;
- }
- .zg-body .expandable {
- background: #f5f5f5;
- padding: 1rem 0;
- display: none;
- }
- .zg-body .active .expandable {
- display: block;
- }
- /** Set padding **/
- /** NOTE: Css looks off here, but it is to fix how it looks on site **/
- .zg-body .default,
- .expandable {
- line-height: 1.5rem;
- padding: 0.9rem 1rem;
- }
- .zg-body .default--arrow {
- padding: 0.9rem 0;
- }
- .zg-body zg-cell {
- padding: 0;
- }
- /** hide layout **/
- .zg-body zg-layout {
- display: none;
- }
- zing-grid[loading] {
- height: 720px;
- }
- </style>
- </head>
- <body class="zg-body">
- <zing-grid caption="Expandable Rows" pager page-size="10" viewport-stop loading>
- <zg-source>
- <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
- </p>
- </zg-source>
- <zg-data>
- <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
- <zg-param name="recordPath" value="sheets.Teams"></zg-param>
- </zg-data>
- <zg-colgroup>
- <zg-column type="custom" header="2016 FA Cup Details">
- <div class="header">
- <div class="default default--arrow">
- <span class="arrow">⌃</span>
- </div>
- <div class="team--info">[[record.Team]] Group ([[record.Group]])</div>
- </div>
- <div class="expandable">
- <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
- <p><strong>Coach:</strong> [[record.Coach]]</p>
- <p><strong>Bio:</strong> [[record.Bio]]</p>
- <p><strong>Strengths:</strong> [[record.strengths]]</p>
- <p><strong>Weaknesses:</strong> [[record.weaknesses]]</p>
- </div>
- </zg-column>
- </zg-colgroup>
- </zing-grid>
- <script>
- ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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
- const zgRef = document.querySelector('zing-grid');
- zgRef.addEventListener('row:click', bindExpandEvent);
- function bindExpandEvent(e) {
- let oDOMRow = e.detail.ZGTarget;
- oDOMRow.classList.toggle('active');
- }
- });
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html class="zg-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 caption="Expandable Rows" pager page-size="10" viewport-stop loading>
- <zg-source>
- <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
- </p>
- </zg-source>
- <zg-data>
- <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
- <zg-param name="recordPath" value="sheets.Teams"></zg-param>
- </zg-data>
- <zg-colgroup>
- <zg-column type="custom" header="2016 FA Cup Details">
- <div class="header">
- <div class="default default--arrow">
- <span class="arrow">⌃</span>
- </div>
- <div class="team--info">[[record.Team]] Group ([[record.Group]])</div>
- </div>
- <div class="expandable">
- <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
- <p><strong>Coach:</strong> [[record.Coach]]</p>
- <p><strong>Bio:</strong> [[record.Bio]]</p>
- <p><strong>Strengths:</strong> [[record.strengths]]</p>
- <p><strong>Weaknesses:</strong> [[record.weaknesses]]</p>
- </div>
- </zg-column>
- </zg-colgroup>
- </zing-grid>
- </body>
- </html>
- .zg-body {
- background: #fff;
- }
- zing-grid[loading] {
- height: 500px;
- }
- /** Expandable Row Trigger **/
- .zg-body .arrow {
- display: inline-block;
- transform: rotate(90deg);
- transform-origin: 0% 0%;
- cursor: pointer;
- font-size: 1.5rem;
- position: relative;
- left: 2.5rem;
- top: 0.25rem;
- }
- .zg-body .active .arrow {
- transform: rotate(180deg);
- left: 2.5rem;
- top: 1.5rem;
- }
- /** Expandable Row Header **/
- .zg-body .header {
- display: flex;
- align-items: center;
- }
- .zg-body .team--info {
- margin-left: 2.5rem;
- }
- /** Expandable Row CSS **/
- .zg-body .default {
- border-bottom: 1px solid #ebebeb;
- }
- .zg-body zg-row:hover {
- cursor: pointer;
- background-color: #f5f7fa;
- transition: background-color 0.25s ease-in;
- }
- .zg-body .expandable {
- background: #f5f5f5;
- padding: 1rem 0;
- display: none;
- }
- .zg-body .active .expandable {
- display: block;
- }
- /** Set padding **/
- /** NOTE: Css looks off here, but it is to fix how it looks on site **/
- .zg-body .default,
- .expandable {
- line-height: 1.5rem;
- padding: 0.9rem 1rem;
- }
- .zg-body .default--arrow {
- padding: 0.9rem 0;
- }
- .zg-body zg-cell {
- padding: 0;
- }
- /** hide layout **/
- .zg-body zg-layout {
- 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
- const zgRef = document.querySelector('zing-grid');
- zgRef.addEventListener('row:click', bindExpandEvent);
- function bindExpandEvent(e) {
- let oDOMRow = e.detail.ZGTarget;
- oDOMRow.classList.toggle('active');
- }
- });