carbon-components-angular
Version:
Next generation components
3,867 lines • 207 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">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<nav>
<ul class="list">
<li class="title">
<a href="../index.html">carbon-components-angular documentation</a>
</li>
<li class="divider"></li>
<li class="chapter">
<a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="../overview.html"
href="../overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="../changelog.html"
>
<span class="fa fa-file-text-o"></span>CHANGELOG
</a>
</li>
<li class="link">
<a href="../license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#xs-modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="xs-modules-links"
>
<li class="link">
<a href="../modules/AccordionModule.html" >AccordionModule</a>
</li>
<li class="link">
<a href="../modules/BannerModule.html" >BannerModule</a>
</li>
<li class="link">
<a href="../modules/ButtonModule.html" >ButtonModule</a>
</li>
<li class="link">
<a href="../modules/CalendarModule.html" >CalendarModule</a>
</li>
<li class="link">
<a href="../modules/CheckboxModule.html" >CheckboxModule</a>
</li>
<li class="link">
<a href="../modules/CodeSnippetModule.html" >CodeSnippetModule</a>
</li>
<li class="link">
<a href="../modules/ComboBoxModule.html" >ComboBoxModule</a>
</li>
<li class="link">
<a href="../modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
</li>
<li class="link">
<a href="../modules/DialogModule.html" >DialogModule</a>
</li>
<li class="link">
<a href="../modules/DropdownModule.html" >DropdownModule</a>
</li>
<li class="link">
<a href="../modules/I18nModule.html" >I18nModule</a>
</li>
<li class="link">
<a href="../modules/IconModule.html" >IconModule</a>
</li>
<li class="link">
<a href="../modules/InputModule.html" >InputModule</a>
</li>
<li class="link">
<a href="../modules/LinkModule.html" >LinkModule</a>
</li>
<li class="link">
<a href="../modules/ListGroupModule.html" >ListGroupModule</a>
</li>
<li class="link">
<a href="../modules/LoadingModule.html" >LoadingModule</a>
</li>
<li class="link">
<a href="../modules/ModalModule.html" >ModalModule</a>
</li>
<li class="link">
<a href="../modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="../modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="../modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="../modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="../modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="../modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="../modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="../modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="../modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="../modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="../modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="../modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="../modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-components-links"
>
<li class="link">
<a href="../components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="../components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="../components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="../components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="../components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="../components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="../components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="../components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="../components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="../components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="../components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="../components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="../components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="../components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="../components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="../components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="../components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="../components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="../components/Label.html" >Label</a>
</li>
<li class="link">
<a href="../components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="../components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="../components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="../components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="../components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="../components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="../components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="../components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="../components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="../components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="../components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="../components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="../components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="../components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="../components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="../components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="../components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="../components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="../components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="../components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="../components/Select.html" >Select</a>
</li>
<li class="link">
<a href="../components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="../components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="../components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="../components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="../components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="../components/Table.html" >Table</a>
</li>
<li class="link">
<a href="../components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="../components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="../components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="../components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="../components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-directives-links"
>
<li class="link">
<a href="../directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="../directives/ContentSwitcherOption.html" >ContentSwitcherOption</a>
</li>
<li class="link">
<a href="../directives/DialogDirective.html" >DialogDirective</a>
</li>
<li class="link">
<a href="../directives/EllipsisTooltip.html" >EllipsisTooltip</a>
</li>
<li class="link">
<a href="../directives/Link.html" >Link</a>
</li>
<li class="link">
<a href="../directives/OptGroup.html" >OptGroup</a>
</li>
<li class="link">
<a href="../directives/Option.html" >Option</a>
</li>
<li class="link">
<a href="../directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
</li>
<li class="link">
<a href="../directives/ScrollableList.html" >ScrollableList</a>
</li>
<li class="link">
<a href="../directives/TextArea.html" >TextArea</a>
</li>
<li class="link">
<a href="../directives/TextInput.html" >TextInput</a>
</li>
<li class="link">
<a href="../directives/TooltipDirective.html" >TooltipDirective</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-classes-links"
>
<li class="link">
<a href="../classes/AbstractDropdownView.html" >AbstractDropdownView</a>
</li>
<li class="link">
<a href="../classes/BaseModal.html" >BaseModal</a>
</li>
<li class="link">
<a href="../classes/CheckboxChange.html" >CheckboxChange</a>
</li>
<li class="link">
<a href="../classes/CustomHeaderItem.html" >CustomHeaderItem</a>
</li>
<li class="link">
<a href="../classes/DateTimeModel.html" >DateTimeModel</a>
</li>
<li class="link">
<a href="../classes/ModalContainer.html" >ModalContainer</a>
</li>
<li class="link">
<a href="../classes/PaginationModel.html" >PaginationModel</a>
</li>
<li class="link">
<a href="../classes/RadioChange.html" >RadioChange</a>
</li>
<li class="link">
<a href="../classes/SampleBase.html" >SampleBase</a>
</li>
<li class="link">
<a href="../classes/SwitchChange.html" >SwitchChange</a>
</li>
<li class="link">
<a href="../classes/TableHeaderItem.html" >TableHeaderItem</a>
</li>
<li class="link">
<a href="../classes/TableItem.html" >TableItem</a>
</li>
<li class="link">
<a href="../classes/TableModel.html" data-type="entity-link" class="active" >TableModel</a>
</li>
<li class="link">
<a href="../classes/ToggleChange.html" >ToggleChange</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-injectables-links"
>
<li class="link">
<a href="../injectables/BannerService.html" >BannerService</a>
</li>
<li class="link">
<a href="../injectables/DialogService.html" >DialogService</a>
</li>
<li class="link">
<a href="../injectables/I18n.html" >I18n</a>
</li>
<li class="link">
<a href="../injectables/IconService.html" >IconService</a>
</li>
<li class="link">
<a href="../injectables/ModalService.html" >ModalService</a>
</li>
<li class="link">
<a href="../injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
</li>
<li class="link">
<a href="../injectables/NotificationService.html" >NotificationService</a>
</li>
<li class="link">
<a href="../injectables/PlaceholderService.html" >PlaceholderService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-interfaces-links"
>
<li class="link">
<a href="../interfaces/AbsolutePosition.html" >AbsolutePosition</a>
</li>
<li class="link">
<a href="../interfaces/AlertModalData.html" >AlertModalData</a>
</li>
<li class="link">
<a href="../interfaces/BannerContent.html" >BannerContent</a>
</li>
<li class="link">
<a href="../interfaces/DialogConfig.html" >DialogConfig</a>
</li>
<li class="link">
<a href="../interfaces/ListItem.html" >ListItem</a>
</li>
<li class="link">
<a href="../interfaces/ModalButton.html" >ModalButton</a>
</li>
<li class="link">
<a href="../interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="../interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="../interfaces/SampleInterface.html" >SampleInterface</a>
</li>
<li class="link">
<a href="../interfaces/SizeMap.html" >SizeMap</a>
</li>
<li class="link">
<a href="../interfaces/ToastContent.html" >ToastContent</a>
</li>
<li class="link">
<a href="../interfaces/ToastContent.html" >ToastContent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-miscellaneous-links"
>
<li class="link">
<a href="../miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
</li>
<li class="link">
<a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="../miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
</li>
<li class="link">
<a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
<li class="divider"></li>
<li class="copyright">
Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
<img src="..//images/compodoc-vectorise.svg" class="img-responsive">
</a>
</li>
</ul>
</nav>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<nav>
<ul class="list">
<li class="title">
<a href="../index.html">carbon-components-angular documentation</a>
</li>
<li class="divider"></li>
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<li class="chapter">
<a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="../overview.html"
href="../overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="../changelog.html"
>
<span class="fa fa-file-text-o"></span>CHANGELOG
</a>
</li>
<li class="link">
<a href="../license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="modules-links"
>
<li class="link">
<a href="../modules/AccordionModule.html" >AccordionModule</a>
</li>
<li class="link">
<a href="../modules/BannerModule.html" >BannerModule</a>
</li>
<li class="link">
<a href="../modules/ButtonModule.html" >ButtonModule</a>
</li>
<li class="link">
<a href="../modules/CalendarModule.html" >CalendarModule</a>
</li>
<li class="link">
<a href="../modules/CheckboxModule.html" >CheckboxModule</a>
</li>
<li class="link">
<a href="../modules/CodeSnippetModule.html" >CodeSnippetModule</a>
</li>
<li class="link">
<a href="../modules/ComboBoxModule.html" >ComboBoxModule</a>
</li>
<li class="link">
<a href="../modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
</li>
<li class="link">
<a href="../modules/DialogModule.html" >DialogModule</a>
</li>
<li class="link">
<a href="../modules/DropdownModule.html" >DropdownModule</a>
</li>
<li class="link">
<a href="../modules/I18nModule.html" >I18nModule</a>
</li>
<li class="link">
<a href="../modules/IconModule.html" >IconModule</a>
</li>
<li class="link">
<a href="../modules/InputModule.html" >InputModule</a>
</li>
<li class="link">
<a href="../modules/LinkModule.html" >LinkModule</a>
</li>
<li class="link">
<a href="../modules/ListGroupModule.html" >ListGroupModule</a>
</li>
<li class="link">
<a href="../modules/LoadingModule.html" >LoadingModule</a>
</li>
<li class="link">
<a href="../modules/ModalModule.html" >ModalModule</a>
</li>
<li class="link">
<a href="../modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="../modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="../modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="../modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="../modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="../modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="../modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="../modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="../modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="../modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="../modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="../modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="../modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="components-links"
>
<li class="link">
<a href="../components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="../components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="../components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="../components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="../components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="../components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="../components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="../components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="../components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="../components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="../components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="../components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="../components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="../components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="../components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="../components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="../components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="../components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="../components/Label.html" >Label</a>
</li>
<li class="link">
<a href="../components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="../components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="../components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="../components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="../components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="../components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="../components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="../components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="../components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="../components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="../components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="../components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="../components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="../components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="../components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="../components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="../components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="../components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="../components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="../components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="../components/Select.html" >Select</a>
</li>
<li class="link">
<a href="../components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="../components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="../components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="../components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="../components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="../components/Table.html" >Table</a>
</li>
<li class="link">
<a href="../components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="../components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="../components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="../components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="../components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="directives-links"
>
<li class="link">
<a href="../directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="../directives/ContentSwitcherOption.html" >ContentSwitcherOption</a>
</li>
<li class="link">
<a href="../directives/DialogDirective.html" >DialogDirective</a>
</li>
<li class="link">
<a href="../directives/EllipsisTooltip.html" >EllipsisTooltip</a>
</li>
<li class="link">
<a href="../directives/Link.html" >Link</a>
</li>
<li class="link">
<a href="../directives/OptGroup.html" >OptGroup</a>
</li>
<li class="link">
<a href="../directives/Option.html" >Option</a>
</li>
<li class="link">
<a href="../directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
</li>
<li class="link">
<a href="../directives/ScrollableList.html" >ScrollableList</a>
</li>
<li class="link">
<a href="../directives/TextArea.html" >TextArea</a>
</li>
<li class="link">
<a href="../directives/TextInput.html" >TextInput</a>
</li>
<li class="link">
<a href="../directives/TooltipDirective.html" >TooltipDirective</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="classes-links"
>
<li class="link">
<a href="../classes/AbstractDropdownView.html" >AbstractDropdownView</a>
</li>
<li class="link">
<a href="../classes/BaseModal.html" >BaseModal</a>
</li>
<li class="link">
<a href="../classes/CheckboxChange.html" >CheckboxChange</a>
</li>
<li class="link">
<a href="../classes/CustomHeaderItem.html" >CustomHeaderItem</a>
</li>
<li class="link">
<a href="../classes/DateTimeModel.html" >DateTimeModel</a>
</li>
<li class="link">
<a href="../classes/ModalContainer.html" >ModalContainer</a>
</li>
<li class="link">
<a href="../classes/PaginationModel.html" >PaginationModel</a>
</li>
<li class="link">
<a href="../classes/RadioChange.html" >RadioChange</a>
</li>
<li class="link">
<a href="../classes/SampleBase.html" >SampleBase</a>
</li>
<li class="link">
<a href="../classes/SwitchChange.html" >SwitchChange</a>
</li>
<li class="link">
<a href="../classes/TableHeaderItem.html" >TableHeaderItem</a>
</li>
<li class="link">
<a href="../classes/TableItem.html" >TableItem</a>
</li>
<li class="link">
<a href="../classes/TableModel.html" data-type="entity-link" class="active" >TableModel</a>
</li>
<li class="link">
<a href="../classes/ToggleChange.html" >ToggleChange</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="injectables-links"
>
<li class="link">
<a href="../injectables/BannerService.html" >BannerService</a>
</li>
<li class="link">
<a href="../injectables/DialogService.html" >DialogService</a>
</li>
<li class="link">
<a href="../injectables/I18n.html" >I18n</a>
</li>
<li class="link">
<a href="../injectables/IconService.html" >IconService</a>
</li>
<li class="link">
<a href="../injectables/ModalService.html" >ModalService</a>
</li>
<li class="link">
<a href="../injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
</li>
<li class="link">
<a href="../injectables/NotificationService.html" >NotificationService</a>
</li>
<li class="link">
<a href="../injectables/PlaceholderService.html" >PlaceholderService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="interfaces-links"
>
<li class="link">
<a href="../interfaces/AbsolutePosition.html" >AbsolutePosition</a>
</li>
<li class="link">
<a href="../interfaces/AlertModalData.html" >AlertModalData</a>
</li>
<li class="link">
<a href="../interfaces/BannerContent.html" >BannerContent</a>
</li>
<li class="link">
<a href="../interfaces/DialogConfig.html" >DialogConfig</a>
</li>
<li class="link">
<a href="../interfaces/ListItem.html" >ListItem</a>
</li>
<li class="link">
<a href="../interfaces/ModalButton.html" >ModalButton</a>
</li>
<li class="link">
<a href="../interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="../interfaces/NotificationContent.html" >NotificationContent</a>
</li>
<li class="link">
<a href="../interfaces/SampleInterface.html" >SampleInterface</a>
</li>
<li class="link">
<a href="../interfaces/SizeMap.html" >SizeMap</a>
</li>
<li class="link">
<a href="../interfaces/ToastContent.html" >ToastContent</a>
</li>
<li class="link">
<a href="../interfaces/ToastContent.html" >ToastContent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="miscellaneous-links"
>
<li class="link">
<a href="../miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
</li>
<li class="link">
<a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="../miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
</li>
<li class="link">
<a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
<li class="divider"></li>
<li class="copyright">
Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
<img src="..//images/compodoc-vectorise.svg" class="img-responsive">
</a>
</li>
</ul>
</nav>
</div>
<div class="content class">
<div class="content-data">
<ol class="breadcrumb">
<li>Classes</li>
<li>TableModel</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li>
<a href="#source" role="tab" id="source-tab" data-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>Implements</h3>
</p>
<p class="comment">
<code><a href="../classes/PaginationModel.html" target="_self" >PaginationModel</a></code>
</p>
<section>
<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>
<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="#rowsContext">rowsContext</a>
</li>
<li>
<a href="#rowsExpanded">rowsExpanded</a>
</li>
<li>
<a href="#rowsExpandedChange">rowsExpandedChange</a>
</li>
<li>
<a href="#rowsSelected">rowsSelected</a>
</li>
<li>
<a href="#rowsSelectedChange">rowsSelectedChange</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="#deleteColumn">deleteColumn</a>
</li>
<li>
<a href="#deleteRow">deleteRow</a>
</li>
<li>
<a href="#expandedRowsCount">expandedRowsCount</a>
</li>
<li>
<a href="#expandRow">expandRow</a>
</li>
<li>
<a href="#hasExpandableRows">hasExpandableRows</a>
</li>
<li>
<a href="#isRowExpandable">isRowExpandable</a>
</li>
<li>
<a href="#isRowFiltered">isRowFiltered</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="#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>
<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"><b> addColumn</b><a href="#addColumn"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>addColumn(column?: <a href="../classes/TableItem.html">Array<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="380" class="link-to-prism">src/table/table-model.class.ts:380</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>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>column</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >Array<TableItem></a></code>
</td>
<td>
true
</td>
<td></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>
true
</td>
<td></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>
<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"><b> addRow</b><a href="#addRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>addRow(row?: <a href="../classes/TableItem.html">Array<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="246" class="link-to-prism">src/table/table-model.class.ts:246</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>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>row</td>
<td>
<code><a href="../classes/TableItem.html" target="_self" >Array<TableItem></a></code>
</td>
<td>
true
</td>
<td></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>
true
</td>
<td></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>
<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"><b> column</b><a href="#column"><span class="fa fa-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="_blank">number</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="351" class="link-to-prism">src/table/table-model.class.ts:351</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns <code>index</code>th column of the 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>
<td>Description</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../classes/TableItem.html" target="_self" >Array<TableItem></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="deleteColumn"></a>
<span class="name"><b> deleteColumn</b><a href="#deleteColumn"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>deleteColumn(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="442" class="link-to-prism">src/table/table-model.class.ts:442</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Deletes <code>index</code>th column.</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>
<td>Description</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>
</td>
<td></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>
<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="deleteRow"></a>
<span class="name"><b> deleteRow</b><a href="#deleteRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>deleteRow(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="324" class="link-to-prism">src/table/table-model.class.ts:324</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Deletes <code>index</code>th row.</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>
<td>Description</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>
</td>
<td></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>
<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="expandedRowsCount"></a>
<span class="name"><b> expandedRowsCount</b><a href="#expandedRowsCount"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>expandedRowsCount()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/table/table-model.class.ts:205</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns how many rows is currently expanded</p>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="expandRow"></a>
<span class="name"><b> expandRow</b><a href="#expandRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>expandRow(index: , value: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="554" class="link-to-prism">src/table/table-model.class.ts:554</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Expands/Collapses <code>index</code>th row based on value</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>
</td>
<td>
</td>
<td></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>
<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="hasExpandableRows"></a>
<span class="name"><b> hasExpandableRows</b><a href="#hasExpandableRows"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>hasExpandableRows()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="334" class="link-to-prism">src/table/table-model.class.ts:334</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="isRowExpandable"></a>
<span class="name"><b> isRowExpandable</b><a href="#isRowExpandable"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isRowExpandable(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="338" class="link-to-prism">src/table/table-model.class.ts:338</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>
<td>Description</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>
</td>
<td></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" >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="isRowFiltered"></a>
<span class="name"><b> isRowFiltered</b><a href="#isRowFiltered"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isRowFiltered(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="532" class="link-to-prism">src/table/table-model.class.ts:532</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Checks if row is filtered out.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</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>
</td>
<td></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" >any</a></code>
</div>
<div class="io-description">
<p>true if any of the filters in header filters out the <code>index</code>th row</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="moveColumn"></a>
<span class="name"><b> moveColumn</b><a href="#moveColumn"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>moveColumn(indexFrom: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, indexTo: <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="456" class="link-to-prism">src/table/table-model.class.ts:456</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>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>indexFrom</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>
</td>
<td></td>
</tr>
<tr>
<td>indexTo</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>
</td>
<td></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>
<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="popRowStateFromModelData"></a>
<span class="name"><b> popRowStateFromModelData</b><a href="#popRowStateFromModelData"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>popRowStateFromModelData()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="517" class="link-to-prism">src/table/table-model.class.ts:517</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Restores <code>rowsSelected</code> from data pushed by <code>pushRowSelectionToModelData()</code></p>
<p>Call after sorting data (if you previously pushed to maintain selection order)
to make everything right with the world again.</p>
</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="pushRowStateToModelData"></a>
<span class="name"><b> pushRowStateToModelData</b><a href="#pushRowStateToModelData"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>pushRowStateToModelData()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="493" class="link-to-prism">src/table/table-model.class.ts:493</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Appends <code>rowsSelected</code> and <code>rowsExpanded</code> info to model data.</p>
<p>When sorting rows, do this first so information about row selection
gets sorted with the other row info.</p>
<p>Call <code>popRowSelectionFromModelData()</code> after sorting to make everything
right with the world again.</p>
</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="realColumnIndex"></a>
<span class="name"><b><span class="modifier">Protected</span> realColumnIndex</b><a href="#realColumnIndex"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span>
<code>realColumnIndex(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="583" class="link-to-prism">src/table/table-model.class.ts:583</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Gets the true index of a column based on it's relative position.
Like in Python, positive numbers start from the top and
negative numbers start from the bottom.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="realIndex"></a>
<span class="name"><b><span class="modifier">Protected</span> realIndex</b><a href="#realIndex"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span>
<code>realIndex(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, length: <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="597" class="link-to-prism">src/table/table-model.class.ts:597</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Generic function to calculate the real index of something.
Used by <code>realRowIndex()</code> and <code>realColumnIndex()</code></p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</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>
</td>
<td></td>
</tr>
<tr>
<td>length</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="realRowIndex"></a>
<span class="name"><b><span class="modifier">Protected</span> realRowIndex</b><a href="#realRowIndex"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span>
<code>realRowIndex(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="569" class="link-to-prism">src/table/table-model.class.ts:569</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Gets the true index of a row based on it's relative position.
Like in Python, positive numbers start from the top and
negative numbers start from the bottom.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="row"></a>
<span class="name"><b> row</b><a href="#row"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>row(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="226" class="link-to-prism">src/table/table-model.class.ts:226</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns <code>index</code>th row of the 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>
<td>Description</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../classes/TableItem.html" target="_self" >Array<TableItem></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="selectedRowsCount"></a>
<span class="name"><b> selectedRowsCount</b><a href="#selectedRowsCount"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>selectedRowsCount()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/table/table-model.class.ts:187</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns how many rows is currently selected</p>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectRow"></a>
<span class="name"><b> selectRow</b><a href="#selectRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>selectRow(index: , value: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="543" class="link-to-prism">src/table/table-model.class.ts:543</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Select/deselect <code>index</code>th row based on value</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>value</td>
<td>
</td>
<td>
</td>
<td></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>
<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="sort"></a>
<span class="name"><b> sort</b><a href="#sort"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>sort(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="474" class="link-to-prism">src/table/table-model.class.ts:474</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sorts the data currently present in the model based on <code>compare()</code></p>
<p>Direction is set by <code>ascending</code> and <code>descending</code> properties of <code>TableHeaderItem</code>
in <code>index</code>th column.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</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>
</td>
<td><p>The column based on which it's sorting</p>
</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<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"><b><span class="modifier">Protected</span> _data</b><a href="#_data"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span><code>_data: <code><a href="../classes/TableItem.html" target="_self" >Array<Array<TableItem>></a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableItem.html" target="_self" >Array<Array<TableItem>></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/table/table-model.class.ts:179</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"><b><span class="modifier">Protected</span> _totalDataLength</b><a href="#_totalDataLength"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-lock"></span><code>_totalDataLength: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</code>
</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="136" class="link-to-prism">src/table/table-model.class.ts:136</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="currentPage"></a>
<span class="name"><b> currentPage</b><a href="#currentPage"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>currentPage: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</code>
</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="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>Tracks the current page 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="dataChange"></a>
<span class="name"><b> dataChange</b><a href="#dataChange"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>dataChange: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="43" class="link-to-prism">src/table/table-model.class.ts:43</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"><b> header</b><a href="#header"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>header: <code><a href="../classes/TableHeaderItem.html" target="_self" >Array<TableHeaderItem></a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableHeaderItem.html" target="_self" >Array<TableHeaderItem></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/table/table-model.class.ts:95</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"><b> isEnd</b><a href="#isEnd"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isEnd: <code></code>
</code>
</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="119" class="link-to-prism">src/table/table-model.class.ts:119</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"><b> isLoading</b><a href="#isLoading"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isLoading: <code></code>
</code>
</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="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>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"><b> pageLength</b><a href="#pageLength"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>pageLength: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</code>
</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="111" class="link-to-prism">src/table/table-model.class.ts:111</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Length of page 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="rowsContext"></a>
<span class="name"><b> rowsContext</b><a href="#rowsContext"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>rowsContext: <code>Array<string></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Array<string></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/table/table-model.class.ts:87</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"><b> rowsExpanded</b><a href="#rowsExpanded"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>rowsExpanded: <code>Array<boolean></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Array<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="74" class="link-to-prism">src/table/table-model.class.ts:74</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="rowsExpandedChange"></a>
<span class="name"><b> rowsExpandedChange</b><a href="#rowsExpandedChange"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>rowsExpandedChange: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/table/table-model.class.ts:45</a></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"><b> rowsSelected</b><a href="#rowsSelected"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>rowsSelected: <code>Array<boolean></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Array<boolean></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="66" class="link-to-prism">src/table/table-model.class.ts:66</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"><b> rowsSelectedChange</b><a href="#rowsSelectedChange"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>rowsSelectedChange: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/table/table-model.class.ts:44</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="data"></a>
<span class="name"><b>data</b><a href="#data"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>data()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/table/table-model.class.ts:56</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>data(newData: )</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/table/table-model.class.ts:17</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets data of the table.</p>
<p>Make sure all rows are the same length to keep the column count accurate.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>newData</td>
<td>
</td>
<td>
</td>
<td></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="totalDataLength"></a>
<span class="name"><b>totalDataLength</b><a href="#totalDataLength"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>totalDataLength()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/table/table-model.class.ts:158</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>totalDataLength(length: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/table/table-model.class.ts:149</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Manually set data length in case the data in the table doesn't
correctly reflect all the data that table is to disply.</p>
<p>Example: if you have multiple pages of data that table will display
but you're loading one at a time.</p>
<p>Set to <code>null</code> to reset to default behaviour.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>length</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>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers"><code class="language-typescript">import {
EventEmitter
} from "@angular/core";
import { PaginationModel } from "./../pagination/pagination-model.class";
import { TableHeaderItem } from "./table-header-item.class";
import { TableItem } from "./table-item.class";
export class TableModel implements PaginationModel {
/**
* Sets data of the table.
*
* Make sure all rows are the same length to keep the column count accurate.
*
* @memberof TableModel
*/
set data(newData: Array<Array<TableItem>>) {
if (!newData || (Array.isArray(newData) && newData.length === 0) ) {
newData = [[]];
}
this._data = newData;
// init rowsSelected
this.rowsSelected = new Array<boolean>(this._data.length);
this.rowsExpanded = new Array<boolean>(this._data.length);
// init rowsContext
this.rowsContext = new Array<string>(this._data.length);
// only create a fresh header if necessary (header doesn't exist or differs in length)
if (this.header == null || this.header.length !== this._data[0].length) {
let header = new Array<TableHeaderItem>();
for (let i = 0; i < this._data[0].length; i++) {
header.push(new TableHeaderItem());
}
this.header = header;
}
this.dataChange.emit();
}
dataChange = new EventEmitter();
rowsSelectedChange = new EventEmitter();
rowsExpandedChange = new EventEmitter();
/**
* Gets the full data.
*
* You can use it to alter individual `TableItem`s but if you need to change
* table structure, use `addRow()` and/or `addColumn()`
*
* @readonly
* @memberof TableModel
*/
get data() {
return this._data;
}
/**
* Contains information about selection state of rows in the table.
*
* @type {Array<boolean>}
* @memberof TableModel
*/
rowsSelected: Array<boolean>;
/**
* Contains information about expanded state of rows in the table.
*
* @type {Array<boolean>}
* @memberof TableModel
*/
rowsExpanded: Array<boolean>;
/**
* Contains information about the context of the row.
*
* It affects styling of the row to reflect the context.
*
* string can be one of `"success" | "warning" | "info" | "error" | ""` and it's
* empty or undefined by default
*
* @type {Array<string>}
* @memberof TableModel
*/
rowsContext: Array<string>;
/**
* Contains information about the header cells of the table.
*
* @type {Array<TableHeaderItem>}
* @memberof TableModel
*/
header: Array<TableHeaderItem>;
/**
* Tracks the current page of the table.
*
* @type {number}
* @memberof TableModel
*/
currentPage: number;
/**
* Length of page of the table.
*
* @type {number}
* @memberof TableModel
*/
pageLength: number;
/**
* Set to true when there is no more data to load in the table
*
* @type {boolean}
* @memberof TableModel
*/
isEnd = false;
/**
* Set to true when lazy loading to show loading indicator
*
* @type {boolean}
* @memberof TableModel
*/
isLoading = false;
/**
* Absolute total number of rows of the table.
*
* @protected
* @type {number}
* @memberof TableModel
*/
protected _totalDataLength: number;
/**
* Manually set data length in case the data in the table doesn't
* correctly reflect all the data that table is to disply.
*
* Example: if you have multiple pages of data that table will display
* but you're loading one at a time.
*
* Set to `null` to reset to default behaviour.
*
* @memberof TableModel
*/
set totalDataLength(length: number) {
this._totalDataLength = length;
}
/**
* Total length of data that table has access to, or the amount manually set
*
* @memberof TableModel
*/
get totalDataLength() {
// if manually set data length
if (this._totalDataLength && this._totalDataLength >= 0) {
return this._totalDataLength;
}
// if empty dataset
if (this.data && this.data.length === 1 && this.data[0].length === 0) {
return 0;
}
return this.data.length;
}
/**
* Used in `data`
*
* @protected
* @type {Array<Array<TableItem>>}
* @memberof TableModel
*/
protected _data: Array<Array<TableItem>> = [[]];
/**
* Returns how many rows is currently selected
*
* @returns {number}
* @memberof TableModel
*/
selectedRowsCount(): number {
let count = 0;
if (this.rowsSelected) {
this.rowsSelected.forEach(rowSelected => {
if (rowSelected) {
count++;
}
});
}
return count;
}
/**
* Returns how many rows is currently expanded
*
* @returns {number}
* @memberof TableModel
*/
expandedRowsCount(): number {
let count = 0;
if (this.rowsExpanded) {
this.rowsExpanded.forEach(rowExpanded => {
if (rowExpanded) {
count++;
}
});
}
return count;
}
/**
* Returns `index`th row of the table.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {number} index
* @returns {Array<TableItem>}
* @memberof TableModel
*/
row(index: number): Array<TableItem> {
return this.data[this.realRowIndex(index)];
}
/**
* Adds a row to the `index`th row or appends to table if index not provided.
*
* If row is shorter than other rows or not provided, it will be padded with
* empty `TableItem` elements.
*
* If row is longer than other rows, others will be extended to match so no data is lost.
*
* If called on an empty table with no parameters, it creates a 1x1 table.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {Array<TableItem>} row
* @param {number} [index]
* @memberof TableModel
*/
addRow(row?: Array<TableItem>, index?: number) {
// if table empty create table with row
if (!this.data || this.data.length === 0 || this.data[0].length === 0) {
let newData = new Array<Array<TableItem>>();
newData.push(row ? row : [new TableItem()]); // row or one empty one column row
this.data = newData;
return;
}
let realRow = row;
const columnCount = this.data[0].length;
if (row == null) {
realRow = new Array<TableItem>();
for (let i = 0; i < columnCount; i++) {
realRow.push(new TableItem());
}
}
if (realRow.length < columnCount) {
// extend the length of realRow
const difference = columnCount - realRow.length;
for (let i = 0; i < difference; i++) {
realRow.push(new TableItem());
}
} else if (realRow.length > columnCount) {
// extend the length of header
let difference = realRow.length - this.header.length;
for (let j = 0; j < difference; j++) {
this.header.push(new TableHeaderItem());
}
// extend the length of every other row
for (let i = 0; i < this.data.length; i++) {
let currentRow = this.data[i];
difference = realRow.length - currentRow.length;
for (let j = 0; j < difference; j++) {
currentRow.push(new TableItem());
}
}
}
if (index == null) {
this.data.push(realRow);
// update rowsSelected property for length
this.rowsSelected.push(false);
// update rowsExpanded property for length
this.rowsExpanded.push(false);
// update rowsContext property for length
this.rowsContext.push(undefined);
} else {
const ri = this.realRowIndex(index);
this.data.splice(ri, 0, realRow);
// update rowsSelected property for length
this.rowsSelected.splice(ri, 0, false);
// update rowsExpanded property for length
this.rowsExpanded.splice(ri, 0, false);
// update rowsContext property for length
this.rowsContext.splice(ri, 0, undefined);
}
this.dataChange.emit();
}
/**
* Deletes `index`th row.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {number} index
* @memberof TableModel
*/
deleteRow(index: number) {
const rri = this.realRowIndex(index);
this.data.splice(rri, 1);
this.rowsSelected.splice(rri, 1);
this.rowsExpanded.splice(rri, 1);
this.rowsContext.splice(rri, 1);
this.dataChange.emit();
}
hasExpandableRows() {
return this.data.some(data => data.some(d => d.expandedData)); // checking for some in 2D array
}
isRowExpandable(index: number) {
return this.data[index].some(d => d.expandedData);
}
/**
* Returns `index`th column of the table.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {number} index
* @returns {Array<TableItem>}
* @memberof TableModel
*/
column(index: number): Array<TableItem> {
let column = new Array<TableItem>();
const ri = this.realColumnIndex(index);
const rc = this.data.length;
for (let i = 0; i < rc; i++) {
const row = this.data[i];
column.push(row[ri]);
}
return column;
}
/**
* Adds a column to the `index`th column or appends to table if index not provided.
*
* If column is shorter than other columns or not provided, it will be padded with
* empty `TableItem` elements.
*
* If column is longer than other columns, others will be extended to match so no data is lost.
*
* If called on an empty table with no parameters, it creates a 1x1 table.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {Array<TableItem>} column
* @param {number} [index]
* @memberof TableModel
*/
addColumn(column?: Array<TableItem>, index?: number) {
// if table empty create table with row
if (!this.data || this.data.length === 0 || this.data[0].length === 0) {
let newData = new Array<Array<TableItem>>();
if (column == null) {
newData.push([new TableItem()]);
} else {
for (let i = 0; i < column.length; i++) {
let item = column[i];
newData.push([item]);
}
}
this.data = newData;
return;
}
let rc = this.data.length; // row count
let ci = this.realColumnIndex(index);
// append missing rows
for (let i = 0; column != null && i < column.length - rc; i++) {
this.addRow();
}
rc = this.data.length;
if (index == null) {
// append to end
for (let i = 0; i < rc; i++) {
let row = this.data[i];
row.push(column == null || column[i] == null ? new TableItem() : column[i]);
}
// update header if not already set by user
if (this.header.length < this.data[0].length) {
this.header.push(new TableHeaderItem());
}
} else {
if (index >= this.data[0].length) {
// if trying to append
ci++;
}
// insert
for (let i = 0; i < rc; i++) {
let row = this.data[i];
row.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);
}
// update header if not already set by user
if (this.header.length < this.data[0].length) {
this.header.splice(ci, 0, new TableHeaderItem());
}
}
this.dataChange.emit();
}
/**
* Deletes `index`th column.
*
* Negative index starts from the end. -1 being the last element.
*
* @param {number} index
* @memberof TableModel
*/
deleteColumn(index: number) {
const rci = this.realColumnIndex(index);
const rowCount = this.data.length;
for (let i = 0; i < rowCount; i++) {
this.data[i].splice(rci, 1);
}
// update header if not already set by user
if (this.header.length > this.data[0].length) {
this.header.splice(rci, 1);
}
this.dataChange.emit();
}
moveColumn(indexFrom: number, indexTo: number) {
const headerFrom = this.header[indexFrom];
this.addColumn(this.column(indexFrom), indexTo);
this.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));
this.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;
}
/**
* Sorts the data currently present in the model based on `compare()`
*
* Direction is set by `ascending` and `descending` properties of `TableHeaderItem`
* in `index`th column.
*
* @param {number} index The column based on which it's sorting
* @memberof TableModel
*/
sort(index: number) {
this.pushRowStateToModelData();
this.data.sort((a, b) => (this.header[index].descending ? -1 : 1) * this.header[index].compare(a[index], b[index]));
this.popRowStateFromModelData();
this.header.forEach(column => column.sorted = false);
this.header[index].sorted = true;
}
/**
* Appends `rowsSelected` and `rowsExpanded` info to model data.
*
* When sorting rows, do this first so information about row selection
* gets sorted with the other row info.
*
* Call `popRowSelectionFromModelData()` after sorting to make everything
* right with the world again.
*
* @memberof TableModel
*/
pushRowStateToModelData() {
for (let i = 0; i < this.data.length; i++) {
const rowSelectedMark = new TableItem();
rowSelectedMark.data = this.rowsSelected[i];
this.data[i].push(rowSelectedMark);
const rowExpandedMark = new TableItem();
rowExpandedMark.data = this.rowsExpanded[i];
this.data[i].push(rowExpandedMark);
const rowContext = new TableItem();
rowContext.data = this.rowsContext[i];
this.data[i].push(rowContext);
}
}
/**
* Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`
*
* Call after sorting data (if you previously pushed to maintain selection order)
* to make everything right with the world again.
*
* @memberof TableModel
*/
popRowStateFromModelData() {
for (let i = 0; i < this.data.length; i++) {
this.rowsContext[i] = this.data[i].pop().data;
this.rowsExpanded[i] = !!this.data[i].pop().data;
this.rowsSelected[i] = !!this.data[i].pop().data;
}
}
/**
* Checks if row is filtered out.
*
* @param {number} index
* @returns {boolean} true if any of the filters in header filters out the `index`th row
* @memberof TableModel
*/
isRowFiltered(index: number) {
const ind = this.realRowIndex(index);
return this.header.some((item, i) => item.filter(this.row(ind)[i]));
}
/**
* Select/deselect `index`th row based on value
*
* @param index
* @param value
*/
selectRow(index, value = true) {
this.rowsSelected[index] = value;
this.rowsSelectedChange.emit(index);
}
/**
* Expands/Collapses `index`th row based on value
*
* @param index
* @param value
*/
expandRow(index, value = true) {
this.rowsExpanded[index] = value;
this.rowsExpandedChange.emit(index);
}
/**
* Gets the true index of a row based on it's relative position.
* Like in Python, positive numbers start from the top and
* negative numbers start from the bottom.
*
* @protected
* @param {number} index
* @returns {number}
* @memberof TableModel
*/
protected realRowIndex(index: number): number {
return this.realIndex(index, this.data.length);
}
/**
* Gets the true index of a column based on it's relative position.
* Like in Python, positive numbers start from the top and
* negative numbers start from the bottom.
*
* @protected
* @param {number} index
* @returns {number}
* @memberof TableModel
*/
protected realColumnIndex(index: number): number {
return this.realIndex(index, this.data[0].length);
}
/**
* Generic function to calculate the real index of something.
* Used by `realRowIndex()` and `realColumnIndex()`
*
* @protected
* @param {number} index
* @param {number} length
* @returns {number}
* @memberof TableModel
*/
protected realIndex(index: number, length: number): number {
if (index == null) {
return length - 1;
} else if (index >= 0) {
return index >= length ? length - 1 : index;
} else {
return -index >= length ? 0 : length + index;
}
}
}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
<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>var COMPODOC_CURRENT_PAGE_DEPTH = 1;</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/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search_index.js"></script>
</body>
</html>