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