carbon-components-angular
Version:
Next generation components
5,889 lines • 249 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 component">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item"
>
Table</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="#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/table/table.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Build your table with this component by extending things that differ from default.</p>
<p><a href="../../?path=/story/components-table--basic">See demo</a></p>
<p>Instead of the usual write-your-own-html approach you had with <code><table></code>,
carbon table uses model-view-controller approach.</p>
<p>Here, you create a view (with built-in controller) and provide it a model.
Changes you make to the model are reflected in the view. Provide same model you use
in the table to the <code><cds-pagination></code> components.
They provide a different view over the same data.</p>
<h2>Basic usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><cds-table [model]="model"></cds-table></code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">public model = new TableModel();
this.model.data = [
[new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
[new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
[new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
[new TableItem({data: "csdf"}), new TableItem({data: "twer"})]
];</code></pre></div><h2>Customization</h2>
<p>If you have custom data in your table, you need a way to display it. You can do that
by providing a template to <code>TableItem</code>.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><ng-template #customTableItemTemplate let-data="data">
<a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
</ng-template></code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">customTableItemTemplate: TemplateRef<any>;
this.customModel.data = [
[new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
[new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
[new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
[new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
];</code></pre></div><h3>Sorting and filtering</h3>
<p>In case you need custom sorting and/or filtering you should subclass <code>TableHeaderItem</code>
and override needed functions.</p>
<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.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
item.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
item.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {
return false;
}
return true;
}
set filterCount(n) {}
get filterCount() {
return (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;
}
// used for custom sorting
compare(one: TableItem, two: TableItem) {
const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();
const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();
if (stringOne > stringTwo) {
return 1;
} else if (stringOne < stringTwo) {
return -1;
} else {
return 0;
}
}
}</code></pre></div><p>If you want to do your sorting on the backend or query for sorted data as a result of user
clicking the table header, check table <a href="#sort"><code>sort</code></a> output documentation</p>
<p>See <code>TableHeaderItem</code> class for more information.</p>
<h2>No data template</h2>
<p>When table has no data to show, it can show a message you provide it instead.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><cds-table [model]="model">No data.</cds-table></code></pre></div><p>... will show <code>No data.</code> message, but you can get creative and provide any template you want
to replace table's default <code>tbody</code>.</p>
<h2>Use pagination as table footer</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"><cds-pagination [model]="model" (selectPage)="selectPage($event)"></cds-pagination></code></pre></div><p><code>selectPage()</code> function should fetch the data from backend, create new <code>data</code>, apply it to <code>model.data</code>,
and update <code>model.currentPage</code>.</p>
<p>If the data your server returns is a two dimensional array of objects, it would look something like this:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">selectPage(page) {
this.getPage(page).then((data: Array<Array<any>>) => {
// set the data and update page
this.model.data = this.prepareData(data);
this.model.currentPage = page;
});
}
protected prepareData(data: Array<Array<any>>) {
// create new data from the service data
let newData = [];
data.forEach(dataRow => {
let row = [];
dataRow.forEach(dataElement => {
row.push(new TableItem({
data: dataElement,
template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
// your template can handle all the data types so you don't have to conditionally set it
// you can also set different templates for different columns based on index
}));
});
newData.push(row);
});
return newData;
}</code></pre></div>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnInit</code>
<code>AfterViewInit</code>
<code>OnDestroy</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">selector</td>
<td class="col-md-9"><code>cds-table, ibm-table</code></td>
</tr>
<tr>
<td class="col-md-3">styles</td>
<td class="col-md-9"><code>
:host {
display: block;
}
</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><table
cdsTable
[sortable]="sortable"
[noBorder]="noBorder"
[ngClass]="{'cds--data-table--sticky-header': stickyHeader}"
[size]="size"
[striped]="striped"
[skeleton]="skeleton"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-describedby]="ariaDescribedby">
<thead
cdsTableHead
[sortable]="sortable"
(deselectAll)="onDeselectAll()"
(selectAll)="onSelectAll()"
(expandAllRows)="model.expandAllRows(true)"
(collapseAllRows)="model.expandAllRows(false)"
(sort)="doSort($event)"
[checkboxHeaderLabel]="getCheckboxHeaderLabel()"
[filterTitle]="getFilterTitle()"
[model]="model"
[selectAllCheckbox]="selectAllCheckbox"
[selectAllCheckboxSomeSelected]="selectAllCheckboxSomeSelected"
[showSelectionColumn]="showSelectionColumn"
[enableSingleSelect]="enableSingleSelect"
[showExpandAllToggle]="showExpandAllToggle"
[skeleton]="skeleton"
[sortAscendingLabel]="sortAscendingLabel"
[sortDescendingLabel]="sortDescendingLabel"
[stickyHeader]="stickyHeader">
</thead>
<tbody
cdsTableBody
(deselectRow)="onSelectRow($event)"
(scroll)="onScroll($event)"
(selectRow)="onSelectRow($event)"
[checkboxRowLabel]="getCheckboxRowLabel()"
[enableSingleSelect]="enableSingleSelect"
(rowClick)="onRowClick($event)"
[expandButtonAriaLabel]="expandButtonAriaLabel"
[model]="model"
[size]="size"
[ngStyle]="{'overflow-y': 'scroll'}"
[selectionLabelColumn]="selectionLabelColumn"
[showSelectionColumn]="showSelectionColumn"
[skeleton]="skeleton"
*ngIf="!noData; else noDataTemplate">
</tbody>
<ng-template #noDataTemplate><ng-content></ng-content></ng-template>
<tfoot>
<ng-template
[ngTemplateOutlet]="footerTemplate">
</ng-template>
<tr *ngIf="this.model.isLoading">
<td class="table_loading-indicator">
<div class="cds--loading cds--loading--small">
<svg class="cds--loading__svg" viewBox="-75 -75 150 150">
<circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" />
</svg>
</div>
</td>
</tr>
<tr *ngIf="this.model.isEnd">
<td class="table_end-indicator">
<h5>{{getEndOfDataText() | async}}</h5>
<button (click)="scrollToTop($event)" class="btn--secondary-sm">
{{getScrollTopText() | async}}
</button>
</td>
</tr>
</tfoot>
</table>
</code></pre></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">Protected</span>
<a href="#_checkboxHeaderLabel" >_checkboxHeaderLabel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_checkboxRowLabel" >_checkboxRowLabel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_endOfDataText" >_endOfDataText</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_expandButtonAriaLabel" >_expandButtonAriaLabel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_filterTitle" >_filterTitle</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_isDataGrid" >_isDataGrid</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_model" >_model</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_scrollTopText" >_scrollTopText</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_sortAscendingLabel" >_sortAscendingLabel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_sortDescendingLabel" >_sortDescendingLabel</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#columnDraggedHoverIndex" >columnDraggedHoverIndex</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#columnDraggedPosition" >columnDraggedPosition</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#columnResizeMouseX" >columnResizeMouseX</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#columnResizeWidth" >columnResizeWidth</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#interactionModel" >interactionModel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#interactionPositionSubscription" >interactionPositionSubscription</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#isColumnDragging" >isColumnDragging</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#isViewReady" >isViewReady</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#mouseMoveSubscription" >mouseMoveSubscription</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#mouseUpSubscription" >mouseUpSubscription</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#positionSubscription" >positionSubscription</a>
</li>
<li>
<a href="#selectAllCheckbox" >selectAllCheckbox</a>
</li>
<li>
<a href="#selectAllCheckboxSomeSelected" >selectAllCheckboxSomeSelected</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#subscriptions" >subscriptions</a>
</li>
<li>
<span class="modifier"></span>
<a href="#tableContent" >tableContent</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="#columnDragEnd" >columnDragEnd</a>
</li>
<li>
<a href="#columnDragEnter" >columnDragEnter</a>
</li>
<li>
<a href="#columnDragLeave" >columnDragLeave</a>
</li>
<li>
<a href="#columnDragover" >columnDragover</a>
</li>
<li>
<a href="#columnDragStart" >columnDragStart</a>
</li>
<li>
<a href="#columnDrop" >columnDrop</a>
</li>
<li>
<a href="#columnResizeEnd" >columnResizeEnd</a>
</li>
<li>
<a href="#columnResizeProgress" >columnResizeProgress</a>
</li>
<li>
<a href="#columnResizeStart" >columnResizeStart</a>
</li>
<li>
<a href="#disableDataGridInteractions" >disableDataGridInteractions</a>
</li>
<li>
<a href="#doSort" >doSort</a>
</li>
<li>
<a href="#enableDataGridInteractions" >enableDataGridInteractions</a>
</li>
<li>
<span class="modifier">Static</span>
<a href="#focus" >focus</a>
</li>
<li>
<a href="#getCheckboxHeaderLabel" >getCheckboxHeaderLabel</a>
</li>
<li>
<a href="#getCheckboxRowLabel" >getCheckboxRowLabel</a>
</li>
<li>
<a href="#getEndOfDataText" >getEndOfDataText</a>
</li>
<li>
<a href="#getExpandButtonAriaLabel" >getExpandButtonAriaLabel</a>
</li>
<li>
<a href="#getFilterTitle" >getFilterTitle</a>
</li>
<li>
<a href="#getScrollTopText" >getScrollTopText</a>
</li>
<li>
<a href="#getSelectionLabelValue" >getSelectionLabelValue</a>
</li>
<li>
<a href="#getSortAscendingLabel" >getSortAscendingLabel</a>
</li>
<li>
<a href="#getSortDescendingLabel" >getSortDescendingLabel</a>
</li>
<li>
<a href="#ngAfterViewInit" >ngAfterViewInit</a>
</li>
<li>
<a href="#ngOnDestroy" >ngOnDestroy</a>
</li>
<li>
<a href="#ngOnInit" >ngOnInit</a>
</li>
<li>
<a href="#onDeselectAll" >onDeselectAll</a>
</li>
<li>
<a href="#onRowClick" >onRowClick</a>
</li>
<li>
<a href="#onScroll" >onScroll</a>
</li>
<li>
<a href="#onSelectAll" >onSelectAll</a>
</li>
<li>
<a href="#onSelectRow" >onSelectRow</a>
</li>
<li>
<a href="#resetTabIndex" >resetTabIndex</a>
</li>
<li>
<a href="#scrollToTop" >scrollToTop</a>
</li>
<li>
<span class="modifier">Static</span>
<a href="#setTabIndex" >setTabIndex</a>
</li>
<li>
<span class="modifier">Static</span>
<a href="#skeletonModel" >skeletonModel</a>
</li>
<li>
<a href="#updateSelectAllCheckbox" >updateSelectAllCheckbox</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="#ariaDescribedby" >ariaDescribedby</a>
</li>
<li>
<a href="#ariaLabelledby" >ariaLabelledby</a>
</li>
<li>
<a href="#enableSingleSelect" >enableSingleSelect</a>
</li>
<li>
<a href="#expandButtonAriaLabel" >expandButtonAriaLabel</a>
</li>
<li>
<a href="#footerTemplate" >footerTemplate</a>
</li>
<li>
<a href="#isDataGrid" >isDataGrid</a>
</li>
<li>
<a href="#model" >model</a>
</li>
<li>
<a href="#noBorder" >noBorder</a>
</li>
<li>
<a href="#scrollLoadDistance" >scrollLoadDistance</a>
</li>
<li>
<a href="#selectionLabelColumn" >selectionLabelColumn</a>
</li>
<li>
<a href="#showExpandAllToggle" >showExpandAllToggle</a>
</li>
<li>
<a href="#showSelectionColumn" >showSelectionColumn</a>
</li>
<li>
<a href="#size" >size</a>
</li>
<li>
<a href="#skeleton" >skeleton</a>
</li>
<li>
<a href="#sortable" >sortable</a>
</li>
<li>
<a href="#sortAscendingLabel" >sortAscendingLabel</a>
</li>
<li>
<a href="#sortDescendingLabel" >sortDescendingLabel</a>
</li>
<li>
<a href="#stickyHeader" >stickyHeader</a>
</li>
<li>
<a href="#striped" >striped</a>
</li>
<li>
<a href="#translations" >translations</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="#deselectAll" >deselectAll</a>
</li>
<li>
<a href="#deselectRow" >deselectRow</a>
</li>
<li>
<a href="#rowClick" >rowClick</a>
</li>
<li>
<a href="#scrollLoad" >scrollLoad</a>
</li>
<li>
<a href="#selectAll" >selectAll</a>
</li>
<li>
<a href="#selectRow" >selectRow</a>
</li>
<li>
<a href="#sort" >sort</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostBindings</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#class.cds--data-table-content" >class.cds--data-table-content</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="#model" >model</a>
</li>
<li>
<a href="#isDataGrid" >isDataGrid</a>
</li>
<li>
<a href="#expandButtonAriaLabel" >expandButtonAriaLabel</a>
</li>
<li>
<a href="#sortDescendingLabel" >sortDescendingLabel</a>
</li>
<li>
<a href="#sortAscendingLabel" >sortAscendingLabel</a>
</li>
<li>
<a href="#translations" >translations</a>
</li>
<li>
<a href="#noData" >noData</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(elementRef: ElementRef, applicationRef: ApplicationRef, i18n: <a href="../injectables/I18n.html" target="_self">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="649" class="link-to-prism">src/table/table.component.ts:649</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates an instance of Table.</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>elementRef</td>
<td>
<code>ElementRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>applicationRef</td>
<td>
<code>ApplicationRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>i18n</td>
<td>
<code><a href="../injectables/I18n.html" target="_self" >I18n</a></code>
</td>
<td>
No
</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="ariaDescribedby"></a>
<b>ariaDescribedby</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="313" class="link-to-prism">src/table/table.component.ts:313</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Id of the table header description element</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ariaLabelledby"></a>
<b>ariaLabelledby</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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="309" class="link-to-prism">src/table/table.component.ts:309</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Id of the table header title element</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="enableSingleSelect"></a>
<b>enableSingleSelect</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="407" class="link-to-prism">src/table/table.component.ts:407</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls whether to enable multiple or single row selection.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="expandButtonAriaLabel"></a>
<b>expandButtonAriaLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/table/table.component.ts:435</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="footerTemplate"></a>
<b>footerTemplate</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="496" class="link-to-prism">src/table/table.component.ts:496</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set footer template to customize what is displayed in the tfoot section of the table</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isDataGrid"></a>
<b>isDataGrid</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="371" class="link-to-prism">src/table/table.component.ts:371</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> for a data grid with keyboard interactions.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="model"></a>
<b>model</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="319" class="link-to-prism">src/table/table.component.ts:319</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>TableModel</code> with data the table is to display.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="noBorder"></a>
<b>noBorder</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>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="388" class="link-to-prism">src/table/table.component.ts:388</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="scrollLoadDistance"></a>
<b>scrollLoadDistance</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/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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="413" class="link-to-prism">src/table/table.component.ts:413</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Distance (in px) from the bottom that view has to reach before
<code>scrollLoad</code> event is emitted.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectionLabelColumn"></a>
<b>selectionLabelColumn</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/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="508" class="link-to-prism">src/table/table.component.ts:508</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used to populate the row selection checkbox label with a useful value if set.</p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-none"><cds-table [selectionLabelColumn]="0"></cds-table>
<!-- results in aria-label="Select first column value"
(where "first column value" is the value of the first column in the row --></code></pre></div></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="showExpandAllToggle"></a>
<b>showExpandAllToggle</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="393" class="link-to-prism">src/table/table.component.ts:393</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to show expansion toggle when table consists of row expansions</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="showSelectionColumn"></a>
<b>showSelectionColumn</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>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="402" class="link-to-prism">src/table/table.component.ts:402</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls whether to show the selection checkboxes column or not.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="size"></a>
<b>size</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#TableRowSize" target="_self" >TableRowSize</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"md"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="363" class="link-to-prism">src/table/table.component.ts:363</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Size of the table rows.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="skeleton"></a>
<b>skeleton</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="367" class="link-to-prism">src/table/table.component.ts:367</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> for a loading 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>
<b>sortable</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>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="386" class="link-to-prism">src/table/table.component.ts:386</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Setting sortable to false will disable all headers including headers which are sortable. Is is
possible to set the sortable state on the header item to disable/enable sorting for only some headers.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortAscendingLabel"></a>
<b>sortAscendingLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="449" class="link-to-prism">src/table/table.component.ts:449</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortDescendingLabel"></a>
<b>sortDescendingLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="442" class="link-to-prism">src/table/table.component.ts:442</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="stickyHeader"></a>
<b>stickyHeader</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="491" class="link-to-prism">src/table/table.component.ts:491</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to stick the header to the top of the table</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="striped"></a>
<b>striped</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>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="481" class="link-to-prism">src/table/table.component.ts:481</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>false</code> to remove table rows (zebra) stripes.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="translations"></a>
<b>translations</b>
</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-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="469" class="link-to-prism">src/table/table.component.ts:469</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Expects an object that contains some or all of:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-none">{
"FILTER": "Filter",
"END_OF_DATA": "You've reached the end of your content",
"SCROLL_TOP": "Scroll to top",
"CHECKBOX_HEADER": "Select all rows",
"CHECKBOX_ROW": "Select row"
}</code></pre></div></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="deselectAll"></a>
<b>deselectAll</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="580" class="link-to-prism">src/table/table.component.ts:580</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits if all rows are deselected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="deselectRow"></a>
<b>deselectRow</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="594" class="link-to-prism">src/table/table.component.ts:594</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits if a single row is deselected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowClick"></a>
<b>rowClick</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="599" class="link-to-prism">src/table/table.component.ts:599</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="scrollLoad"></a>
<b>scrollLoad</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="604" class="link-to-prism">src/table/table.component.ts:604</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits when table requires more data to be loaded.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAll"></a>
<b>selectAll</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="573" class="link-to-prism">src/table/table.component.ts:573</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits if all rows are selected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectRow"></a>
<b>selectRow</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="587" class="link-to-prism">src/table/table.component.ts:587</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits if a single row is selected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sort"></a>
<b>sort</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="566" class="link-to-prism">src/table/table.component.ts:566</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits an index of the column that wants to be sorted.</p>
<p>If no observers are provided (default), table will attempt to do a simple sort of the data loaded
into the model.</p>
<p>If an observer is provided, table will not attempt any sorting of its own and it is up to the observer
to sort the table. This is what you typically want if you're using a backend query to get the sorted
data or want to sort data across multiple pages.</p>
<p>Usage:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">@Component({
selector: "app-table",
template: `
<cds-table
[model]="model"
(sort)="simpleSort($event)">
No data.
</cds-table>
`
})
export class TableApp implements OnInit, OnChanges {
@Input() model = new TableModel();
ngOnInit() {
this.model.header = [
new TableHeaderItem({ data: "Name" }),
new TableHeaderItem({ data: "hwer" })
];
this.model.data = [
[new TableItem({ data: "Name 1" }), new TableItem({ data: "qwer" })],
[new TableItem({ data: "Name 3" }), new TableItem({ data: "zwer" })],
[new TableItem({ data: "Name 2" }), new TableItem({ data: "swer" })],
[new TableItem({ data: "Name 4" }), new TableItem({data: "twer"})],
[new TableItem({ data: "Name 5" }), new TableItem({data: "twer"})],
[new TableItem({ data: "Name 6" }), new TableItem({data: "twer"})]
];
}
simpleSort(index: number) {
// this function does a simple sort, which is the default for the table and if that's
// all you want, you don't need to do this.
// here you can query your backend and update the model.data based on the result
if (this.model.header[index].sorted) {
// if already sorted flip sorting direction
this.model.header[index].ascending = this.model.header[index].descending;
}
this.model.sort(index);
}
}</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.cds--data-table-content"></a>
<span class="name">
<span ><b>class.cds--data-table-content</b></span>
<a href="#class.cds--data-table-content"><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/boolean" target="_blank" >boolean</a></code>
</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="486" class="link-to-prism">src/table/table.component.ts:486</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Allows table content to scroll horizontally</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="columnDragEnd"></a>
<span class="name">
<span ><b>columnDragEnd</b></span>
<a href="#columnDragEnd"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragEnd(event, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="825"
class="link-to-prism">src/table/table.component.ts:825</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnDragEnter"></a>
<span class="name">
<span ><b>columnDragEnter</b></span>
<a href="#columnDragEnter"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragEnter(event, position, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="830"
class="link-to-prism">src/table/table.component.ts:830</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>position</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnDragLeave"></a>
<span class="name">
<span ><b>columnDragLeave</b></span>
<a href="#columnDragLeave"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragLeave(event, position, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="835"
class="link-to-prism">src/table/table.component.ts:835</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>position</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnDragover"></a>
<span class="name">
<span ><b>columnDragover</b></span>
<a href="#columnDragover"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragover(event, position, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="839"
class="link-to-prism">src/table/table.component.ts:839</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>position</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnDragStart"></a>
<span class="name">
<span ><b>columnDragStart</b></span>
<a href="#columnDragStart"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragStart(event, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="819"
class="link-to-prism">src/table/table.component.ts:819</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnDrop"></a>
<span class="name">
<span ><b>columnDrop</b></span>
<a href="#columnDrop"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDrop(event, position, columnIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="847"
class="link-to-prism">src/table/table.component.ts:847</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>position</td>
<td>
No
</td>
</tr>
<tr>
<td>columnIndex</td>
<td>
No
</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="columnResizeEnd"></a>
<span class="name">
<span ><b>columnResizeEnd</b></span>
<a href="#columnResizeEnd"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeEnd(event, column)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="800"
class="link-to-prism">src/table/table.component.ts:800</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>column</td>
<td>
No
</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="columnResizeProgress"></a>
<span class="name">
<span ><b>columnResizeProgress</b></span>
<a href="#columnResizeProgress"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeProgress(event, column)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="795"
class="link-to-prism">src/table/table.component.ts:795</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>column</td>
<td>
No
</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="columnResizeStart"></a>
<span class="name">
<span ><b>columnResizeStart</b></span>
<a href="#columnResizeStart"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeStart(event, column)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="782"
class="link-to-prism">src/table/table.component.ts:782</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>event</td>
<td>
No
</td>
</tr>
<tr>
<td>column</td>
<td>
No
</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="disableDataGridInteractions"></a>
<span class="name">
<span ><b>disableDataGridInteractions</b></span>
<a href="#disableDataGridInteractions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>disableDataGridInteractions()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="710"
class="link-to-prism">src/table/table.component.ts:710</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="doSort"></a>
<span class="name">
<span ><b>doSort</b></span>
<a href="#doSort"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>doSort(index: <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">
<div class="io-line">Defined in <a href="" data-line="858"
class="link-to-prism">src/table/table.component.ts:858</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</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="enableDataGridInteractions"></a>
<span class="name">
<span ><b>enableDataGridInteractions</b></span>
<a href="#enableDataGridInteractions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>enableDataGridInteractions()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="680"
class="link-to-prism">src/table/table.component.ts:680</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="focus"></a>
<span class="name">
<span class="modifier">Static</span>
<span ><b>focus</b></span>
<a href="#focus"><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>focus(element: HTMLElement)</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/table/table.component.ts:294</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>element</td>
<td>
<code>HTMLElement</code>
</td>
<td>
No
</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="getCheckboxHeaderLabel"></a>
<span class="name">
<span ><b>getCheckboxHeaderLabel</b></span>
<a href="#getCheckboxHeaderLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getCheckboxHeaderLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="894"
class="link-to-prism">src/table/table.component.ts:894</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getCheckboxRowLabel"></a>
<span class="name">
<span ><b>getCheckboxRowLabel</b></span>
<a href="#getCheckboxRowLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getCheckboxRowLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="898"
class="link-to-prism">src/table/table.component.ts:898</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getEndOfDataText"></a>
<span class="name">
<span ><b>getEndOfDataText</b></span>
<a href="#getEndOfDataText"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getEndOfDataText()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="902"
class="link-to-prism">src/table/table.component.ts:902</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getExpandButtonAriaLabel"></a>
<span class="name">
<span ><b>getExpandButtonAriaLabel</b></span>
<a href="#getExpandButtonAriaLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getExpandButtonAriaLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="884"
class="link-to-prism">src/table/table.component.ts:884</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getFilterTitle"></a>
<span class="name">
<span ><b>getFilterTitle</b></span>
<a href="#getFilterTitle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getFilterTitle()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="910"
class="link-to-prism">src/table/table.component.ts:910</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getScrollTopText"></a>
<span class="name">
<span ><b>getScrollTopText</b></span>
<a href="#getScrollTopText"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getScrollTopText()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="906"
class="link-to-prism">src/table/table.component.ts:906</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSelectionLabelValue"></a>
<span class="name">
<span ><b>getSelectionLabelValue</b></span>
<a href="#getSelectionLabelValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSelectionLabelValue(row: <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="877"
class="link-to-prism">src/table/table.component.ts:877</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>row</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>{ value: any; }</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="getSortAscendingLabel"></a>
<span class="name">
<span ><b>getSortAscendingLabel</b></span>
<a href="#getSortAscendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSortAscendingLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="890"
class="link-to-prism">src/table/table.component.ts:890</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSortDescendingLabel"></a>
<span class="name">
<span ><b>getSortDescendingLabel</b></span>
<a href="#getSortDescendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSortDescendingLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="887"
class="link-to-prism">src/table/table.component.ts:887</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" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterViewInit"></a>
<span class="name">
<span ><b>ngAfterViewInit</b></span>
<a href="#ngAfterViewInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngAfterViewInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="666"
class="link-to-prism">src/table/table.component.ts:666</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="ngOnDestroy"></a>
<span class="name">
<span ><b>ngOnDestroy</b></span>
<a href="#ngOnDestroy"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnDestroy()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="673"
class="link-to-prism">src/table/table.component.ts:673</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="ngOnInit"></a>
<span class="name">
<span ><b>ngOnInit</b></span>
<a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="660"
class="link-to-prism">src/table/table.component.ts:660</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="onDeselectAll"></a>
<span class="name">
<span ><b>onDeselectAll</b></span>
<a href="#onDeselectAll"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onDeselectAll()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="726"
class="link-to-prism">src/table/table.component.ts:726</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="onRowClick"></a>
<span class="name">
<span ><b>onRowClick</b></span>
<a href="#onRowClick"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onRowClick(index: <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">
<div class="io-line">Defined in <a href="" data-line="745"
class="link-to-prism">src/table/table.component.ts:745</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</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="onScroll"></a>
<span class="name">
<span ><b>onScroll</b></span>
<a href="#onScroll"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onScroll(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="809"
class="link-to-prism">src/table/table.component.ts:809</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered when the user scrolls on the <code><tbody></code> element.
Emits the <code>scrollLoad</code> event.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</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="onSelectAll"></a>
<span class="name">
<span ><b>onSelectAll</b></span>
<a href="#onSelectAll"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onSelectAll()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="721"
class="link-to-prism">src/table/table.component.ts:721</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="onSelectRow"></a>
<span class="name">
<span ><b>onSelectRow</b></span>
<a href="#onSelectRow"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onSelectRow(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="731"
class="link-to-prism">src/table/table.component.ts:731</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>event</td>
<td>
No
</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="resetTabIndex"></a>
<span class="name">
<span ><b>resetTabIndex</b></span>
<a href="#resetTabIndex"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>resetTabIndex(newTabIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="765"
class="link-to-prism">src/table/table.component.ts:765</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>newTabIndex</td>
<td>
No
</td>
<td>
<code>-1</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="scrollToTop"></a>
<span class="name">
<span ><b>scrollToTop</b></span>
<a href="#scrollToTop"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>scrollToTop(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="872"
class="link-to-prism">src/table/table.component.ts:872</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered when the user scrolls on the <code><tbody></code> element.
Emits the <code>scrollLoad</code> event.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</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="setTabIndex"></a>
<span class="name">
<span class="modifier">Static</span>
<span ><b>setTabIndex</b></span>
<a href="#setTabIndex"><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>setTabIndex(element: HTMLElement, index: | "0")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="283"
class="link-to-prism">src/table/table.component.ts:283</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>element</td>
<td>
<code>HTMLElement</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>index</td>
<td>
<code> | "0"</code>
</td>
<td>
No
</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="skeletonModel"></a>
<span class="name">
<span class="modifier">Static</span>
<span ><b>skeletonModel</b></span>
<a href="#skeletonModel"><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>skeletonModel(rowCount: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, columnCount: <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">
<div class="io-line">Defined in <a href="" data-line="264"
class="link-to-prism">src/table/table.component.ts:264</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates a skeleton model with a row and column count specified by the user</p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">this.model = Table.skeletonModel(5, 5);</code></pre></div></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>rowCount</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>columnCount</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</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" >any</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="updateSelectAllCheckbox"></a>
<span class="name">
<span ><b>updateSelectAllCheckbox</b></span>
<a href="#updateSelectAllCheckbox"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>updateSelectAllCheckbox()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="749"
class="link-to-prism">src/table/table.component.ts:749</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="_checkboxHeaderLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_checkboxHeaderLabel</b></span>
<a href="#_checkboxHeaderLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.CHECKBOX_HEADER")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="640" class="link-to-prism">src/table/table.component.ts:640</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_checkboxRowLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_checkboxRowLabel</b></span>
<a href="#_checkboxRowLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.CHECKBOX_ROW")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="641" class="link-to-prism">src/table/table.component.ts:641</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_endOfDataText"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_endOfDataText</b></span>
<a href="#_endOfDataText"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.END_OF_DATA")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="642" class="link-to-prism">src/table/table.component.ts:642</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_expandButtonAriaLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_expandButtonAriaLabel</b></span>
<a href="#_expandButtonAriaLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.EXPAND_BUTTON")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="637" class="link-to-prism">src/table/table.component.ts:637</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_filterTitle"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_filterTitle</b></span>
<a href="#_filterTitle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.FILTER")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="644" class="link-to-prism">src/table/table.component.ts:644</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_isDataGrid"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_isDataGrid</b></span>
<a href="#_isDataGrid"><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="627" class="link-to-prism">src/table/table.component.ts:627</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_model"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_model</b></span>
<a href="#_model"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="626" class="link-to-prism">src/table/table.component.ts:626</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_scrollTopText"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_scrollTopText</b></span>
<a href="#_scrollTopText"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.SCROLL_TOP")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="643" class="link-to-prism">src/table/table.component.ts:643</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_sortAscendingLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_sortAscendingLabel</b></span>
<a href="#_sortAscendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.SORT_ASCENDING")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="639" class="link-to-prism">src/table/table.component.ts:639</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_sortDescendingLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_sortDescendingLabel</b></span>
<a href="#_sortDescendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.SORT_DESCENDING")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="638" class="link-to-prism">src/table/table.component.ts:638</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnDraggedHoverIndex"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>columnDraggedHoverIndex</b></span>
<a href="#columnDraggedHoverIndex"><span class="icon ion-ios-link"></span></a>
</span>
</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="623" class="link-to-prism">src/table/table.component.ts:623</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnDraggedPosition"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>columnDraggedPosition</b></span>
<a href="#columnDraggedPosition"><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">
<i>Default value : </i><code>""</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="624" class="link-to-prism">src/table/table.component.ts:624</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnResizeMouseX"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>columnResizeMouseX</b></span>
<a href="#columnResizeMouseX"><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">
<div class="io-line">Defined in <a href="" data-line="647" class="link-to-prism">src/table/table.component.ts:647</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnResizeWidth"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>columnResizeWidth</b></span>
<a href="#columnResizeWidth"><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">
<div class="io-line">Defined in <a href="" data-line="646" class="link-to-prism">src/table/table.component.ts:646</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="interactionModel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>interactionModel</b></span>
<a href="#interactionModel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/DataGridInteractionModel.html" target="_self" >DataGridInteractionModel</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="634" class="link-to-prism">src/table/table.component.ts:634</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="interactionPositionSubscription"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>interactionPositionSubscription</b></span>
<a href="#interactionPositionSubscription"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="635" class="link-to-prism">src/table/table.component.ts:635</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isColumnDragging"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>isColumnDragging</b></span>
<a href="#isColumnDragging"><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="622" class="link-to-prism">src/table/table.component.ts:622</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isViewReady"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>isViewReady</b></span>
<a href="#isViewReady"><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="629" class="link-to-prism">src/table/table.component.ts:629</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mouseMoveSubscription"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>mouseMoveSubscription</b></span>
<a href="#mouseMoveSubscription"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="648" class="link-to-prism">src/table/table.component.ts:648</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mouseUpSubscription"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>mouseUpSubscription</b></span>
<a href="#mouseUpSubscription"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="649" class="link-to-prism">src/table/table.component.ts:649</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="positionSubscription"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>positionSubscription</b></span>
<a href="#positionSubscription"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="632" class="link-to-prism">src/table/table.component.ts:632</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAllCheckbox"></a>
<span class="name">
<span ><b>selectAllCheckbox</b></span>
<a href="#selectAllCheckbox"><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="609" class="link-to-prism">src/table/table.component.ts:609</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls if all checkboxes are viewed as selected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAllCheckboxSomeSelected"></a>
<span class="name">
<span ><b>selectAllCheckboxSomeSelected</b></span>
<a href="#selectAllCheckboxSomeSelected"><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="614" class="link-to-prism">src/table/table.component.ts:614</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls the indeterminate state of the header checkbox.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="subscriptions"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>subscriptions</b></span>
<a href="#subscriptions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Subscription()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="631" class="link-to-prism">src/table/table.component.ts:631</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="tableContent"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>tableContent</b></span>
<a href="#tableContent"><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">
<b>Decorators : </b>
<br />
<code>
@HostBinding('class.cds--data-table-content')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="486" class="link-to-prism">src/table/table.component.ts:486</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Allows table content to scroll horizontally</p>
</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="model"></a>
<span class="name"><b>model</b><a href="#model"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>model()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="356" class="link-to-prism">src/table/table.component.ts:356</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>model(m: <a href="../classes/TableModel.html" target="_self">TableModel</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="319" class="link-to-prism">src/table/table.component.ts:319</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>TableModel</code> with data the table is to display.</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>m</td>
<td>
<code><a href="../classes/TableModel.html" target="_self" >TableModel</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="isDataGrid"></a>
<span class="name"><b>isDataGrid</b><a href="#isDataGrid"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isDataGrid()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="395" class="link-to-prism">src/table/table.component.ts:395</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>isDataGrid(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="371" class="link-to-prism">src/table/table.component.ts:371</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> for a data grid with keyboard interactions.</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>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="expandButtonAriaLabel"></a>
<span class="name"><b>expandButtonAriaLabel</b><a href="#expandButtonAriaLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>expandButtonAriaLabel()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/table/table.component.ts:438</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>expandButtonAriaLabel(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/table/table.component.ts:435</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to enable users to drag and drop columns.</p>
<p>Changing the column order in table changes table model. Be aware of it when you add additional data
to the model.</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>value</td>
<td>
<code>string | Observable<string></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="sortDescendingLabel"></a>
<span class="name"><b>sortDescendingLabel</b><a href="#sortDescendingLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>sortDescendingLabel()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/table/table.component.ts:445</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>sortDescendingLabel(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="442" class="link-to-prism">src/table/table.component.ts:442</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>string | Observable<string></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="sortAscendingLabel"></a>
<span class="name"><b>sortAscendingLabel</b><a href="#sortAscendingLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>sortAscendingLabel()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/table/table.component.ts:452</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>sortAscendingLabel(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="449" class="link-to-prism">src/table/table.component.ts:449</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>string | Observable<string></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="translations"></a>
<span class="name"><b>translations</b><a href="#translations"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>translations(value)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="469" class="link-to-prism">src/table/table.component.ts:469</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Expects an object that contains some or all of:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-none">{
"FILTER": "Filter",
"END_OF_DATA": "You've reached the end of your content",
"SCROLL_TOP": "Scroll to top",
"CHECKBOX_HEADER": "Select all rows",
"CHECKBOX_ROW": "Select row"
}</code></pre></div></div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</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="noData"></a>
<span class="name"><b>noData</b><a href="#noData"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>noData()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="616" class="link-to-prism">src/table/table.component.ts:616</a></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 {
Component,
ApplicationRef,
Input,
OnInit,
Output,
EventEmitter,
ElementRef,
AfterViewInit,
TemplateRef,
OnDestroy,
HostBinding
} from "@angular/core";
import { Subscription, fromEvent, Observable } from "rxjs";
import { TableModel } from "./table-model.class";
import { TableHeaderItem } from "./table-header-item.class";
import { TableItem } from "./table-item.class";
import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from "carbon-components-angular/common";
import { I18n, Overridable } from "carbon-components-angular/i18n";
import { merge } from "carbon-components-angular/utils";
import { DataGridInteractionModel } from "./data-grid-interaction-model.class";
import { TableDomAdapter } from "./table-adapter.class";
import { TableRowSize } from "./table.types";
/**
* Build your table with this component by extending things that differ from default.
*
* [See demo](../../?path=/story/components-table--basic)
*
* Instead of the usual write-your-own-html approach you had with `<table>`,
* carbon table uses model-view-controller approach.
*
* Here, you create a view (with built-in controller) and provide it a model.
* Changes you make to the model are reflected in the view. Provide same model you use
* in the table to the `<cds-pagination>` components.
* They provide a different view over the same data.
*
* ## Basic usage
*
* ```html
* <cds-table [model]="model"></cds-table>
* ```
*
* ```typescript
* public model = new TableModel();
*
* this.model.data = [
* [new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
* [new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
* [new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
* [new TableItem({data: "csdf"}), new TableItem({data: "twer"})]
* ];
* ```
*
* ## Customization
*
* If you have custom data in your table, you need a way to display it. You can do that
* by providing a template to `TableItem`.
*
* ```html
* <ng-template #customTableItemTemplate let-data="data">
* <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
* </ng-template>
* ```
*
* ```typescript
* customTableItemTemplate: TemplateRef<any>;
*
* this.customModel.data = [
* [new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
* [new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
* [new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
* [new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
* ];
* ```
*
* ### Sorting and filtering
*
* In case you need custom sorting and/or filtering you should subclass `TableHeaderItem`
* and override needed functions.
*
* ```typescript
* class FilterableHeaderItem extends TableHeaderItem {
* // custom filter function
* filter(item: TableItem): boolean {
* if (typeof item.data === "string" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
* item.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
* item.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {
* return false;
* }
* return true;
* }
*
* set filterCount(n) {}
* get filterCount() {
* return (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;
* }
*
* // used for custom sorting
* compare(one: TableItem, two: TableItem) {
* const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();
* const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();
*
* if (stringOne > stringTwo) {
* return 1;
* } else if (stringOne < stringTwo) {
* return -1;
* } else {
* return 0;
* }
* }
* }
* ```
*
* If you want to do your sorting on the backend or query for sorted data as a result of user
* clicking the table header, check table [`sort`](#sort) output documentation
*
* See `TableHeaderItem` class for more information.
*
* ## No data template
*
* When table has no data to show, it can show a message you provide it instead.
*
* ```html
* <cds-table [model]="model">No data.</cds-table>
* ```
*
* ... will show `No data.` message, but you can get creative and provide any template you want
* to replace table's default `tbody`.
*
* ## Use pagination as table footer
*
* ```html
* <cds-pagination [model]="model" (selectPage)="selectPage($event)"></cds-pagination>
* ```
*
* `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,
* and update `model.currentPage`.
*
* If the data your server returns is a two dimensional array of objects, it would look something like this:
*
* ```typescript
* selectPage(page) {
* this.getPage(page).then((data: Array<Array<any>>) => {
* // set the data and update page
* this.model.data = this.prepareData(data);
* this.model.currentPage = page;
* });
* }
*
* protected prepareData(data: Array<Array<any>>) {
* // create new data from the service data
* let newData = [];
* data.forEach(dataRow => {
* let row = [];
* dataRow.forEach(dataElement => {
* row.push(new TableItem({
* data: dataElement,
* template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
* // your template can handle all the data types so you don't have to conditionally set it
* // you can also set different templates for different columns based on index
* }));
* });
* newData.push(row);
* });
* return newData;
* }
* ```
*/
@Component({
selector: "cds-table, ibm-table",
template: `
<table
cdsTable
[sortable]="sortable"
[noBorder]="noBorder"
[ngClass]="{'cds--data-table--sticky-header': stickyHeader}"
[size]="size"
[striped]="striped"
[skeleton]="skeleton"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-describedby]="ariaDescribedby">
<thead
cdsTableHead
[sortable]="sortable"
(deselectAll)="onDeselectAll()"
(selectAll)="onSelectAll()"
(expandAllRows)="model.expandAllRows(true)"
(collapseAllRows)="model.expandAllRows(false)"
(sort)="doSort($event)"
[checkboxHeaderLabel]="getCheckboxHeaderLabel()"
[filterTitle]="getFilterTitle()"
[model]="model"
[selectAllCheckbox]="selectAllCheckbox"
[selectAllCheckboxSomeSelected]="selectAllCheckboxSomeSelected"
[showSelectionColumn]="showSelectionColumn"
[enableSingleSelect]="enableSingleSelect"
[showExpandAllToggle]="showExpandAllToggle"
[skeleton]="skeleton"
[sortAscendingLabel]="sortAscendingLabel"
[sortDescendingLabel]="sortDescendingLabel"
[stickyHeader]="stickyHeader">
</thead>
<tbody
cdsTableBody
(deselectRow)="onSelectRow($event)"
(scroll)="onScroll($event)"
(selectRow)="onSelectRow($event)"
[checkboxRowLabel]="getCheckboxRowLabel()"
[enableSingleSelect]="enableSingleSelect"
(rowClick)="onRowClick($event)"
[expandButtonAriaLabel]="expandButtonAriaLabel"
[model]="model"
[size]="size"
[ngStyle]="{'overflow-y': 'scroll'}"
[selectionLabelColumn]="selectionLabelColumn"
[showSelectionColumn]="showSelectionColumn"
[skeleton]="skeleton"
*ngIf="!noData; else noDataTemplate">
</tbody>
<ng-template #noDataTemplate><ng-content></ng-content></ng-template>
<tfoot>
<ng-template
[ngTemplateOutlet]="footerTemplate">
</ng-template>
<tr *ngIf="this.model.isLoading">
<td class="table_loading-indicator">
<div class="cds--loading cds--loading--small">
<svg class="cds--loading__svg" viewBox="-75 -75 150 150">
<circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" />
</svg>
</div>
</td>
</tr>
<tr *ngIf="this.model.isEnd">
<td class="table_end-indicator">
<h5>{{getEndOfDataText() | async}}</h5>
<button (click)="scrollToTop($event)" class="btn--secondary-sm">
{{getScrollTopText() | async}}
</button>
</td>
</tr>
</tfoot>
</table>
`,
styles: [`
:host {
display: block;
}
`]
})
export class Table implements OnInit, AfterViewInit, OnDestroy {
/**
* Creates a skeleton model with a row and column count specified by the user
*
* Example:
*
* ```typescript
* this.model = Table.skeletonModel(5, 5);
* ```
*/
static skeletonModel(rowCount: number, columnCount: number) {
const model = new TableModel();
let header = new Array<TableHeaderItem>();
let data = new Array<Array<TableItem>>();
let row = new Array<TableItem>();
for (let i = 0; i < columnCount; i++) {
header.push(new TableHeaderItem());
row.push(new TableItem());
}
for (let i = 0; i < rowCount - 1; i++) {
data.push(row);
}
model.header = header;
model.data = data;
return model;
}
static setTabIndex(element: HTMLElement, index: -1 | 0) {
const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
if (element.firstElementChild && element.firstElementChild.classList.contains("cds--table-sort") && focusElementList.length > 1) {
focusElementList[1].tabIndex = index;
} else if (focusElementList.length > 0) {
focusElementList[0].tabIndex = index;
} else {
element.tabIndex = index;
}
}
static focus(element: HTMLElement) {
const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
if (
(element.firstElementChild?.classList.contains("cds--table-sort") && focusElementList.length > 1) ||
focusElementList.length > 0
) {
focusElementList[0].focus();
} else {
element.focus();
}
}
/**
* Id of the table header title element
*/
@Input() ariaLabelledby: string;
/**
* Id of the table header description element
*/
@Input() ariaDescribedby: string;
/**
* `TableModel` with data the table is to display.
*/
@Input()
set model(m: TableModel) {
if (this._model) {
this.subscriptions.unsubscribe();
// Need to create a new subscription instance here because unsubscribing prevents any new subscriptions
// from being added for some reason. When a new model is set, none of the subscriptions would exist.
this.subscriptions = new Subscription();
}
this._model = m;
const rowsChange = this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());
const dataChange = this._model.dataChange.subscribe(() => {
if (this.isDataGrid) {
this.resetTabIndex();
}
this.updateSelectAllCheckbox();
});
this.subscriptions.add(rowsChange);
this.subscriptions.add(dataChange);
if (this.isDataGrid) {
const expandedChange = this._model.rowsExpandedChange.subscribe(() => {
// Allows the expanded row to have a focus state when it exists in the DOM
setTimeout(() => {
const expandedRows = this.elementRef.nativeElement.querySelectorAll(".cds--expandable-row:not(.cds--parent-row)");
Array.from<any>(expandedRows).forEach(row => {
if (row.firstElementChild.tabIndex === undefined || row.firstElementChild.tabIndex !== -1) {
row.firstElementChild.tabIndex = -1;
}
});
});
});
this.subscriptions.add(expandedChange);
}
}
get model(): TableModel {
return this._model;
}
/**
* Size of the table rows.
*/
@Input() size: TableRowSize = "md";
/**
* Set to `true` for a loading table.
*/
@Input() skeleton = false;
/**
* Set to `true` for a data grid with keyboard interactions.
*/
@Input() set isDataGrid(value: boolean) {
this._isDataGrid = value;
if (this.isViewReady) {
if (value) {
this.enableDataGridInteractions();
} else {
this.disableDataGridInteractions();
}
}
}
/**
* Setting sortable to false will disable all headers including headers which are sortable. Is is
* possible to set the sortable state on the header item to disable/enable sorting for only some headers.
*/
@Input() sortable = true;
@Input() noBorder = true;
/**
* Set to `true` to show expansion toggle when table consists of row expansions
*/
@Input() showExpandAllToggle = false;
get isDataGrid(): boolean {
return this._isDataGrid;
}
/**
* Controls whether to show the selection checkboxes column or not.
*/
@Input() showSelectionColumn = true;
/**
* Controls whether to enable multiple or single row selection.
*/
@Input() enableSingleSelect = false;
/**
* Distance (in px) from the bottom that view has to reach before
* `scrollLoad` event is emitted.
*/
@Input() scrollLoadDistance = 0;
/**
* @todo - Enable column resize when Carbon officially supports feature
* Set to `true` to enable users to resize columns.
*
* Works for columns with width set in pixels.
*
*/
// @Input() columnsResizable = false;
/**
* @todo - Enable columns drag & drop when Carbon officially supports feature
* Set to `true` to enable users to drag and drop columns.
*
* Changing the column order in table changes table model. Be aware of it when you add additional data
* to the model.
*
*/
// @Input() columnsDraggable = false;
@Input()
set expandButtonAriaLabel(value: string | Observable<string>) {
this._expandButtonAriaLabel.override(value);
}
get expandButtonAriaLabel() {
return this._expandButtonAriaLabel.value;
}
@Input()
set sortDescendingLabel(value: string | Observable<string>) {
this._sortDescendingLabel.override(value);
}
get sortDescendingLabel() {
return this._sortDescendingLabel.value;
}
@Input()
set sortAscendingLabel(value: string | Observable<string>) {
this._sortAscendingLabel.override(value);
}
get sortAscendingLabel() {
return this._sortAscendingLabel.value;
}
/**
* Expects an object that contains some or all of:
* ```
* {
* "FILTER": "Filter",
* "END_OF_DATA": "You've reached the end of your content",
* "SCROLL_TOP": "Scroll to top",
* "CHECKBOX_HEADER": "Select all rows",
* "CHECKBOX_ROW": "Select row"
* }
* ```
*/
@Input()
set translations(value) {
const valueWithDefaults = merge(this.i18n.getMultiple("TABLE"), value);
this._filterTitle.override(valueWithDefaults.FILTER);
this._endOfDataText.override(valueWithDefaults.END_OF_DATA);
this._scrollTopText.override(valueWithDefaults.SCROLL_TOP);
this._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER);
this._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW);
}
/**
* Set to `false` to remove table rows (zebra) stripes.
*/
@Input() striped = true;
/**
* Allows table content to scroll horizontally
*/
@HostBinding("class.cds--data-table-content") tableContent = true;
/**
* Set to `true` to stick the header to the top of the table
*/
@HostBinding("class.cds--data-table_inner-container") @Input() stickyHeader = false;
/**
* Set footer template to customize what is displayed in the tfoot section of the table
*/
@Input() footerTemplate: TemplateRef<any>;
/**
* Used to populate the row selection checkbox label with a useful value if set.
*
* Example:
* ```
* <cds-table [selectionLabelColumn]="0"></cds-table>
* <!-- results in aria-label="Select first column value"
* (where "first column value" is the value of the first column in the row -->
* ```
*/
@Input() selectionLabelColumn: number;
/**
* Emits an index of the column that wants to be sorted.
*
* If no observers are provided (default), table will attempt to do a simple sort of the data loaded
* into the model.
*
* If an observer is provided, table will not attempt any sorting of its own and it is up to the observer
* to sort the table. This is what you typically want if you're using a backend query to get the sorted
* data or want to sort data across multiple pages.
*
* Usage:
*
* ```typescript
* @Component({
* selector: "app-table",
* template: `
* <cds-table
* [model]="model"
* (sort)="simpleSort($event)">
* No data.
* </cds-table>
* `
* })
* export class TableApp implements OnInit, OnChanges {
* @Input() model = new TableModel();
*
* ngOnInit() {
* this.model.header = [
* new TableHeaderItem({ data: "Name" }),
* new TableHeaderItem({ data: "hwer" })
* ];
*
* this.model.data = [
* [new TableItem({ data: "Name 1" }), new TableItem({ data: "qwer" })],
* [new TableItem({ data: "Name 3" }), new TableItem({ data: "zwer" })],
* [new TableItem({ data: "Name 2" }), new TableItem({ data: "swer" })],
* [new TableItem({ data: "Name 4" }), new TableItem({data: "twer"})],
* [new TableItem({ data: "Name 5" }), new TableItem({data: "twer"})],
* [new TableItem({ data: "Name 6" }), new TableItem({data: "twer"})]
* ];
* }
*
* simpleSort(index: number) {
* // this function does a simple sort, which is the default for the table and if that's
* // all you want, you don't need to do this.
*
* // here you can query your backend and update the model.data based on the result
* if (this.model.header[index].sorted) {
* // if already sorted flip sorting direction
* this.model.header[index].ascending = this.model.header[index].descending;
* }
* this.model.sort(index);
* }
* }
* ```
*/
@Output() sort = new EventEmitter<number>();
/**
* Emits if all rows are selected.
*
* @param model
*/
@Output() selectAll = new EventEmitter<Object>();
/**
* Emits if all rows are deselected.
*
* @param model
*/
@Output() deselectAll = new EventEmitter<Object>();
/**
* Emits if a single row is selected.
*
* @param ({model: this.model, selectedRowIndex: index})
*/
@Output() selectRow = new EventEmitter<Object>();
/**
* Emits if a single row is deselected.
*
* @param ({model: this.model, deselectedRowIndex: index})
*/
@Output() deselectRow = new EventEmitter<Object>();
/**
* Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.
*/
@Output() rowClick = new EventEmitter<number>();
/**
* Emits when table requires more data to be loaded.
*/
@Output() scrollLoad = new EventEmitter<TableModel>();
/**
* Controls if all checkboxes are viewed as selected.
*/
selectAllCheckbox = false;
/**
* Controls the indeterminate state of the header checkbox.
*/
selectAllCheckboxSomeSelected = false;
get noData() {
return !this.model.data ||
this.model.data.length === 0 ||
this.model.data.length === 1 && this.model.data[0].length === 0;
}
public isColumnDragging = false;
public columnDraggedHoverIndex = -1;
public columnDraggedPosition = "";
protected _model: TableModel;
protected _isDataGrid = false;
// flag to prevent getters/setters from querying the view before it's fully instantiated
protected isViewReady = false;
protected subscriptions = new Subscription();
protected positionSubscription: Subscription;
protected interactionModel: DataGridInteractionModel;
protected interactionPositionSubscription: Subscription;
protected _expandButtonAriaLabel = this.i18n.getOverridable("TABLE.EXPAND_BUTTON");
protected _sortDescendingLabel = this.i18n.getOverridable("TABLE.SORT_DESCENDING");
protected _sortAscendingLabel = this.i18n.getOverridable("TABLE.SORT_ASCENDING");
protected _checkboxHeaderLabel = this.i18n.getOverridable("TABLE.CHECKBOX_HEADER");
protected _checkboxRowLabel = this.i18n.getOverridable("TABLE.CHECKBOX_ROW");
protected _endOfDataText = this.i18n.getOverridable("TABLE.END_OF_DATA");
protected _scrollTopText = this.i18n.getOverridable("TABLE.SCROLL_TOP");
protected _filterTitle = this.i18n.getOverridable("TABLE.FILTER");
protected columnResizeWidth: number;
protected columnResizeMouseX: number;
protected mouseMoveSubscription: Subscription;
protected mouseUpSubscription: Subscription;
/**
* Creates an instance of Table.
*/
constructor(
protected elementRef: ElementRef,
protected applicationRef: ApplicationRef,
protected i18n: I18n
) { }
ngOnInit() {
// Manually trigger check to see if all checkboxes are selected
// This is since subscription is made AFTER checkboxes are selected
this.updateSelectAllCheckbox();
}
ngAfterViewInit() {
this.isViewReady = true;
if (this.isDataGrid) {
this.enableDataGridInteractions();
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
if (this.positionSubscription) {
this.positionSubscription.unsubscribe();
}
}
enableDataGridInteractions() {
// if we have an `interactioModel` we've already enabled datagrid
if (this.interactionModel) {
return;
}
const table = this.elementRef.nativeElement.querySelector("table") as HTMLTableElement;
const tableAdapter = new TableDomAdapter(table);
const keydownEventStream = fromEvent<KeyboardEvent>(table, "keydown");
const clickEventStream = fromEvent<MouseEvent>(table, "click");
this.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);
this.positionSubscription = this.interactionModel.position.subscribe(event => {
const [currentRow, currentColumn] = event.current;
const [previousRow, previousColumn] = event.previous;
const currentElement = tableAdapter.getCell(currentRow, currentColumn);
Table.setTabIndex(currentElement, 0);
// if the model has just initialized don't focus or reset anything
if (previousRow === -1 || previousColumn === -1) { return; }
// Make the previous cell unfocusable (if it's not the current)
if (previousRow !== currentRow || previousColumn !== currentColumn) {
const previousElement = tableAdapter.getCell(previousRow, previousColumn);
Table.setTabIndex(previousElement, -1);
}
Table.focus(currentElement);
});
// call this after assigning `this.interactionModel` since it depends on it
this.resetTabIndex();
}
disableDataGridInteractions() {
// unsubscribe first so we don't cause the focus to fly around
if (this.positionSubscription) {
this.positionSubscription.unsubscribe();
}
// undo tab indexing (also resets the model)
this.resetTabIndex(0);
// null out the model ref
this.interactionModel = null;
}
onSelectAll() {
this.model.selectAll(true);
this.selectAll.emit(this.model);
}
onDeselectAll() {
this.model.selectAll(false);
this.deselectAll.emit(this.model);
}
onSelectRow(event) {
// check for the existence of the selectedRowIndex property
if (Object.keys(event).includes("selectedRowIndex")) {
if (this.enableSingleSelect) {
this.model.selectAll(false);
}
this.model.selectRow(event.selectedRowIndex, true);
this.selectRow.emit(event);
} else {
this.model.selectRow(event.deselectedRowIndex, false);
this.deselectRow.emit(event);
}
}
onRowClick(index: number) {
this.rowClick.emit(index);
}
updateSelectAllCheckbox() {
const selectedRowsCount = this.model.selectedRowsCount();
if (selectedRowsCount <= 0) {
// reset select all checkbox if nothing selected
this.selectAllCheckbox = false;
this.selectAllCheckboxSomeSelected = false;
} else if (selectedRowsCount < this.model.data.length) {
this.selectAllCheckbox = true;
this.selectAllCheckboxSomeSelected = true;
} else {
this.selectAllCheckbox = true;
this.selectAllCheckboxSomeSelected = false;
}
}
resetTabIndex(newTabIndex = -1) {
// ensure the view is ready for the reset before we preform the actual reset
setTimeout(() => {
// reset all the tabIndexes we can find
const focusElementList = getFocusElementList(this.elementRef.nativeElement, tabbableSelectorIgnoreTabIndex);
if (focusElementList) {
focusElementList.forEach(tabbable => {
tabbable.tabIndex = newTabIndex;
});
}
// reset interaction model positions and tabIndexes
if (this.interactionModel) {
this.interactionModel.resetTabIndexes(newTabIndex);
}
});
}
columnResizeStart(event, column) {
this.columnResizeWidth = parseInt(column.style.width, 10);
this.columnResizeMouseX = event.clientX;
event.preventDefault();
this.mouseMoveSubscription = fromEvent(document.body, "mousemove").subscribe(event => {
this.columnResizeProgress(event, column);
});
this.mouseUpSubscription = fromEvent(document.body, "mouseup").subscribe(event => {
this.columnResizeEnd(event, column);
});
}
columnResizeProgress(event, column) {
const move = event.clientX - this.columnResizeMouseX;
column.style.width = `${this.columnResizeWidth + move}px`;
}
columnResizeEnd(event, column) {
this.mouseMoveSubscription.unsubscribe();
this.mouseUpSubscription.unsubscribe();
}
/**
* Triggered when the user scrolls on the `<tbody>` element.
* Emits the `scrollLoad` event.
*/
onScroll(event) {
const distanceFromBottom = event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop;
if (distanceFromBottom <= this.scrollLoadDistance) {
this.scrollLoad.emit(this.model);
} else {
this.model.isEnd = false;
}
}
columnDragStart(event, columnIndex) {
this.isColumnDragging = true;
this.columnDraggedHoverIndex = columnIndex;
event.dataTransfer.setData("columnIndex", JSON.stringify(columnIndex));
}
columnDragEnd(event, columnIndex) {
this.isColumnDragging = false;
this.columnDraggedHoverIndex = -1;
}
columnDragEnter(event, position, columnIndex) {
this.columnDraggedPosition = position;
this.columnDraggedHoverIndex = columnIndex;
}
columnDragLeave(event, position, columnIndex) {
this.columnDraggedPosition = "";
}
columnDragover(event, position, columnIndex) {
this.columnDraggedHoverIndex = columnIndex;
this.columnDraggedPosition = position;
// needed to tell browser to allow dropping
event.preventDefault();
}
columnDrop(event, position, columnIndex) {
this.isColumnDragging = false;
this.columnDraggedHoverIndex = -1;
this.columnDraggedPosition = "";
this.model.moveColumn(
parseInt(event.dataTransfer.getData("columnIndex"), 10),
columnIndex + (position === "right" ? 1 : 0)
);
}
doSort(index: number) {
if (this.sort.observers.length === 0) {
// no sort provided so do the simple sort
this.model.cycleSortState(index);
this.model.sort(index);
}
this.sort.emit(index);
}
/**
* Triggered when the user scrolls on the `<tbody>` element.
* Emits the `scrollLoad` event.
*/
scrollToTop(event) {
event.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;
this.model.isEnd = false;
}
getSelectionLabelValue(row: TableItem[]) {
if (!this.selectionLabelColumn) {
return { value: this.i18n.get().TABLE.ROW };
}
return { value: row[this.selectionLabelColumn].data };
}
getExpandButtonAriaLabel() {
return this._expandButtonAriaLabel.subject;
}
getSortDescendingLabel() {
return this._sortDescendingLabel.subject;
}
getSortAscendingLabel() {
return this._sortAscendingLabel.subject;
}
getCheckboxHeaderLabel() {
return this._checkboxHeaderLabel.subject;
}
getCheckboxRowLabel() {
return this._checkboxRowLabel.subject;
}
getEndOfDataText() {
return this._endOfDataText.subject;
}
getScrollTopText() {
return this._scrollTopText.subject;
}
getFilterTitle() {
return this._filterTitle.subject;
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="styleData">
<pre class="line-numbers"><code class="language-scss">
:host {
display: block;
}
</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><table cdsTable [sortable]="sortable" [noBorder]="noBorder" [ngClass]="{\'cds--data-table--sticky-header\': stickyHeader}" [size]="size" [striped]="striped" [skeleton]="skeleton" [attr.aria-labelledby]="ariaLabelledby" [attr.aria-describedby]="ariaDescribedby"> <thead cdsTableHead [sortable]="sortable" (deselectAll)="onDeselectAll()" (selectAll)="onSelectAll()" (expandAllRows)="model.expandAllRows(true)" (collapseAllRows)="model.expandAllRows(false)" (sort)="doSort($event)" [checkboxHeaderLabel]="getCheckboxHeaderLabel()" [filterTitle]="getFilterTitle()" [model]="model" [selectAllCheckbox]="selectAllCheckbox" [selectAllCheckboxSomeSelected]="selectAllCheckboxSomeSelected" [showSelectionColumn]="showSelectionColumn" [enableSingleSelect]="enableSingleSelect" [showExpandAllToggle]="showExpandAllToggle" [skeleton]="skeleton" [sortAscendingLabel]="sortAscendingLabel" [sortDescendingLabel]="sortDescendingLabel" [stickyHeader]="stickyHeader"> </thead> <tbody cdsTableBody (deselectRow)="onSelectRow($event)" (scroll)="onScroll($event)" (selectRow)="onSelectRow($event)" [checkboxRowLabel]="getCheckboxRowLabel()" [enableSingleSelect]="enableSingleSelect" (rowClick)="onRowClick($event)" [expandButtonAriaLabel]="expandButtonAriaLabel" [model]="model" [size]="size" [ngStyle]="{\'overflow-y\': \'scroll\'}" [selectionLabelColumn]="selectionLabelColumn" [showSelectionColumn]="showSelectionColumn" [skeleton]="skeleton" *ngIf="!noData; else noDataTemplate"> </tbody> <ng-template #noDataTemplate><ng-content></ng-content></ng-template> <tfoot> <ng-template [ngTemplateOutlet]="footerTemplate"> </ng-template> <tr *ngIf="this.model.isLoading"> <td class="table_loading-indicator"> <div class="cds--loading cds--loading--small"> <svg class="cds--loading__svg" viewBox="-75 -75 150 150"> <circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" /> </svg> </div> </td> </tr> <tr *ngIf="this.model.isEnd"> <td class="table_end-indicator"> <h5>{{getEndOfDataText() | async}}</h5> <button (click)="scrollToTop($event)" class="btn--secondary-sm"> {{getScrollTopText() | async}} </button> </td> </tr> </tfoot></table></div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ComboButtonComponent', 'selector': 'cds-combo-button'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-menu, cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-menu-group, cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-menu-item, cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'MenuButtonComponent', 'selector': 'cds-menu-button'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TagOperationalComponent', 'selector': 'cds-tag-operational, ibm-tag-operational'},{'name': 'TagSelectableComponent', 'selector': 'cds-tag-selectable, ibm-tag-selectable'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ClickableTileIconDirective', 'selector': '[cdsClickableTileIcon], [ibmClickableTileIcon]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'LinkIconDirective', 'selector': '[ibmLinkIcon], [cdsLinkIcon]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TagIconDirective', 'selector': '[cdsTagIcon], [ibmTagIcon]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
var ACTUAL_COMPONENT = {'name': 'Table'};
</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 = 'Table.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>