carbon-components-angular
Version:
Next generation components
1,750 lines • 67.6 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</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">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</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">carbon-components-angular documentation</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 class">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Classes</li>
<li class="breadcrumb-item" >TableHeaderItem</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
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>
</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/table/table-header-item.class.ts</code>
</p>
<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">Private</span>
<a href="#_title" >_title</a>
</li>
<li>
<a href="#ariaSortLabel" >ariaSortLabel</a>
</li>
<li>
<a href="#className" >className</a>
</li>
<li>
<a href="#colSpan" >colSpan</a>
</li>
<li>
<a href="#data" >data</a>
</li>
<li>
<a href="#filterCount" >filterCount</a>
</li>
<li>
<a href="#filterData" >filterData</a>
</li>
<li>
<a href="#filterFooter" >filterFooter</a>
</li>
<li>
<a href="#filterTemplate" >filterTemplate</a>
</li>
<li>
<a href="#formatSortLabel" >formatSortLabel</a>
</li>
<li>
<a href="#metadata" >metadata</a>
</li>
<li>
<a href="#rowSpan" >rowSpan</a>
</li>
<li>
<a href="#sortable" >sortable</a>
</li>
<li>
<a href="#sortDirection" >sortDirection</a>
</li>
<li>
<a href="#sorted" >sorted</a>
</li>
<li>
<a href="#style" >style</a>
</li>
<li>
<a href="#template" >template</a>
</li>
<li>
<a href="#visible" >visible</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>
<a href="#compare" >compare</a>
</li>
<li>
<a href="#filter" >filter</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="#ascending" >ascending</a>
</li>
<li>
<a href="#descending" >descending</a>
</li>
<li>
<a href="#title" >title</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(rawData?: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/table/table-header-item.class.ts:232</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates an instance of TableHeaderItem.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>rawData</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</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="_title"></a>
<span class="name">
<span class="modifier">Private</span>
<span ><b>_title</b></span>
<a href="#_title"><span class="icon ion-ios-link"></span></a>
</span>
</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/table/table-header-item.class.ts:232</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ariaSortLabel"></a>
<span class="name">
<span ><b>ariaSortLabel</b></span>
<a href="#ariaSortLabel"><span class="icon ion-ios-link"></span></a>
</span>
</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/table/table-header-item.class.ts:155</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The label for the sort button</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="className"></a>
<span class="name">
<span ><b>className</b></span>
<a href="#className"><span class="icon ion-ios-link"></span></a>
</span>
</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/table/table-header-item.class.ts:97</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Attach a class to the column, both the header and column cells.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="colSpan"></a>
<span class="name">
<span ><b>colSpan</b></span>
<a href="#colSpan"><span class="icon ion-ios-link"></span></a>
</span>
</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>1</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/table/table-header-item.class.ts:91</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The number of columns to span</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="data"></a>
<span class="name">
<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><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></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/table/table-header-item.class.ts:110</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Data for the header item.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterCount"></a>
<span class="name">
<span ><b>filterCount</b></span>
<a href="#filterCount"><span class="icon ion-ios-link"></span></a>
</span>
</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/table/table-header-item.class.ts:80</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Number of applied filters.</p>
<p><code>filter()</code> should set it to appropriate number.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterData"></a>
<span class="name">
<span ><b>filterData</b></span>
<a href="#filterData"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/table/table-header-item.class.ts:226</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>This is where you store your data when applying filter.</p>
<p>It is the actual object you have access to with <code>let-filter="data"</code> in your template.</p>
<p>Make sure to store data in <code>filter.data</code> in your template, and you will have it
available in <code>filterData.data</code> in your extension of <code>TableHeaderItem</code>.</p>
<p>Because angular and object references.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterFooter"></a>
<span class="name">
<span ><b>filterFooter</b></span>
<a href="#filterFooter"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/table/table-header-item.class.ts:214</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used along with <code>filterTemplate</code> to construct the filter popover</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterTemplate"></a>
<span class="name">
<span ><b>filterTemplate</b></span>
<a href="#filterTemplate"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/table/table-header-item.class.ts:209</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used as a template for popover filter.</p>
<p><code>let-popover="popover"</code> will give you access to popover component and allow you to
manipulate it if needed.</p>
<p><code>let-filter="filter"</code> will give you access to the "filter". The main takeaway is
store the data you need to <code>filter.data</code>. You will be able to access it as
<code>this.filterData.data</code> from your <code>filter()</code> function when you extend <code>TableHeaderItem</code></p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><ng-template #filter let-popover="popover">
<cds-label class="first-label">
Value
<input type="text" [(ngModel)]="filter1" class="input-field">
</cds-label>
</ng-template>
<ng-template #filterFooter let-popover="popover" let-filter="data">
<button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>
<button class="btn--secondary" (click)="popover.onClose()">Cancel</button>
</ng-template></code></pre></div><p>Set the template with, for example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">new FilterableHeaderItem({
filterTemplate: this.filter,
filterFooter: this.filterFooter
})</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">class FilterableHeaderItem extends TableHeaderItem {
// custom filter function
filter(item: TableItem): boolean {
if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {
this.filterCount = 1;
return false;
}
this.filterCount = 0;
return true;
}
}</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="formatSortLabel"></a>
<span class="name">
<span ><b>formatSortLabel</b></span>
<a href="#formatSortLabel"><span class="icon ion-ios-link"></span></a>
</span>
</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/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/table/table-header-item.class.ts:160</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>A callback function to format the sort label. Will be heavily called.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="metadata"></a>
<span class="name">
<span ><b>metadata</b></span>
<a href="#metadata"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/table/table-header-item.class.ts:116</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Data for the header item for general usage in the controller.
For example, which <code>field</code> is this column related to.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowSpan"></a>
<span class="name">
<span ><b>rowSpan</b></span>
<a href="#rowSpan"><span class="icon ion-ios-link"></span></a>
</span>
</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>1</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="86" class="link-to-prism">src/table/table-header-item.class.ts:86</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The number of rows to span
<strong>NOTE:</strong> not supported by the default carbon table</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortable"></a>
<span class="name">
<span ><b>sortable</b></span>
<a href="#sortable"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/table/table-header-item.class.ts:72</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Enables sorting on click by default.
If false then this column won't show a sorting arrow at all.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortDirection"></a>
<span class="name">
<span ><b>sortDirection</b></span>
<a href="#sortDirection"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#SortType" target="_self" >SortType</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"NONE"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/table/table-header-item.class.ts:228</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sorted"></a>
<span class="name">
<span ><b>sorted</b></span>
<a href="#sorted"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="65" class="link-to-prism">src/table/table-header-item.class.ts:65</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Disables sorting by default.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="style"></a>
<span class="name">
<span ><b>style</b></span>
<a href="#style"><span class="icon ion-ios-link"></span></a>
</span>
</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/object" target="_blank" >object</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/table/table-header-item.class.ts:105</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Style for the column, applied to every element in the column.</p>
<p>ngStyle-like format</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="template"></a>
<span class="name">
<span ><b>template</b></span>
<a href="#template"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>TemplateRef<any></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/table/table-header-item.class.ts:150</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used to display data in a desired way.</p>
<p>If not provided, displays data as a simple string.</p>
<p>Usage:</p>
<p>In a component where you're using the table create a template like:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><ng-template #customHeaderTemplate let-data="data">
<i><a [routerLink]="data.link">{{data.name}}</a></i>
</ng-template></code></pre></div><p>where we assume your data contains <code>link</code> and <code>name</code>. <code>let-data="data"</code> is
necessary for you to be able to access item's data in the template.</p>
<p>Create <code>ViewChild</code> property with:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">(at)ViewChild("customHeaderTemplate")
protected customHeaderTemplate: TemplateRef<any>;</code></pre></div><p>Set the template to the header item, for example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">this.model.header = [
new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})
];</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="visible"></a>
<span class="name">
<span ><b>visible</b></span>
<a href="#visible"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/table/table-header-item.class.ts:59</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Defines if column under this TableHeaderItem should be displayed.</p>
</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="compare"></a>
<span class="name">
<span ><b>compare</b></span>
<a href="#compare"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>compare(one: <a href="../classes/TableItem.html" target="_self">TableItem</a>, two: <a href="../classes/TableItem.html" target="_self">TableItem</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="264"
class="link-to-prism">src/table/table-header-item.class.ts:264</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used for sorting rows of the table.</p>
<p>Override to enable different sorting.</p>
<p>< 0 if <code>one</code> should go before <code>two</code></p>
<blockquote>
<p>0 if <code>one</code> should go after <code>two</code>
0 if it doesn't matter (they are the same)</p>
</blockquote>
</div>
<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>one</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >TableItem</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>two</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >TableItem</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</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="filter"></a>
<span class="name">
<span ><b>filter</b></span>
<a href="#filter"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>filter(item: <a href="../classes/TableItem.html" target="_self">TableItem</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="293"
class="link-to-prism">src/table/table-header-item.class.ts:293</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used to filter rows in the table.</p>
<p>Override to make a custom filter.</p>
<p>Even though there is just one filter function, there can be multiple filters.
When implementing filter, set <code>filterCount</code> before returning.</p>
<p><code>true</code> to hide the row
<code>false</code> to show the row</p>
</div>
<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>item</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >TableItem</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
<div class="io-description">
</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="ascending"></a>
<span class="name"><b>ascending</b><a href="#ascending"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>ascending()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/table/table-header-item.class.ts:13</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>ascending(asc: <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="10" class="link-to-prism">src/table/table-header-item.class.ts:10</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>If true, sort is set to ascending, if false descending will be true.</p>
</div>
<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>asc</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="descending"></a>
<span class="name"><b>descending</b><a href="#descending"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>descending()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/table/table-header-item.class.ts:24</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>descending(desc: <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="21" class="link-to-prism">src/table/table-header-item.class.ts:21</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>If true, sort is set to descending, if false ascending will be true.</p>
</div>
<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>desc</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="title"></a>
<span class="name"><b>title</b><a href="#title"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>title()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/table/table-header-item.class.ts:28</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>title(title)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="52" class="link-to-prism">src/table/table-header-item.class.ts:52</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>
</tr>
</thead>
<tbody>
<tr>
<td>title</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>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { TableItem } from "./table-item.class";
import { TemplateRef } from "@angular/core";
export type SortType = "ASCENDING" | "DESCENDING" | "NONE";
export class TableHeaderItem {
/**
* If true, sort is set to ascending, if false descending will be true.
*
*/
set ascending(asc: boolean) {
this.sortDirection = asc ? "ASCENDING" : "DESCENDING";
}
get ascending() {
return this.sortDirection === "ASCENDING";
}
/**
* If true, sort is set to descending, if false ascending will be true.
*
*/
set descending(desc: boolean) {
this.sortDirection = desc ? "DESCENDING" : "ASCENDING";
}
get descending() {
return this.sortDirection === "DESCENDING";
}
get title() {
if (this._title) {
return this._title;
}
if (!this.data) {
return "";
}
if (typeof this.data === "string") {
return this.data;
}
if (
this.data.toString &&
this.data.constructor !== ({}).constructor
) {
return this.data.toString();
}
// data can’t be reasonably converted to an end user readable string
return "";
}
set title(title) {
this._title = title;
}
/**
* Defines if column under this TableHeaderItem should be displayed.
*
*/
visible = true;
/**
* Disables sorting by default.
*
*/
sorted = false;
/**
* Enables sorting on click by default.
* If false then this column won't show a sorting arrow at all.
*
*/
sortable = true;
/**
* Number of applied filters.
*
* `filter()` should set it to appropriate number.
*
*/
filterCount = 0;
/**
* The number of rows to span
* **NOTE:** not supported by the default carbon table
*/
rowSpan = 1;
/**
* The number of columns to span
*/
colSpan = 1;
/**
* Attach a class to the column, both the header and column cells.
*
*/
className: string;
/**
* Style for the column, applied to every element in the column.
*
* ngStyle-like format
*
*/
style = {};
/**
* Data for the header item.
*/
data: any;
/**
* Data for the header item for general usage in the controller.
* For example, which `field` is this column related to.
*/
metadata: any;
/**
* Used to display data in a desired way.
*
* If not provided, displays data as a simple string.
*
* Usage:
*
* In a component where you're using the table create a template like:
*
* ```html
* <ng-template #customHeaderTemplate let-data="data">
* <i><a [routerLink]="data.link">{{data.name}}</a></i>
* </ng-template>
* ```
* where we assume your data contains `link` and `name`. `let-data="data"` is
* necessary for you to be able to access item's data in the template.
*
* Create `ViewChild` property with:
*
* ```typescript
* (at)ViewChild("customHeaderTemplate")
* protected customHeaderTemplate: TemplateRef<any>;
* ```
*
* Set the template to the header item, for example:
*
* ```typescript
* this.model.header = [
* new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})
* ];
* ```
*/
template: TemplateRef<any>;
/**
* The label for the sort button
*/
ariaSortLabel: string;
/**
* A callback function to format the sort label. Will be heavily called.
*/
formatSortLabel: (label: string, staticLabel?: string) => string;
/**
* Used as a template for popover filter.
*
* `let-popover="popover"` will give you access to popover component and allow you to
* manipulate it if needed.
*
* `let-filter="filter"` will give you access to the "filter". The main takeaway is
* store the data you need to `filter.data`. You will be able to access it as
* `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`
*
* Example:
* ```html
* <ng-template #filter let-popover="popover">
* <cds-label class="first-label">
* Value
* <input type="text" [(ngModel)]="filter1" class="input-field">
* </cds-label>
* </ng-template>
*
* <ng-template #filterFooter let-popover="popover" let-filter="data">
* <button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>
* <button class="btn--secondary" (click)="popover.onClose()">Cancel</button>
* </ng-template>
* ```
*
* Set the template with, for example:
* ```typescript
* new FilterableHeaderItem({
* filterTemplate: this.filter,
* filterFooter: this.filterFooter
* })
* ```
*
* ```typescript
* class FilterableHeaderItem extends TableHeaderItem {
* // custom filter function
* filter(item: TableItem): boolean {
* if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {
* this.filterCount = 1;
* return false;
* }
* this.filterCount = 0;
* return true;
* }
* }
* ```
*/
filterTemplate: TemplateRef<any>;
/**
* Used along with `filterTemplate` to construct the filter popover
*/
filterFooter: TemplateRef<any>;
/**
* This is where you store your data when applying filter.
*
* It is the actual object you have access to with `let-filter="data"` in your template.
*
* Make sure to store data in `filter.data` in your template, and you will have it
* available in `filterData.data` in your extension of `TableHeaderItem`.
*
* Because angular and object references.
*/
filterData: any;
sortDirection: SortType = "NONE";
private _title: string;
/**
* Creates an instance of TableHeaderItem.
*/
constructor(rawData?: any) {
// defaults so we dont leave things empty
const defaults = {
data: "",
visible: this.visible,
style: this.style,
filterCount: this.filterCount,
filterData: {data: ""}
};
// fill our object with provided props, and fallback to defaults
const data = Object.assign({}, defaults, rawData);
for (let property of Object.getOwnPropertyNames(data)) {
if (data.hasOwnProperty(property)) {
this[property] = data[property];
}
}
}
/**
* Used for sorting rows of the table.
*
* Override to enable different sorting.
*
* < 0 if `one` should go before `two`
* > 0 if `one` should go after `two`
* 0 if it doesn't matter (they are the same)
*/
compare(one: TableItem, two: TableItem): number {
if (!one || !two) {
return 0;
}
if (typeof one.data === "string") {
return one.data.localeCompare(two.data);
}
if (one.data < two.data) {
return -1;
} else if (one.data > two.data) {
return 1;
} else {
return 0;
}
}
/**
* Used to filter rows in the table.
*
* Override to make a custom filter.
*
* Even though there is just one filter function, there can be multiple filters.
* When implementing filter, set `filterCount` before returning.
*
* `true` to hide the row
* `false` to show the row
*/
filter(item: TableItem): boolean {
this.filterCount = 0;
return false;
}
}
</code></pre>
</div>
</div>
</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 = 'class';
var COMPODOC_CURRENT_PAGE_URL = 'TableHeaderItem.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>
<footer class="carbon">
<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
</footer>
<script
key="8"
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
</script>
<!-- Storybook override -->
<script>
document.title = "Carbon Components Angular";
</script>
<script
src="//1.www.s81c.com/common/stats/ibm-common.js"
type="text/javascript"
async="async">
</script>
</body>
</html>