@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
2,251 lines • 93.2 kB
HTML
<!doctype 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 component">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item"
>
DataGridComponent</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info" class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source" class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
<li class="nav-item">
<a href="#templateData" class="nav-link"
role="tab" id="templateData-tab" data-bs-toggle="tab" data-link="template">Template</a>
</li>
<li class="nav-item">
<a href="#styleData" class="nav-link"
role="tab" id="styleData-tab" data-bs-toggle="tab" data-link="style">Styles</a>
</li>
<li class="nav-item">
<a href="#tree" class="nav-link"
role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/lib/data-grid.component.ts</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnInit</code>
<code>OnDestroy</code>
<code>AfterContentInit</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">changeDetection</td>
<td class="col-md-9"><code>ChangeDetectionStrategy.OnPush</code></td>
</tr>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>rxap-data-grid</code></td>
</tr>
<tr>
<td class="col-md-3">imports</td>
<td class="col-md-9">
<code>AsyncPipe</code>
<code>NgIf</code>
<code>NgFor</code>
<code>MatButtonModule</code>
<code>MatIconModule</code>
<code>GetFromObjectPipe</code>
<code>ReplacePipe</code>
<code>EscapeQuotationMarkPipe</code>
<code>RxapFormsModule</code>
<code>DataGridValuePipe</code>
<code>MatProgressSpinnerModule</code>
<code>MatDividerModule</code>
<code>NgTemplateOutlet</code>
<code>MatFormFieldModule</code>
<code>NgClass</code>
<code>IsEmptyPipe</code>
</td>
</tr>
<tr>
<td class="col-md-3">styleUrls</td>
<td class="col-md-9"><code>./data-grid.component.scss</code></td>
</tr>
<tr>
<td class="col-md-3">templateUrl</td>
<td class="col-md-9"><code>./data-grid.component.html</code></td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Public</span>
<a href="#data$" >data$</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#dataLoading$" >dataLoading$</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#hasError$" >hasError$</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#isDevMode" >isDevMode</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#isEditMode$" >isEditMode$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#isFormMode$" >isFormMode$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#isPlainMode$" >isPlainMode$</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#loading$" >loading$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#mode$" >mode$</a>
</li>
<li>
<span class="modifier"></span>
<span class="modifier">Public</span>
<a href="#rows" >rows</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#rows$" >rows$</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Public</span>
<a href="#cancel" >cancel</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#disableEditMode" >disableEditMode</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#enableEditMode" >enableEditMode</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#logCurrentFormState" >logCurrentFormState</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#refresh" >refresh</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#reset" >reset</a>
</li>
<li>
<a href="#retry" >retry</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#submit" >submit</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#data" >data</a>
</li>
<li>
<a href="#dataSource" >dataSource</a>
</li>
<li>
<a href="#displayProperties" >displayProperties</a>
</li>
<li>
<a href="#header" >header</a>
</li>
<li>
<a href="#hideEmptyProperties" >hideEmptyProperties</a>
</li>
<li>
<a href="#mode" >mode</a>
</li>
<li>
<a href="#viewer" >viewer</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#editModeChange" >editModeChange</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#mode" >mode</a>
</li>
<li>
<a href="#isFormModeOrHasAnyEditCells" >isFormModeOrHasAnyEditCells</a>
</li>
<li>
<a href="#isFormMode" >isFormMode</a>
</li>
<li>
<a href="#hasAnyEditCells" >hasAnyEditCells</a>
</li>
<li>
<a href="#isEditMode" >isEditMode</a>
</li>
<li>
<a href="#editMode" >editMode</a>
</li>
<li>
<a href="#loading" >loading</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(cdr: ChangeDetectorRef, router: Router, formDirective?: FormDirective)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/lib/data-grid.component.ts:150</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>cdr</td>
<td>
<code>ChangeDetectorRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>router</td>
<td>
<code>Router</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>formDirective</td>
<td>
<code>FormDirective</code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="data"></a>
<b>data</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>T</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/lib/data-grid.component.ts:124</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataSource"></a>
<b>dataSource</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>DataSource<T></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/lib/data-grid.component.ts:116</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="displayProperties"></a>
<b>displayProperties</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string[] | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/lib/data-grid.component.ts:127</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="header"></a>
<b>header</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/data-grid.component.ts:113</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hideEmptyProperties"></a>
<b>hideEmptyProperties</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/lib/data-grid.component.ts:130</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mode"></a>
<b>mode</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/enumerations.html#DataGridMode" target="_self" >DataGridMode | string</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/lib/data-grid.component.ts:165</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="viewer"></a>
<b>viewer</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>DataSourceViewer</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/lib/data-grid.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-outputs">
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="editModeChange"></a>
<b>editModeChange</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/lib/data-grid.component.ts:135</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cancel"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>cancel</b></span>
<a href="#cancel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>cancel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="374"
class="link-to-prism">src/lib/data-grid.component.ts:374</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="disableEditMode"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>disableEditMode</b></span>
<a href="#disableEditMode"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>disableEditMode()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="294"
class="link-to-prism">src/lib/data-grid.component.ts:294</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="enableEditMode"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>enableEditMode</b></span>
<a href="#enableEditMode"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>enableEditMode(skipPatchValue)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="272"
class="link-to-prism">src/lib/data-grid.component.ts:272</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>skipPatchValue</td>
<td>
No
</td>
<td>
<code>false</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="logCurrentFormState"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>logCurrentFormState</b></span>
<a href="#logCurrentFormState"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>logCurrentFormState()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="207"
class="link-to-prism">src/lib/data-grid.component.ts:207</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="refresh"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>refresh</b></span>
<a href="#refresh"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>refresh()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="366"
class="link-to-prism">src/lib/data-grid.component.ts:366</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="reset"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>reset</b></span>
<a href="#reset"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>reset()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="357"
class="link-to-prism">src/lib/data-grid.component.ts:357</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="retry"></a>
<span class="name">
<span ><b>retry</b></span>
<a href="#retry"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>retry()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="379"
class="link-to-prism">src/lib/data-grid.component.ts:379</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submit"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>submit</b></span>
<a href="#submit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>submit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="310"
class="link-to-prism">src/lib/data-grid.component.ts:310</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="data$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>data$</b></span>
<a href="#data$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<T></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/lib/data-grid.component.ts:118</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataLoading$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>dataLoading$</b></span>
<a href="#dataLoading$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>of(false)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/lib/data-grid.component.ts:142</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasError$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>hasError$</b></span>
<a href="#hasError$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>of(false)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/lib/data-grid.component.ts:141</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isDevMode"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>isDevMode</b></span>
<a href="#isDevMode"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>isDevMode()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/lib/data-grid.component.ts:110</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isEditMode$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>isEditMode$</b></span>
<a href="#isEditMode$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/lib/data-grid.component.ts:144</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isFormMode$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>isFormMode$</b></span>
<a href="#isFormMode$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/lib/data-grid.component.ts:146</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isPlainMode$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>isPlainMode$</b></span>
<a href="#isPlainMode$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/lib/data-grid.component.ts:147</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loading$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>loading$</b></span>
<a href="#loading$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new ToggleSubject()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/lib/data-grid.component.ts:143</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mode$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>mode$</b></span>
<a href="#mode$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/enumerations.html#DataGridMode" target="_self" >Observable<DataGridMode></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/lib/data-grid.component.ts:145</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rows"></a>
<span class="name">
<span class="modifier"></span>
<span class="modifier">Public</span>
<span ><b>rows</b></span>
<a href="#rows"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../directives/DataGridRowDefDirective.html" target="_self" >QueryList<DataGridRowDefDirective<T>></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ContentChildren(DataGridRowDefDirective)<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/lib/data-grid.component.ts:133</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rows$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>rows$</b></span>
<a href="#rows$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../directives/DataGridRowDefDirective.html" target="_self" >Observable<QueryList<DataGridRowDefDirective<T>>></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>EMPTY</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/lib/data-grid.component.ts:140</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mode"></a>
<span class="name"><b>mode</b><a href="#mode"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>mode(value: <a href="../undefineds/DataGridMode.html" target="_self">DataGridMode | string</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/lib/data-grid.component.ts:165</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code><a href="../miscellaneous/enumerations.html#DataGridMode" target="_self" >DataGridMode | string</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isFormModeOrHasAnyEditCells"></a>
<span class="name"><b>isFormModeOrHasAnyEditCells</b><a href="#isFormModeOrHasAnyEditCells"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isFormModeOrHasAnyEditCells()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/lib/data-grid.component.ts:173</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isFormMode"></a>
<span class="name"><b>isFormMode</b><a href="#isFormMode"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isFormMode()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/lib/data-grid.component.ts:177</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasAnyEditCells"></a>
<span class="name"><b>hasAnyEditCells</b><a href="#hasAnyEditCells"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>hasAnyEditCells()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/lib/data-grid.component.ts:181</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isEditMode"></a>
<span class="name"><b>isEditMode</b><a href="#isEditMode"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isEditMode()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/lib/data-grid.component.ts:185</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="editMode"></a>
<span class="name"><b>editMode</b><a href="#editMode"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>editMode(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/lib/data-grid.component.ts:189</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loading"></a>
<span class="name"><b>loading</b><a href="#loading"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>loading()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="196" class="link-to-prism">src/lib/data-grid.component.ts:196</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
AsyncPipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
AfterContentInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
EventEmitter,
Input,
isDevMode,
OnDestroy,
OnInit,
Optional,
Output,
QueryList,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {
ActivationEnd,
Router,
} from '@angular/router';
import {
FormDirective,
RxapFormsModule,
} from '@rxap/forms';
import {
DataSource,
DataSourceViewer,
} from '@rxap/pattern';
import {
EscapeQuotationMarkPipe,
GetFromObjectPipe,
ReplacePipe,
} from '@rxap/pipes';
import { ToggleSubject } from '@rxap/rxjs';
import { clone } from '@rxap/utilities';
import {
BehaviorSubject,
combineLatest,
debounceTime,
EMPTY,
merge,
Observable,
of,
Subscription,
} from 'rxjs';
import {
filter,
map,
shareReplay,
take,
tap,
} from 'rxjs/operators';
import { DataGridRowDefDirective } from './data-grid-row-def.directive';
import { DataGridValuePipe } from './data-grid-value.pipe';
import { IsEmptyPipe } from './is-empty.pipe';
export enum DataGridMode {
/**
* The view cell template is used to display the property value
*/
PLAIN = 'plain',
/**
* The edit cell template is used to display the property value, but the form and all controls are marked as disabled
*/
FORM = 'form',
}
function IsDataGridMode(value: string): value is DataGridMode {
return [ DataGridMode.PLAIN, DataGridMode.FORM ].includes(value as any);
}
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'rxap-data-grid',
templateUrl: './data-grid.component.html',
styleUrls: ['./data-grid.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
AsyncPipe,
NgIf,
NgFor,
MatButtonModule,
MatIconModule,
GetFromObjectPipe,
ReplacePipe,
EscapeQuotationMarkPipe,
RxapFormsModule,
DataGridValuePipe,
MatProgressSpinnerModule,
MatDividerModule,
NgTemplateOutlet,
MatFormFieldModule,
NgClass,
IsEmptyPipe,
]
})
export class DataGridComponent<T extends Record<string, any>> implements OnInit, OnDestroy, AfterContentInit {
public isDevMode = isDevMode();
@Input()
public header = false;
@Input()
public dataSource?: DataSource<T>;
public data$!: Observable<T>;
@Input()
public viewer: DataSourceViewer = this;
@Input()
public data?: T;
@Input()
public displayProperties: string[] | null = null;
@Input()
public hideEmptyProperties = false;
@ContentChildren(DataGridRowDefDirective)
public rows!: QueryList<DataGridRowDefDirective<T>>;
@Output()
public editModeChange = new EventEmitter<{
mode: boolean,
data?: T,
done: () => void
}>();
public rows$: Observable<QueryList<DataGridRowDefDirective<T>>> = EMPTY;
public hasError$: Observable<boolean> = of(false);
public dataLoading$: Observable<boolean> = of(false);
public loading$ = new ToggleSubject();
public readonly isEditMode$: Observable<boolean>;
public readonly mode$: Observable<DataGridMode>;
public readonly isFormMode$: Observable<boolean>;
public readonly isPlainMode$: Observable<boolean>;
private _editMode$ = new BehaviorSubject<boolean>(false);
private _mode$ = new BehaviorSubject<DataGridMode>(DataGridMode.PLAIN);
private _routerEventSubscription: Subscription | null = null;
constructor(
private readonly cdr: ChangeDetectorRef,
private readonly router: Router,
@Optional()
private readonly formDirective?: FormDirective,
) {
this.isEditMode$ = this._editMode$.asObservable();
this.mode$ = this._mode$.asObservable();
this.isFormMode$ = this.mode$.pipe(map(mode => mode === DataGridMode.FORM));
this.isPlainMode$ = this.mode$.pipe(map(mode => mode === DataGridMode.PLAIN));
}
@Input()
public set mode(value: DataGridMode | string) {
if (IsDataGridMode(value)) {
this._mode$.next(value);
} else {
throw new Error(`The data grid mode only support 'plain' and 'form' - given '${ value }'`);
}
}
public get isFormModeOrHasAnyEditCells() {
return this._mode$.value === DataGridMode.FORM || this.hasAnyEditCells;
}
public get isFormMode() {
return this._mode$.value === DataGridMode.FORM;
}
public get hasAnyEditCells() {
return this.rows?.some(row => !!row.editCell) ?? false;
}
public get isEditMode() {
return this._editMode$.value;
}
public set editMode(value: boolean) {
this._editMode$.next(value);
}
/**
* @deprecated use the loading$ property instead
*/
public get loading() {
return this.loading$.value;
}
public ngAfterContentInit() {
this.rows$ = merge(
of(this.rows),
this.rows.changes,
);
}
public logCurrentFormState() {
console.log(clone(this.formDirective?.form.value));
}
public ngOnInit() {
// resets the edit mode if this component is used in a sibling router path
// if not reset the edit mode is president after the route changes
this._routerEventSubscription = this.router.events.pipe(
filter(event => event instanceof ActivationEnd),
tap(() => this.disableEditMode()),
).subscribe();
if (this.dataSource && this.data) {
throw new Error('You can not use both dataSource and data input');
}
let data$: Observable<T> = EMPTY;
if (this.dataSource) {
data$ = this.dataSource.connect(this.viewer);
}
if (this.data) {
data$ = of(this.data);
}
if (data$ === EMPTY && isDevMode()) {
console.warn('No data source or data input provided');
}
this.data$ = data$.pipe(
debounceTime(100),
tap(data => this.data = data),
tap(data => {
if (this.formDirective && this.isFormMode) {
this.formDirective.form.patchValue(data, {
coerce: true,
strict: true,
});
if (this.isFormMode) {
this.formDirective.form.disable();
}
}
}),
shareReplay(1),
);
if (this.dataSource) {
this.hasError$ = this.dataSource.hasError$ ?? this.hasError$;
this.dataLoading$ = this.dataSource.loading$ ?? this.dataLoading$;
}
if (this.formDirective && this.isFormMode) {
this.formDirective.form.disabledWhile(combineLatest([
this._editMode$,
this._mode$,
]).pipe(
map(([ editMode, mode ]) => !editMode && mode === 'form'),
), {onlySelf: false});
}
}
public ngOnDestroy() {
this.dataSource?.disconnect(this.viewer);
this._routerEventSubscription?.unsubscribe();
}
public enableEditMode(skipPatchValue = false) {
if (!this.isFormModeOrHasAnyEditCells) {
if (isDevMode()) {
console.warn('Can not enable edit mode if the mode is not form');
}
return;
}
if (!this.formDirective) {
if (isDevMode()) {
console.warn('Can not enable edit mode without a form directive');
}
return;
}
this.editMode = true;
if (!skipPatchValue && this.data) {
this.formDirective.form.patchValue(this.data, {
coerce: true,
strict: true,
});
}
}
public disableEditMode() {
if (!this.isFormModeOrHasAnyEditCells) {
if (isDevMode()) {
console.warn('Can not disable edit mode if the mode is not form');
}
return;
}
if (!this.formDirective) {
if (isDevMode()) {
console.warn('Can not enable edit mode without a form directive');
}
return;
}
this.editMode = false;
}
public submit() {
if (!this.isFormModeOrHasAnyEditCells) {
if (isDevMode()) {
console.warn('Can not submit if the mode is not form');
}
return;
}
if (!this.formDirective) {
if (isDevMode()) {
console.warn('Can not support without a form directive');
}
return;
}
this.loading$.enable();
this.formDirective.form.markAllAsDirty();
this.formDirective.form.markAllAsTouched();
this.formDirective.cdr.markForCheck();
this.formDirective.rxapSubmit.pipe(
take(1),
tap(() => {
this.disableEditMode();
}),
).subscribe();
this.formDirective.invalidSubmit.pipe(
take(1),
tap(() => {
this.loading$.disable();
}),
).subscribe();
this.formDirective.submitError$.pipe(
filter(Boolean), // if the error is undefined we do not want to disable the loading
take(1),
tap(() => {
this.loading$.disable();
this.enableEditMode(true);
}),
).subscribe();
this.formDirective.submitSuccessful$.pipe(
take(1),
tap(() => {
this.loading$.disable();
this.refresh();
}),
).subscribe();
this.formDirective.onSubmit(new Event('submit'));
}
public reset() {
if (this.formDirective && this.data && this.isFormModeOrHasAnyEditCells) {
this.formDirective.form.patchValue(this.data, {
coerce: true,
strict: true,
});
}
}
public refresh() {
if (this.dataSource) {
this.dataSource.refresh();
} else if (isDevMode()) {
console.warn('can not refresh the data. data source is not defined');
}
}
public cancel() {
this.reset();
this.disableEditMode();
}
retry() {
this.refresh();
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="templateData">
<pre class="line-numbers"><code class="language-html"><div *ngIf="(hasError$ | async)" class="flex flex-col items-center justify-center gap-y-8">
<span i18n>Something has gone wrong!</span>
<button (click)="retry()" i18n mat-stroked-button type="button">Retry</button>
</div>
<div *ngIf="(dataLoading$ | async)" class="flex flex-col items-center justify-center gap-y-8">
<mat-spinner></mat-spinner>
</div>
<!-- if the dataSource input is used. It is possible the the hasError$ or loading$ property is === EMPTY. this would
results in an null as output. If the === false check is used this can result into the behavior that the data grid is
never shown. -->
<!-- eslint-disable-next-line @angular-eslint/template/no-negated-async -->
<table *ngIf="!(hasError$ | async) && !(dataLoading$ | async)" class="w-full table-auto">
<thead *ngIf="header">
<tr>
<th class="py-2" i18n>Label</th>
<th class="py-2" i18n>Value</th>
</tr>
</thead>
<tbody>
<ng-template [ngForOf]="rows$ | async" let-first="first" let-row ngFor>
<ng-template
[ngIf]="(!displayProperties || row.isSubHeader || (row.name && displayProperties.includes(row.name))) && (!hideEmptyProperties || false === (data$ | isEmpty: row.name | async))">
<!-- region horizontal view -->
<ng-template [ngIfElse]="normal" [ngIf]="row.flip">
<tr>
<td class="py-2" colspan="2">
<mat-divider></mat-divider>
</td>
</tr>
<tr [attr.data-name]="row.name + '-header'">
<ng-container
*ngTemplateOutlet="row.headerCell?.template ?? defaultHeaderCell; context: { $implicit: row.name }"></ng-container>
</tr>
<tr [attr.data-name]="row.name + '-value'">
<ng-template [ngIfThen]="content" [ngIf]="row.name"></ng-template>
</tr>
<tr>
<td class="py-4" colspan="2">
<mat-divider></mat-divider>
</td>
</tr>
</ng-template>
<!-- endregion -->
<!-- region normal view -->
<ng-template #normal>
<tr *ngIf="!first && row.isSubHeader">
<td class="py-4" colspan="2">
<mat-divider></mat-divider>
</td>
</tr>
<tr [attr.data-name]="row.name" [ngClass]="{ 'sub-header text-2xl': row.isSubHeader }">
<ng-container
*ngTemplateOutlet="row.headerCell?.template ?? defaultHeaderCell; context: { $implicit: row.name }"></ng-container>
<ng-template [ngIfThen]="content" [ngIf]="row.name"></ng-template>
</tr>
</ng-template>
<!-- endregion -->
</ng-template>
<ng-template #content>
<td [attr.colspan]="row.flip ? 2 : 1" [ngClass]="{
'h-20': row.editCell?.template && (isEditMode || isFormMode) && false,
}" class="pl-8 pr-4 w-full py-2">
<ng-template [ngIfThen]="editMode" [ngIf]="row.editCell?.template && (isEditMode || isFormMode)"></ng-template>
<ng-template [ngIfThen]="viewMode"
[ngIf]="!row.editCell?.template || (!isEditMode && !isFormMode)"></ng-template>
</td>
<ng-template #viewMode>
<ng-container
*ngTemplateOutlet="row.cell?.template ?? defaultCell;context: { $implicit: data$ | dataGridValue: row.name | async, data: data$ | async }"></ng-container>
</ng-template>
<ng-template #editMode>
<ng-container
*ngTemplateOutlet="row.editCell?.template ?? row.cell?.template ?? defaultCell;context: { $implicit: data$ | dataGridValue: row.name | async, data: data$ | async }"></ng-container>
</ng-template>
</ng-template>
</ng-template>
</tbody>
<tfoot *ngIf="hasAnyEditCells">
<tr>
<td class="py-2" colspan="2">
<ng-template [ngIfElse]="viewModeButton" [ngIf]="isEditMode">
<div class="pt-8 flex flex-col gap-y-6">
<div class="flex flex-row gap-x-6 items-center justify-start">
<button (click)="submit()" [disabled]="loading$ | async" color="primary" mat-raised-button type="button">
<span class="flex flex-row gap-x-6 items-center justify-center">
<span i18n>Save</span>
<mat-spinner *ngIf="loading$ | async" color="accent" diameter="15"></mat-spinner>
</span>
</button>
<button (click)="reset()" [disabled]="loading$ | async" mat-stroked-button type="button">
<ng-container i18n>Reset</ng-container>
</button>
<button (click)="cancel()" [disabled]="loading$ | async" color="warn" mat-stroked-button type="button">
<ng-container i18n>Cancel</ng-container>
</button>
<button (click)="logCurrentFormState()" *ngIf="isDevMode" mat-button type="button">
<ng-container i18n>Current Form State</ng-container>
</button>
</div>
<ng-template rxapFormSubmitInvalid>
<mat-error i18n>Ensure all formula fields are valid.</mat-error>
</ng-template>
<ng-template let-error rxapFormSubmitFailed>
<mat-error>{{ error.error?.message ?? error.message }}</mat-error>
</ng-template>
<ng-template rxapFormSubmitSuccessful>
<span i18n>Submit successfully.</span>
</ng-template>
</div>
</ng-template>
<ng-template #viewModeButton>
<div class="pt-8">
<button (click)="enableEditMode()" color="primary" mat-raised-button type="button">
<span class="flex flex-row gap-x-6 items-center justify-center">
<span i18n>Edit</span>
<mat-spinner *ngIf="loading$ | async" color="accent" diameter="15"></mat-spinner>
</span>
</button>
</div>
</ng-template>
</td>
</tr>
</tfoot>
</table>
<ng-template #defaultCell let-value>
<span>{{ value }}</span>
</ng-template>
<ng-template #defaultHeaderCell let-name>
<th class="py-2 whitespace-nowrap">{{ name }}</th>
</ng-template>
</code></pre>
</div>
<div class="tab-pane fade " id="styleData">
<p class="comment">
<code>./data-grid.component.scss</code>
</p>
<pre class="line-numbers"><code class="language-scss">:host {
::ng-deep th {
text-align: right;
width: auto;
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><div *ngIf="(hasError$ | async)" class="flex flex-col items-center justify-center gap-y-8"> <span i18n>Something has gone wrong!</span> <button (click)="retry()" i18n mat-stroked-button type="button">Retry</button></div><div *ngIf="(dataLoading$ | async)" class="flex flex-col items-center justify-center gap-y-8"> <mat-spinner></mat-spinner></div><!-- if the dataSource input is used. It is possible the the hasError$ or loading$ property is === EMPTY. this wouldresults in an null as output. If the === false check is used this can result into the behavior that the data grid isnever shown. --><!-- eslint-disable-next-line @angular-eslint/template/no-negated-async --><table *ngIf="!(hasError$ | async) && !(dataLoading$ | async)" class="w-full table-auto"> <thead *ngIf="header"> <tr> <th class="py-2" i18n>Label</th> <th class="py-2" i18n>Value</th> </tr> </thead> <tbody> <ng-template [ngForOf]="rows$ | async" let-first="first" let-row ngFor> <ng-template [ngIf]="(!displayProperties || row.isSubHeader || (row.name && displayProperties.includes(row.name))) && (!hideEmptyProperties || false === (data$ | isEmpty: row.name | async))"> <!-- region horizontal view --> <ng-template [ngIfElse]="normal" [ngIf]="row.flip"> <tr> <td class="py-2" colspan="2"> <mat-divider></mat-divider> </td> </tr> <tr [attr.data-name]="row.name + \'-header\'"> <ng-container *ngTemplateOutlet="row.headerCell?.template ?? defaultHeaderCell; context: { $implicit: row.name }"></ng-container> </tr> <tr [attr.data-name]="row.name + \'-value\'"> <ng-template [ngIfThen]="content" [ngIf]="row.name"></ng-template> </tr> <tr> <td class="py-4" colspan="2"> <mat-divider></mat-divider> </td> </tr> </ng-template> <!-- endregion --> <!-- region normal view --> <ng-template #normal> <tr *ngIf="!first && row.isSubHeader"> <td class="py-4" colspan="2"> <mat-divider></mat-divider> </td> </tr> <tr [attr.data-name]="row.name" [ngClass]="{ \'sub-header text-2xl\': row.isSubHeader }"> <ng-container *ngTemplateOutlet="row.headerCell?.template ?? defaultHeaderCell; context: { $implicit: row.name }"></ng-container> <ng-template [ngIfThen]="content" [ngIf]="row.name"></ng-template> </tr> </ng-template> <!-- endregion --> </ng-template> <ng-template #content> <td [attr.colspan]="row.flip ? 2 : 1" [ngClass]="{ \'h-20\': row.editCell?.template && (isEditMode || isFormMode) && false, }" class="pl-8 pr-4 w-full py-2"> <ng-template [ngIfThen]="editMode" [ngIf]="row.editCell?.template && (isEditMode || isFormMode)"></ng-template> <ng-template [ngIfThen]="viewMode" [ngIf]="!row.editCell?.template || (!isEditMode && !isFormMode)"></ng-template> </td> <ng-template #viewMode> <ng-container *ngTemplateOutlet="row.cell?.template ?? defaultCell;context: { $implicit: data$ | dataGridValue: row.name | async, data: data$ | async }"></ng-container> </ng-template> <ng-template #editMode> <ng-container *ngTemplateOutlet="row.editCell?.template ?? row.cell?.template ?? defaultCell;context: { $implicit: data$ | dataGridValue: row.name | async, data: data$ | async }"></ng-container> </ng-template> </ng-template> </ng-template> </tbody> <tfoot *ngIf="hasAnyEditCells"> <tr> <td class="py-2" colspan="2"> <ng-template [ngIfElse]="viewModeButton" [ngIf]="isEditMode"> <div class="pt-8 flex flex-col gap-y-6"> <div class="flex flex-row gap-x-6 items-center justify-start"> <button (click)="submit()" [disabled]="loading$ | async" color="primary" mat-raised-button type="button"> <span class="flex flex-row gap-x-6 items-center justify-center"> <span i18n>Save</span> <mat-spinner *ngIf="loading$ | async" color="accent" diameter="15"></mat-spinner> </span> </button> <button (click)="reset()" [disabled]="loading$ | async" mat-stroked-button type="button"> <ng-container i18n>Reset</ng-container> </button> <button (click)="cancel()" [disabled]="loading$ | async" color="warn" mat-stroked-button type="button"> <ng-container i18n>Cancel</ng-container> </button> <button (click)="logCurrentFormState()" *ngIf="isDevMode" mat-button type="button"> <ng-container i18n>Current Form State</ng-container> </button> </div> <ng-template rxapFormSubmitInvalid> <mat-error i18n>Ensure all formula fields are valid.</mat-error> </ng-template> <ng-template let-error rxapFormSubmitFailed> <mat-error>{{ error.error?.message ?? error.message }}</mat-error> </ng-template> <ng-template rxapFormSubmitSuccessful> <span i18n>Submit successfully.</span> </ng-template> </div> </ng-template> <ng-template #viewModeButton> <div class="pt-8"> <button (click)="enableEditMode()" color="primary" mat-raised-button type="button"> <span class="flex flex-row gap-x-6 items-center justify-center"> <span i18n>Edit</span> <mat-spinner *ngIf="loading$ | async" color="accent" diameter="15"></mat-spinner> </span> </button> </div> </ng-template> </td> </tr> </tfoot></table><ng-template #defaultCell let-value> <span>{{ value }}</span></ng-template><ng-template #defaultHeaderCell let-name> <th class="py-2 whitespace-nowrap">{{ name }}</th></ng-template></div>'
var COMPONENTS = [{'name': 'DataGridComponent', 'selector': 'rxap-data-grid'}];
var DIRECTIVES = [{'name': 'DataGridCellDefDirective', 'selector': '[rxapDataGridCellDef]'},{'name': 'DataGridEditCellDefDirective', 'selector': '[rxapDataGridEditCellDef]'},{'name': 'DataGridHeaderCellDefDirective', 'selector': '[rxapDataGridHeaderCellDef]'},{'name': 'DataGridRowDefDirective', 'selector': '[rxapDataGridRowDef]'}];
var ACTUAL_COMPONENT = {'name': 'DataGridComponent'};
</script>
<script src="../js/tree.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 = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'DataGridComponent.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>