@rxap/data-grid
Version:
Provides a data grid component for Angular applications. It supports plain and form modes, custom header and cell templates, and integration with Rxap Forms and Data Sources. The component allows for displaying and editing data in a tabular format with fe
402 lines (357 loc) • 19.1 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-data-grid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="./" class="navbar-brand">angular-data-grid</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content overview">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Overview</li>
</ol>
<div class="text-center module-graph-container">
<div id="module-graph-svg">
<!-- Generated by graphviz version 2.47.0 (20210316.0004)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="1004pt" height="284pt"
viewBox="0.00 0.00 1004.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
<title>dependencies</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1000,-280 1000,4 -4,4"/>
<text text-anchor="start" x="477.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="264,-10 264,-30 284,-30 284,-10 264,-10"/>
<text text-anchor="start" x="287.63" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="377,-10 377,-30 397,-30 397,-10 377,-10"/>
<text text-anchor="start" x="400.73" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="463,-10 463,-30 483,-30 483,-10 463,-10"/>
<text text-anchor="start" x="486.78" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="560,-10 560,-30 580,-30 580,-10 560,-10"/>
<text text-anchor="start" x="583.67" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="656,-10 656,-30 676,-30 676,-10 656,-10"/>
<text text-anchor="start" x="679.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_DataGridModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 988,-268 988,-70 8,-70"/>
</g>
<g id="clust3" class="cluster">
<title>cluster_DataGridModule_imports</title>
<polygon fill="none" stroke="black" points="26,-78 26,-130 972,-130 972,-78 26,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_DataGridModule_exports</title>
<polygon fill="none" stroke="black" points="16,-208 16,-260 980,-260 980,-208 16,-208"/>
</g>
<!-- DataGridCellDefDirective -->
<g id="node1" class="node">
<title>DataGridCellDefDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="964.48,-122 961.48,-126 940.48,-126 937.48,-122 799.52,-122 799.52,-86 964.48,-86 964.48,-122"/>
<text text-anchor="middle" x="882" y="-99.8" font-family="Times,serif" font-size="14.00">DataGridCellDefDirective</text>
</g>
<!-- DataGridModule -->
<g id="node6" class="node">
<title>DataGridModule</title>
<polygon fill="#8dd3c7" stroke="black" points="591.63,-187 588.63,-191 567.63,-191 564.63,-187 480.37,-187 480.37,-151 591.63,-151 591.63,-187"/>
<text text-anchor="middle" x="536" y="-164.8" font-family="Times,serif" font-size="14.00">DataGridModule</text>
</g>
<!-- DataGridCellDefDirective->DataGridModule -->
<g id="edge1" class="edge">
<title>DataGridCellDefDirective->DataGridModule</title>
<path fill="none" stroke="black" d="M910.83,-122.27C910.83,-140.56 910.83,-166 910.83,-166 910.83,-166 601.71,-166 601.71,-166"/>
<polygon fill="black" stroke="black" points="601.71,-162.5 591.71,-166 601.71,-169.5 601.71,-162.5"/>
</g>
<!-- DataGridComponent -->
<g id="node2" class="node">
<title>DataGridComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="781.92,-122 778.92,-126 757.92,-126 754.92,-122 648.08,-122 648.08,-86 781.92,-86 781.92,-122"/>
<text text-anchor="middle" x="715" y="-99.8" font-family="Times,serif" font-size="14.00">DataGridComponent</text>
</g>
<!-- DataGridComponent->DataGridModule -->
<g id="edge2" class="edge">
<title>DataGridComponent->DataGridModule</title>
<path fill="none" stroke="black" d="M737.65,-122.01C737.65,-138.05 737.65,-159 737.65,-159 737.65,-159 601.64,-159 601.64,-159"/>
<polygon fill="black" stroke="black" points="601.64,-155.5 591.64,-159 601.64,-162.5 601.64,-155.5"/>
</g>
<!-- DataGridEditCellDefDirective -->
<g id="node3" class="node">
<title>DataGridEditCellDefDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="629.82,-122 626.82,-126 605.82,-126 602.82,-122 442.18,-122 442.18,-86 629.82,-86 629.82,-122"/>
<text text-anchor="middle" x="536" y="-99.8" font-family="Times,serif" font-size="14.00">DataGridEditCellDefDirective</text>
</g>
<!-- DataGridEditCellDefDirective->DataGridModule -->
<g id="edge3" class="edge">
<title>DataGridEditCellDefDirective->DataGridModule</title>
<path fill="none" stroke="black" d="M536,-122.11C536,-122.11 536,-140.99 536,-140.99"/>
<polygon fill="black" stroke="black" points="532.5,-140.99 536,-150.99 539.5,-140.99 532.5,-140.99"/>
</g>
<!-- DataGridHeaderCellDefDirective -->
<g id="node4" class="node">
<title>DataGridHeaderCellDefDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="424.39,-122 421.39,-126 400.39,-126 397.39,-122 219.61,-122 219.61,-86 424.39,-86 424.39,-122"/>
<text text-anchor="middle" x="322" y="-99.8" font-family="Times,serif" font-size="14.00">DataGridHeaderCellDefDirective</text>
</g>
<!-- DataGridHeaderCellDefDirective->DataGridModule -->
<g id="edge4" class="edge">
<title>DataGridHeaderCellDefDirective->DataGridModule</title>
<path fill="none" stroke="black" d="M354.65,-122.01C354.65,-138.05 354.65,-159 354.65,-159 354.65,-159 470.11,-159 470.11,-159"/>
<polygon fill="black" stroke="black" points="470.11,-162.5 480.11,-159 470.11,-155.5 470.11,-162.5"/>
</g>
<!-- DataGridRowDefDirective -->
<g id="node5" class="node">
<title>DataGridRowDefDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="201.59,-122 198.59,-126 177.59,-126 174.59,-122 34.41,-122 34.41,-86 201.59,-86 201.59,-122"/>
<text text-anchor="middle" x="118" y="-99.8" font-family="Times,serif" font-size="14.00">DataGridRowDefDirective</text>
</g>
<!-- DataGridRowDefDirective->DataGridModule -->
<g id="edge5" class="edge">
<title>DataGridRowDefDirective->DataGridModule</title>
<path fill="none" stroke="black" d="M141.77,-122.27C141.77,-140.56 141.77,-166 141.77,-166 141.77,-166 470.35,-166 470.35,-166"/>
<polygon fill="black" stroke="black" points="470.35,-169.5 480.35,-166 470.35,-162.5 470.35,-169.5"/>
</g>
<!-- DataGridCellDefDirective -->
<g id="node7" class="node">
<title>DataGridCellDefDirective </title>
<polygon fill="#fb8072" stroke="black" points="971.98,-252 804.02,-252 804.02,-216 971.98,-216 971.98,-252"/>
<text text-anchor="middle" x="888" y="-229.8" font-family="Times,serif" font-size="14.00">DataGridCellDefDirective </text>
</g>
<!-- DataGridModule->DataGridCellDefDirective -->
<g id="edge6" class="edge">
<title>DataGridModule->DataGridCellDefDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M591.99,-173C684.08,-173 857.42,-173 857.42,-173 857.42,-173 857.42,-205.7 857.42,-205.7"/>
<polygon fill="black" stroke="black" points="853.92,-205.7 857.42,-215.7 860.92,-205.7 853.92,-205.7"/>
</g>
<!-- DataGridComponent -->
<g id="node8" class="node">
<title>DataGridComponent </title>
<polygon fill="#fb8072" stroke="black" points="786.42,-252 649.58,-252 649.58,-216 786.42,-216 786.42,-252"/>
<text text-anchor="middle" x="718" y="-229.8" font-family="Times,serif" font-size="14.00">DataGridComponent </text>
</g>
<!-- DataGridModule->DataGridComponent -->
<g id="edge7" class="edge">
<title>DataGridModule->DataGridComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M592.01,-180C637.3,-180 693.6,-180 693.6,-180 693.6,-180 693.6,-205.72 693.6,-205.72"/>
<polygon fill="black" stroke="black" points="690.1,-205.72 693.6,-215.72 697.1,-205.72 690.1,-205.72"/>
</g>
<!-- DataGridEditCellDefDirective -->
<g id="node9" class="node">
<title>DataGridEditCellDefDirective </title>
<polygon fill="#fb8072" stroke="black" points="631.82,-252 440.18,-252 440.18,-216 631.82,-216 631.82,-252"/>
<text text-anchor="middle" x="536" y="-229.8" font-family="Times,serif" font-size="14.00">DataGridEditCellDefDirective </text>
</g>
<!-- DataGridModule->DataGridEditCellDefDirective -->
<g id="edge8" class="edge">
<title>DataGridModule->DataGridEditCellDefDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M536,-187.11C536,-187.11 536,-205.99 536,-205.99"/>
<polygon fill="black" stroke="black" points="532.5,-205.99 536,-215.99 539.5,-205.99 532.5,-205.99"/>
</g>
<!-- DataGridHeaderCellDefDirective -->
<g id="node10" class="node">
<title>DataGridHeaderCellDefDirective </title>
<polygon fill="#fb8072" stroke="black" points="422.39,-252 213.61,-252 213.61,-216 422.39,-216 422.39,-252"/>
<text text-anchor="middle" x="318" y="-229.8" font-family="Times,serif" font-size="14.00">DataGridHeaderCellDefDirective </text>
</g>
<!-- DataGridModule->DataGridHeaderCellDefDirective -->
<g id="edge9" class="edge">
<title>DataGridModule->DataGridHeaderCellDefDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M480.14,-180C406.76,-180 287.1,-180 287.1,-180 287.1,-180 287.1,-205.72 287.1,-205.72"/>
<polygon fill="black" stroke="black" points="283.6,-205.72 287.1,-215.72 290.6,-205.72 283.6,-205.72"/>
</g>
<!-- DataGridRowDefDirective -->
<g id="node11" class="node">
<title>DataGridRowDefDirective </title>
<polygon fill="#fb8072" stroke="black" points="195.59,-252 24.41,-252 24.41,-216 195.59,-216 195.59,-252"/>
<text text-anchor="middle" x="110" y="-229.8" font-family="Times,serif" font-size="14.00">DataGridRowDefDirective </text>
</g>
<!-- DataGridModule->DataGridRowDefDirective -->
<g id="edge10" class="edge">
<title>DataGridModule->DataGridRowDefDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M480.16,-173C360.07,-173 87.98,-173 87.98,-173 87.98,-173 87.98,-205.7 87.98,-205.7"/>
<polygon fill="black" stroke="black" points="84.48,-205.7 87.98,-215.7 91.48,-205.7 84.48,-205.7"/>
</g>
</g>
</svg>
</div>
<i id="fullscreen" class="icon ion-ios-resize module-graph-fullscreen-btn" aria-hidden="true"></i>
<div class="btn-group size-buttons">
<button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
<button id="reset" class="btn btn-default btn-sm">Reset</button>
<button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
</div>
</div>
<div class="tab-content overview">
<div class="row">
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-ios-archive"></span></h4>
<p class="card-text">
<a href="./modules.html">1 Module</a>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
<p class="card-text">1 Component</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-code-working"></span></h4>
<p class="card-text">4 Directives</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-add"></span></h4>
<p class="card-text">2 Pipes</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-information-circle-outline"></span></h4>
<p class="card-text">3 Interfaces</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/libs/svg-pan-zoom.min.js"></script>
<script src="js/svg-pan-zoom.controls.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 0;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'overview';
var COMPODOC_CURRENT_PAGE_URL = 'overview.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="./js/libs/custom-elements.min.js"></script>
<script src="./js/libs/lit-html.js"></script>
<script src="./js/menu-wc.js" defer></script>
<script nomodule src="./js/menu-wc_es5.js" defer></script>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/libs/zepto.min.js"></script>
<script src="./js/compodoc.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/clipboard.min.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/search/search_index.js"></script>
<script src="./js/lazy-load-graphs.js"></script>
</body>
</html>