carbon-components-angular
Version:
Next generation components
1,270 lines (1,145 loc) • 171 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content class">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Classes</li>
<li class="breadcrumb-item" >TableModel</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/table/table-model.class.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>TableModel represents a data model for two-dimensional data. It's used for all things table
(table component, table toolbar, pagination, etc)</p>
<p>TableModel manages its internal data integrity very well if you use the provided helper
functions for modifying rows and columns and assigning header and data in that order.</p>
<p>It also provides direct access to the data so you can read and modify it.
If you change the structure of the data (by directly pushing into the arrays or otherwise),
keep in mind to keep the data structure intact.</p>
<p>Header length and length of every line in the data should be equal.</p>
<p>If they are not consistent, unexpected things will happen.</p>
<p>Use the provided functions when in doubt.</p>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="../classes/PaginationModel.html" target="_self" >PaginationModel</a></code>
</p>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<a href="#_data" >_data</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_totalDataLength" >_totalDataLength</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier">Static</span>
<a href="#COUNT" >COUNT</a>
</li>
<li>
<a href="#currentPage" >currentPage</a>
</li>
<li>
<a href="#dataChange" >dataChange</a>
</li>
<li>
<a href="#header" >header</a>
</li>
<li>
<a href="#isEnd" >isEnd</a>
</li>
<li>
<a href="#isLoading" >isLoading</a>
</li>
<li>
<a href="#pageLength" >pageLength</a>
</li>
<li>
<a href="#rowsClass" >rowsClass</a>
</li>
<li>
<a href="#rowsCollapsedAllChange" >rowsCollapsedAllChange</a>
</li>
<li>
<a href="#rowsContext" >rowsContext</a>
</li>
<li>
<a href="#rowsExpanded" >rowsExpanded</a>
</li>
<li>
<a href="#rowsExpandedAllChange" >rowsExpandedAllChange</a>
</li>
<li>
<a href="#rowsExpandedChange" >rowsExpandedChange</a>
</li>
<li>
<a href="#rowsIndices" >rowsIndices</a>
</li>
<li>
<a href="#rowsSelected" >rowsSelected</a>
</li>
<li>
<a href="#rowsSelectedChange" >rowsSelectedChange</a>
</li>
<li>
<a href="#selectAllChange" >selectAllChange</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#tableModelCount" >tableModelCount</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="#addColumn" >addColumn</a>
</li>
<li>
<a href="#addRow" >addRow</a>
</li>
<li>
<a href="#column" >column</a>
</li>
<li>
<a href="#cycleSortState" >cycleSortState</a>
</li>
<li>
<a href="#deleteAllRows" >deleteAllRows</a>
</li>
<li>
<a href="#deleteColumn" >deleteColumn</a>
</li>
<li>
<a href="#deleteRow" >deleteRow</a>
</li>
<li>
<a href="#expandableRowsCount" >expandableRowsCount</a>
</li>
<li>
<a href="#expandAllRows" >expandAllRows</a>
</li>
<li>
<a href="#expandedRowsCount" >expandedRowsCount</a>
</li>
<li>
<a href="#expandRow" >expandRow</a>
</li>
<li>
<a href="#getHeader" >getHeader</a>
</li>
<li>
<a href="#getHeaderId" >getHeaderId</a>
</li>
<li>
<a href="#getId" >getId</a>
</li>
<li>
<a href="#getRowContext" >getRowContext</a>
</li>
<li>
<a href="#hasExpandableRows" >hasExpandableRows</a>
</li>
<li>
<a href="#isRowDisabled" >isRowDisabled</a>
</li>
<li>
<a href="#isRowExpandable" >isRowExpandable</a>
</li>
<li>
<a href="#isRowExpanded" >isRowExpanded</a>
</li>
<li>
<a href="#isRowFiltered" >isRowFiltered</a>
</li>
<li>
<a href="#isRowSelected" >isRowSelected</a>
</li>
<li>
<a href="#moveColumn" >moveColumn</a>
</li>
<li>
<a href="#popRowStateFromModelData" >popRowStateFromModelData</a>
</li>
<li>
<a href="#pushRowStateToModelData" >pushRowStateToModelData</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#realColumnIndex" >realColumnIndex</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#realIndex" >realIndex</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#realRowIndex" >realRowIndex</a>
</li>
<li>
<a href="#row" >row</a>
</li>
<li>
<a href="#selectAll" >selectAll</a>
</li>
<li>
<a href="#selectedRowsCount" >selectedRowsCount</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>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#data" >data</a>
</li>
<li>
<a href="#totalDataLength" >totalDataLength</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()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/table/table-model.class.ts:194</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_data"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_data</b></span>
<a href="#_data"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableItem.html" target="_self" >TableItem[][]</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="188" class="link-to-prism">src/table/table-model.class.ts:188</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Used in <code>data</code></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_totalDataLength"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_totalDataLength</b></span>
<a href="#_totalDataLength"><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="152" class="link-to-prism">src/table/table-model.class.ts:152</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Absolute total number of rows 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="COUNT"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier">Static</span>
<span ><b>COUNT</b></span>
<a href="#COUNT"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/table/table-model.class.ts:32</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The number of models instantiated, used for (among other things) unique id generation</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="currentPage"></a>
<span class="name">
<span ><b>currentPage</b></span>
<a href="#currentPage"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>1</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/table/table-model.class.ts:132</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Tracks the current page.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataChange"></a>
<span class="name">
<span ><b>dataChange</b></span>
<a href="#dataChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new EventEmitter()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/table/table-model.class.ts:69</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="header"></a>
<span class="name">
<span ><b>header</b></span>
<a href="#header"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableHeaderItem.html" target="_self" >TableHeaderItem[]</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="127" class="link-to-prism">src/table/table-model.class.ts:127</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains information about the header cells 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="isEnd"></a>
<span class="name">
<span ><b>isEnd</b></span>
<a href="#isEnd"><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="142" class="link-to-prism">src/table/table-model.class.ts:142</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to true when there is no more data to load in the table</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isLoading"></a>
<span class="name">
<span ><b>isLoading</b></span>
<a href="#isLoading"><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="147" class="link-to-prism">src/table/table-model.class.ts:147</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to true when lazy loading to show loading indicator</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="pageLength"></a>
<span class="name">
<span ><b>pageLength</b></span>
<a href="#pageLength"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>10</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/table/table-model.class.ts:137</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Length of page.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsClass"></a>
<span class="name">
<span ><b>rowsClass</b></span>
<a href="#rowsClass"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string[]</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="122" class="link-to-prism">src/table/table-model.class.ts:122</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains class name(s) of the row.</p>
<p>It affects styling of the row to reflect the appended class name(s).</p>
<p>It's empty or undefined by default</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsCollapsedAllChange"></a>
<span class="name">
<span ><b>rowsCollapsedAllChange</b></span>
<a href="#rowsCollapsedAllChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new EventEmitter()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="73" class="link-to-prism">src/table/table-model.class.ts:73</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsContext"></a>
<span class="name">
<span ><b>rowsContext</b></span>
<a href="#rowsContext"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string[]</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="113" class="link-to-prism">src/table/table-model.class.ts:113</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains information about the context of the row.</p>
<p>It affects styling of the row to reflect the context.</p>
<p>string can be one of <code>"success" | "warning" | "info" | "error" | ""</code> and it's
empty or undefined by default</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsExpanded"></a>
<span class="name">
<span ><b>rowsExpanded</b></span>
<a href="#rowsExpanded"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>boolean[]</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="98" class="link-to-prism">src/table/table-model.class.ts:98</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains information about expanded state of rows in the table.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsExpandedAllChange"></a>
<span class="name">
<span ><b>rowsExpandedAllChange</b></span>
<a href="#rowsExpandedAllChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new EventEmitter()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/table/table-model.class.ts:72</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsExpandedChange"></a>
<span class="name">
<span ><b>rowsExpandedChange</b></span>
<a href="#rowsExpandedChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new EventEmitter<number>()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/table/table-model.class.ts:71</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsIndices"></a>
<span class="name">
<span ><b>rowsIndices</b></span>
<a href="#rowsIndices"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>number[]</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="103" class="link-to-prism">src/table/table-model.class.ts:103</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains information about initial index of rows in the table</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsSelected"></a>
<span class="name">
<span ><b>rowsSelected</b></span>
<a href="#rowsSelected"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>boolean[]</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="93" class="link-to-prism">src/table/table-model.class.ts:93</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Contains information about selection state of rows in the table.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowsSelectedChange"></a>
<span class="name">
<span ><b>rowsSelectedChange</b></span>
<a href="#rowsSelectedChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new EventEmitter<number>()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="70" class="link-to-prism">src/table/table-model.class.ts:70</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAllChange"></a>
<span class="name">
<span ><b>selectAllChange</b></span>
<a href="#selectAllChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Subject<boolean>()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="78" class="link-to-prism">src/table/table-model.class.ts:78</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Gets emitted when <code>selectAll</code> is called. Emits false if all rows are deselected and true 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="tableModelCount"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>tableModelCount</b></span>
<a href="#tableModelCount"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/table/table-model.class.ts:194</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The number of models instantiated, this is to make sure each table has a different
model count for unique id generation.</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="addColumn"></a>
<span class="name">
<span ><b>addColumn</b></span>
<a href="#addColumn"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>addColumn(column?: <a href="../classes/TableItem.html" target="_self">TableItem[]</a>, 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="484"
class="link-to-prism">src/table/table-model.class.ts:484</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Adds a column to the <code>index</code>th column or appends to table if index not provided.</p>
<p>If column is shorter than other columns or not provided, it will be padded with
empty <code>TableItem</code> elements.</p>
<p>If column is longer than other columns, others will be extended to match so no data is lost.</p>
<p>If called on an empty table with no parameters, it creates a 1x1 table.</p>
<p>Negative index starts from the end. -1 being the last element.</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>column</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >TableItem[]</a></code>
</td>
<td>
Yes
</td>
</tr>
<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>
Yes
</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="addRow"></a>
<span class="name">
<span ><b>addRow</b></span>
<a href="#addRow"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>addRow(row?: <a href="../classes/TableItem.html" target="_self">TableItem[]</a>, 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="310"
class="link-to-prism">src/table/table-model.class.ts:310</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Adds a row to the <code>index</code>th row or appends to table if index not provided.</p>
<p>If row is shorter than other rows or not provided, it will be padded with
empty <code>TableItem</code> elements.</p>
<p>If row is longer than other rows, others will be extended to match so no data is lost.</p>
<p>If called on an empty table with no parameters, it creates a 1x1 table.</p>
<p>Negative index starts from the end. -1 being the last element.</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>row</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >TableItem[]</a></code>
</td>
<td>
Yes
</td>
</tr>
<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>
Yes
</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="column"></a>
<span class="name">
<span ><b>column</b></span>
<a href="#column"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>column(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target=