carbon-components-angular
Version:
Next generation components
1,233 lines (1,094 loc) • 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">