carbon-components-angular
Version:
Next generation components
4,509 lines • 227 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" data-type="entity-link" class="active" >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" >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" data-type="entity-link" class="active" >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" >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 component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li>Table</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>
<li>
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/table/table.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Build your table with this component by extending things that differ from default.</p>
<p>demo: <a href="https://angular.carbondesignsystem.com/?selectedKind=Table">https://angular.carbondesignsystem.com/?selectedKind=Table</a></p>
<p>Instead of the usual write-your-own-html approach you had with <code><table></code>,
carbon table uses model-view-controller approach.</p>
<p>Here, you create a view (with built-in controller) and provide it a model.
Changes you make to the model are reflected in the view. Provide same model you use
in the table to the <code><ibm-pagination></code> components.
They provide a different view over the same data.</p>
<h2 id="basic-usage">Basic usage</h2>
<pre class="line-numbers"><code class="language-html"><ibm-table [model]="model"></ibm-table></code></pre><pre class="line-numbers"><code class="language-typescript">public model = new TableModel();
this.model.data = [
[new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
[new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
[new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
[new TableItem({data: "csdf"}), new TableItem({data: "twer"})]
];</code></pre><h2 id="customization">Customization</h2>
<p>If you have custom data in your table, you need a way to display it. You can do that
by providing a template to <code>TableItem</code>.</p>
<pre class="line-numbers"><code class="language-html"><ng-template #customTableItemTemplate let-data="data">
<a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
</ng-template></code></pre><pre class="line-numbers"><code class="language-typescript">customTableItemTemplate: TemplateRef<any>;
this.customModel.data = [
[new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
[new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
[new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
[new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
];</code></pre><h3 id="sorting-and-filtering">Sorting and filtering</h3>
<p>In case you need custom sorting and/or filtering you should subclass <code>TableHeaderItem</code>
and override needed functions.</p>
<pre class="line-numbers"><code class="language-typescript">class FilterableHeaderItem extends TableHeaderItem {
// custom filter function
filter(item: TableItem): boolean {
if (typeof item.data === "string" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
item.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
item.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {
return false;
}
return true;
}
set filterCount(n) {}
get filterCount() {
return (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;
}
// used for custom sorting
compare(one: TableItem, two: TableItem) {
const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();
const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();
if (stringOne > stringTwo) {
return 1;
} else if (stringOne < stringTwo) {
return -1;
} else {
return 0;
}
}
}</code></pre><p>See <code>TableHeaderItem</code> class for more information.</p>
<h2 id="no-data-template">No data template</h2>
<p>When table has no data to show, it can show a message you provide it instead.</p>
<pre class="line-numbers"><code class="language-html"><ibm-table [model]="model">No data.</ibm-table></code></pre><p>... will show <code>No data.</code> message, but you can get creative and provide any template you want
to replace table's default <code>tbody</code>.</p>
<h2 id="use-pagination-as-table-footer">Use pagination as table footer</h2>
<pre class="line-numbers"><code class="language-html"><ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination></code></pre><p><code>selectPage()</code> function should fetch the data from backend, create new <code>data</code>, apply it to <code>model.data</code>,
and update <code>model.currentPage</code>.</p>
<p>If the data your server returns is a two dimensional array of objects, it would look something like this:</p>
<pre class="line-numbers"><code class="language-typescript">selectPage(page) {
this.getPage(page).then((data: Array<Array<any>>) => {
// set the data and update page
this.model.data = this.prepareData(data);
this.model.currentPage = page;
});
}
protected prepareData(data: Array<Array<any>>) {
// create new data from the service data
let newData = [];
data.forEach(dataRow => {
let row = [];
dataRow.forEach(dataElement => {
row.push(new TableItem({
data: dataElement,
template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
// your template can handle all the data types so you don't have to conditionally set it
// you can also set different templates for different columns based on index
}));
});
newData.push(row);
});
return newData;
}</code></pre>
</p>
<p class="comment">
<h3>Example</h3>
</p>
<div class="io-description">
</div>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>ibm-table</code></td>
</tr>
</tbody>
</table>
</section>
<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="#_model">_model</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#columnDraggedHoverIndex">columnDraggedHoverIndex</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#columnDraggedPosition">columnDraggedPosition</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#columnResizeMouseX">columnResizeMouseX</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#columnResizeWidth">columnResizeWidth</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#isColumnDragging">isColumnDragging</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#mouseMoveSubscription">mouseMoveSubscription</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#mouseUpSubscription">mouseUpSubscription</a>
</li>
<li>
<a href="#selectAllCheckbox">selectAllCheckbox</a>
</li>
<li>
<a href="#selectAllCheckboxSomeSelected">selectAllCheckboxSomeSelected</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#columnDragEnd">columnDragEnd</a>
</li>
<li>
<a href="#columnDragEnter">columnDragEnter</a>
</li>
<li>
<a href="#columnDragLeave">columnDragLeave</a>
</li>
<li>
<a href="#columnDragover">columnDragover</a>
</li>
<li>
<a href="#columnDragStart">columnDragStart</a>
</li>
<li>
<a href="#columnDrop">columnDrop</a>
</li>
<li>
<a href="#columnResizeEnd">columnResizeEnd</a>
</li>
<li>
<a href="#columnResizeProgress">columnResizeProgress</a>
</li>
<li>
<a href="#columnResizeStart">columnResizeStart</a>
</li>
<li>
<a href="#firstExpandedDataInRow">firstExpandedDataInRow</a>
</li>
<li>
<a href="#firstExpandedTemplateInRow">firstExpandedTemplateInRow</a>
</li>
<li>
<a href="#onRowCheckboxChange">onRowCheckboxChange</a>
</li>
<li>
<a href="#onRowSelect">onRowSelect</a>
</li>
<li>
<a href="#onScroll">onScroll</a>
</li>
<li>
<a href="#onSelectAllCheckboxChange">onSelectAllCheckboxChange</a>
</li>
<li>
<a href="#scrollToTop">scrollToTop</a>
</li>
<li>
<a href="#updateSelectAllCheckbox">updateSelectAllCheckbox</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#columnsDraggable">columnsDraggable</a>
</li>
<li>
<a href="#columnsResizable">columnsResizable</a>
</li>
<li>
<a href="#enableRowSelect">enableRowSelect</a>
</li>
<li>
<a href="#enableSingleSelect">enableSingleSelect</a>
</li>
<li>
<a href="#expandButtonAriaLabel">expandButtonAriaLabel</a>
</li>
<li>
<a href="#model">model</a>
</li>
<li>
<a href="#scrollLoadDistance">scrollLoadDistance</a>
</li>
<li>
<a href="#showSelectionColumn">showSelectionColumn</a>
</li>
<li>
<a href="#size">size</a>
</li>
<li>
<a href="#sortAscendingLabel">sortAscendingLabel</a>
</li>
<li>
<a href="#sortDescendingLabel">sortDescendingLabel</a>
</li>
<li>
<a href="#striped">striped</a>
</li>
<li>
<a href="#translations">translations</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#deselectAll">deselectAll</a>
</li>
<li>
<a href="#deselectRow">deselectRow</a>
</li>
<li>
<a href="#scrollLoad">scrollLoad</a>
</li>
<li>
<a href="#selectAll">selectAll</a>
</li>
<li>
<a href="#selectRow">selectRow</a>
</li>
<li>
<a href="#sort">sort</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#model">model</a>
</li>
<li>
<a href="#enableRowSelect">enableRowSelect</a>
</li>
<li>
<a href="#noData">noData</a>
</li>
<li>
<a href="#scrollbarWidth">scrollbarWidth</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(applicationRef: <a href="https://angular.io/docs/ts/latest/api/api/core/ApplicationRef" target="_blank">ApplicationRef</a>, i18n: <a href="../injectables/I18n.html">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="552" class="link-to-prism">src/table/table.component.ts:552</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates an instance of Table.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>applicationRef</td>
<td>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/ApplicationRef" target="_blank" >ApplicationRef</a></code>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>i18n</td>
<td>
<code><a href="../injectables/I18n.html" target="_self" >I18n</a></code>
</td>
<td>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="columnsDraggable"></a>
<code>columnsDraggable</code>
</td>
<td class="col-md-10">
<div><p>Set to <code>true</code> to enable users to drag and drop columns.</p>
<p>Changing the column order in table changes table model. Be aware of it when you add additional data
to the model.</p>
</div>
<p>
<em>Default value: </em><code>false</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="460" class="link-to-prism">src/table/table.component.ts:460</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="columnsResizable"></a>
<code>columnsResizable</code>
</td>
<td class="col-md-10">
<div><p>Set to <code>true</code> to enable users to resize columns.</p>
<p>Works for columns with width set in pixels.</p>
</div>
<p>
<em>Default value: </em><code>false</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="450" class="link-to-prism">src/table/table.component.ts:450</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="enableRowSelect"></a>
<code>enableRowSelect</code>
</td>
<td class="col-md-10">
<div><p>Controls whether to show the selection checkboxes column or not.</p>
</div>
<p>
<em>Type:</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="410" class="link-to-prism">src/table/table.component.ts:410</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="enableSingleSelect"></a>
<code>enableSingleSelect</code>
</td>
<td class="col-md-10">
<div><p>Controls whether to enable multiple or single row selection.</p>
</div>
<p>
<em>Default value: </em><code>false</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="432" class="link-to-prism">src/table/table.component.ts:432</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="expandButtonAriaLabel"></a>
<code>expandButtonAriaLabel</code>
</td>
<td class="col-md-10">
<p>
<em>Default value: </em><code>Expand row</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="462" class="link-to-prism">src/table/table.component.ts:462</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="model"></a>
<code>model</code>
</td>
<td class="col-md-10">
<div><p><code>TableModel</code> with data the table is to display.</p>
</div>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="387" class="link-to-prism">src/table/table.component.ts:387</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="scrollLoadDistance"></a>
<code>scrollLoadDistance</code>
</td>
<td class="col-md-10">
<div><p>Distance (in px) from the bottom that view has to reach before
<code>scrollLoad</code> event is emitted.</p>
</div>
<p>
<em>Default value: </em><code>0</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/table/table.component.ts:441</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="showSelectionColumn"></a>
<code>showSelectionColumn</code>
</td>
<td class="col-md-10">
<div><p>Controls whether to show the selection checkboxes column or not.</p>
</div>
<p>
<em>Default value: </em><code>true</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="424" class="link-to-prism">src/table/table.component.ts:424</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="size"></a>
<code>size</code>
</td>
<td class="col-md-10">
<div><p>Size of the table rows.</p>
</div>
<p>
<em>Type:</em> <code>"sm" | "md" | "lg"</code>
</p>
<p>
<em>Default value: </em><code>md</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="373" class="link-to-prism">src/table/table.component.ts:373</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="sortAscendingLabel"></a>
<code>sortAscendingLabel</code>
</td>
<td class="col-md-10">
<p>
<em>Default value: </em><code>Sort rows by this header in ascending order</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="464" class="link-to-prism">src/table/table.component.ts:464</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="sortDescendingLabel"></a>
<code>sortDescendingLabel</code>
</td>
<td class="col-md-10">
<p>
<em>Default value: </em><code>Sort rows by this header in descending order</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="463" class="link-to-prism">src/table/table.component.ts:463</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="striped"></a>
<code>striped</code>
</td>
<td class="col-md-10">
<div><p>Set to <code>false</code> to remove table rows (zebra) stripes.</p>
</div>
<p>
<em>Default value: </em><code>true</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="488" class="link-to-prism">src/table/table.component.ts:488</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="translations"></a>
<code>translations</code>
</td>
<td class="col-md-10">
<div><p>Object of all the strings table needs.
Defaults to the <code>TABLE</code> value from the i18n service.</p>
</div>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="378" class="link-to-prism">src/table/table.component.ts:378</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="deselectAll"></a>
<code>deselectAll</code>
</td>
<td class="col-md-10">
<div><p>Emits if all rows are deselected.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="511" class="link-to-prism">src/table/table.component.ts:511</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="deselectRow"></a>
<code>deselectRow</code>
</td>
<td class="col-md-10">
<div><p>Emits if a single row is deselected.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="527" class="link-to-prism">src/table/table.component.ts:527</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="scrollLoad"></a>
<code>scrollLoad</code>
</td>
<td class="col-md-10">
<div><p>Emits when table requires more data to be loaded.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="535" class="link-to-prism">src/table/table.component.ts:535</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="selectAll"></a>
<code>selectAll</code>
</td>
<td class="col-md-10">
<div><p>Emits if all rows are selected.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="503" class="link-to-prism">src/table/table.component.ts:503</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="selectRow"></a>
<code>selectRow</code>
</td>
<td class="col-md-10">
<div><p>Emits if a single row is selected.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="519" class="link-to-prism">src/table/table.component.ts:519</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="sort"></a>
<code>sort</code>
</td>
<td class="col-md-10">
<div><p>Emits an index of the column that wants to be sorted.</p>
</div>
<em><code>$event</code> type:</em> <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="495" class="link-to-prism">src/table/table.component.ts:495</a></div>
</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="columnDragEnd"></a>
<span class="name"><b> columnDragEnd</b><a href="#columnDragEnd"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragEnd(event: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="688" class="link-to-prism">src/table/table.component.ts:688</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnDragEnter"></a>
<span class="name"><b> columnDragEnter</b><a href="#columnDragEnter"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragEnter(event: , position: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="693" class="link-to-prism">src/table/table.component.ts:693</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnDragLeave"></a>
<span class="name"><b> columnDragLeave</b><a href="#columnDragLeave"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragLeave(event: , position: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="698" class="link-to-prism">src/table/table.component.ts:698</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnDragover"></a>
<span class="name"><b> columnDragover</b><a href="#columnDragover"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragover(event: , position: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="702" class="link-to-prism">src/table/table.component.ts:702</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnDragStart"></a>
<span class="name"><b> columnDragStart</b><a href="#columnDragStart"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDragStart(event: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="682" class="link-to-prism">src/table/table.component.ts:682</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnDrop"></a>
<span class="name"><b> columnDrop</b><a href="#columnDrop"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnDrop(event: , position: , columnIndex: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="710" class="link-to-prism">src/table/table.component.ts:710</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>columnIndex</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="columnResizeEnd"></a>
<span class="name"><b> columnResizeEnd</b><a href="#columnResizeEnd"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeEnd(event: , column: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="580" class="link-to-prism">src/table/table.component.ts:580</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>column</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="columnResizeProgress"></a>
<span class="name"><b> columnResizeProgress</b><a href="#columnResizeProgress"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeProgress(event: , column: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="575" class="link-to-prism">src/table/table.component.ts:575</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>column</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="columnResizeStart"></a>
<span class="name"><b> columnResizeStart</b><a href="#columnResizeStart"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>columnResizeStart(event: , column: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="562" class="link-to-prism">src/table/table.component.ts:562</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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>column</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="firstExpandedDataInRow"></a>
<span class="name"><b> firstExpandedDataInRow</b><a href="#firstExpandedDataInRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>firstExpandedDataInRow(row: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="725" class="link-to-prism">src/table/table.component.ts:725</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>row</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" >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="firstExpandedTemplateInRow"></a>
<span class="name"><b> firstExpandedTemplateInRow</b><a href="#firstExpandedTemplateInRow"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>firstExpandedTemplateInRow(row: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="733" class="link-to-prism">src/table/table.component.ts:733</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>row</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" >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="onRowCheckboxChange"></a>
<span class="name"><b> onRowCheckboxChange</b><a href="#onRowCheckboxChange"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onRowCheckboxChange(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="641" class="link-to-prism">src/table/table.component.ts:641</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered when a single row is clicked.
Updates the header checkbox state.
Emits the <code>selectRow</code> or <code>deselectRow</code> event.</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="onRowSelect"></a>
<span class="name"><b> onRowSelect</b><a href="#onRowSelect"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onRowSelect(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="585" class="link-to-prism">src/table/table.component.ts:585</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" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onScroll"></a>
<span class="name"><b> onScroll</b><a href="#onScroll"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onScroll(event: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="672" class="link-to-prism">src/table/table.component.ts:672</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered when the user scrolls on the <code><tbody></code> element.
Emits the <code>scrollLoad</code> event.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</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="onSelectAllCheckboxChange"></a>
<span class="name"><b> onSelectAllCheckboxChange</b><a href="#onSelectAllCheckboxChange"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onSelectAllCheckboxChange()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="613" class="link-to-prism">src/table/table.component.ts:613</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered whenever the header checkbox is clicked.
Updates all the checkboxes in the table view.
Emits the <code>selectAll</code> or <code>deselectAll</code> event.</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="scrollToTop"></a>
<span class="name"><b> scrollToTop</b><a href="#scrollToTop"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>scrollToTop(event: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="747" class="link-to-prism">src/table/table.component.ts:747</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Triggered when the user scrolls on the <code><tbody></code> element.
Emits the <code>scrollLoad</code> event.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</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="updateSelectAllCheckbox"></a>
<span class="name"><b> updateSelectAllCheckbox</b><a href="#updateSelectAllCheckbox"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>updateSelectAllCheckbox()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="594" class="link-to-prism">src/table/table.component.ts:594</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_model"></a>
<span class="name"><b><span class="modifier">Protected</span> _model</b><a href="#_model"><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>_model: <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="543" class="link-to-prism">src/table/table.component.ts:543</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnDraggedHoverIndex"></a>
<span class="name"><b><span class="modifier">Protected</span> columnDraggedHoverIndex</b><a href="#columnDraggedHoverIndex"><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>columnDraggedHoverIndex: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="551" class="link-to-prism">src/table/table.component.ts:551</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnDraggedPosition"></a>
<span class="name"><b><span class="modifier">Protected</span> columnDraggedPosition</b><a href="#columnDraggedPosition"><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>columnDraggedPosition: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="552" class="link-to-prism">src/table/table.component.ts:552</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnResizeMouseX"></a>
<span class="name"><b><span class="modifier">Protected</span> columnResizeMouseX</b><a href="#columnResizeMouseX"><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>columnResizeMouseX: <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="546" class="link-to-prism">src/table/table.component.ts:546</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnResizeWidth"></a>
<span class="name"><b><span class="modifier">Protected</span> columnResizeWidth</b><a href="#columnResizeWidth"><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>columnResizeWidth: <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="545" class="link-to-prism">src/table/table.component.ts:545</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isColumnDragging"></a>
<span class="name"><b><span class="modifier">Protected</span> isColumnDragging</b><a href="#isColumnDragging"><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>isColumnDragging: <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="550" class="link-to-prism">src/table/table.component.ts:550</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mouseMoveSubscription"></a>
<span class="name"><b><span class="modifier">Protected</span> mouseMoveSubscription</b><a href="#mouseMoveSubscription"><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>mouseMoveSubscription: <code>Subscription</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="547" class="link-to-prism">src/table/table.component.ts:547</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mouseUpSubscription"></a>
<span class="name"><b><span class="modifier">Protected</span> mouseUpSubscription</b><a href="#mouseUpSubscription"><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>mouseUpSubscription: <code>Subscription</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Subscription</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="548" class="link-to-prism">src/table/table.component.ts:548</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAllCheckbox"></a>
<span class="name"><b> selectAllCheckbox</b><a href="#selectAllCheckbox"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>selectAllCheckbox: <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="472" class="link-to-prism">src/table/table.component.ts:472</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls if all checkboxes are viewed as selected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectAllCheckboxSomeSelected"></a>
<span class="name"><b> selectAllCheckboxSomeSelected</b><a href="#selectAllCheckboxSomeSelected"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>selectAllCheckboxSomeSelected: <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="480" class="link-to-prism">src/table/table.component.ts:480</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls the indeterminate state of the header checkbox.</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="model"></a>
<span class="name"><b>model</b><a href="#model"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>model()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="398" class="link-to-prism">src/table/table.component.ts:398</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="../classes/TableModel.html" target="_self" >TableModel</a></code>
</div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>model(m: )</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="387" class="link-to-prism">src/table/table.component.ts:387</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>TableModel</code> with data the table is to display.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>m</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="enableRowSelect"></a>
<span class="name"><b>enableRowSelect</b><a href="#enableRowSelect"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>enableRowSelect()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="414" class="link-to-prism">src/table/table.component.ts:414</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>enableRowSelect(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="410" class="link-to-prism">src/table/table.component.ts:410</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Controls whether to show the selection checkboxes column or not.</p>
</div>
<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>value</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
<td>
</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="noData"></a>
<span class="name"><b>noData</b><a href="#noData"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>noData()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="537" class="link-to-prism">src/table/table.component.ts:537</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="scrollbarWidth"></a>
<span class="name"><b>scrollbarWidth</b><a href="#scrollbarWidth"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>scrollbarWidth()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="721" class="link-to-prism">src/table/table.component.ts:721</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers"><code class="language-typescript">import {
Component,
ApplicationRef,
Input,
Output,
EventEmitter
} from "@angular/core";
import { Subscription, fromEvent } from "rxjs";
import { TableModel } from "./table.module";
import { getScrollbarWidth } from "../common/utils";
import { I18n } from "./../i18n/i18n.module";
/**
* Build your table with this component by extending things that differ from default.
*
* demo: [https://angular.carbondesignsystem.com/?selectedKind=Table](https://angular.carbondesignsystem.com/?selectedKind=Table)
*
* Instead of the usual write-your-own-html approach you had with `<table>`,
* carbon table uses model-view-controller approach.
*
* Here, you create a view (with built-in controller) and provide it a model.
* Changes you make to the model are reflected in the view. Provide same model you use
* in the table to the `<ibm-pagination>` components.
* They provide a different view over the same data.
*
* ## Basic usage
*
* ```html
* <ibm-table [model]="model"></ibm-table>
* ```
*
* ```typescript
* public model = new TableModel();
*
* this.model.data = [
* [new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
* [new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
* [new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
* [new TableItem({data: "csdf"}), new TableItem({data: "twer"})]
* ];
* ```
*
* ## Customization
*
* If you have custom data in your table, you need a way to display it. You can do that
* by providing a template to `TableItem`.
*
* ```html
* <ng-template #customTableItemTemplate let-data="data">
* <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
* </ng-template>
* ```
*
* ```typescript
* customTableItemTemplate: TemplateRef<any>;
*
* this.customModel.data = [
* [new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
* [new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
* [new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
* [new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
* ];
* ```
*
* ### Sorting and filtering
*
* In case you need custom sorting and/or filtering you should subclass `TableHeaderItem`
* and override needed functions.
*
* ```typescript
* class FilterableHeaderItem extends TableHeaderItem {
* // custom filter function
* filter(item: TableItem): boolean {
* if (typeof item.data === "string" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
* item.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||
* item.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {
* return false;
* }
* return true;
* }
*
* set filterCount(n) {}
* get filterCount() {
* return (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;
* }
*
* // used for custom sorting
* compare(one: TableItem, two: TableItem) {
* const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();
* const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();
*
* if (stringOne > stringTwo) {
* return 1;
* } else if (stringOne < stringTwo) {
* return -1;
* } else {
* return 0;
* }
* }
* }
* ```
*
* See `TableHeaderItem` class for more information.
*
* ## No data template
*
* When table has no data to show, it can show a message you provide it instead.
*
* ```html
* <ibm-table [model]="model">No data.</ibm-table>
* ```
*
* ... will show `No data.` message, but you can get creative and provide any template you want
* to replace table's default `tbody`.
*
* ## Use pagination as table footer
*
* ```html
* <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
* ```
*
* `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,
* and update `model.currentPage`.
*
* If the data your server returns is a two dimensional array of objects, it would look something like this:
*
* ```typescript
* selectPage(page) {
* this.getPage(page).then((data: Array<Array<any>>) => {
* // set the data and update page
* this.model.data = this.prepareData(data);
* this.model.currentPage = page;
* });
* }
*
* protected prepareData(data: Array<Array<any>>) {
* // create new data from the service data
* let newData = [];
* data.forEach(dataRow => {
* let row = [];
* dataRow.forEach(dataElement => {
* row.push(new TableItem({
* data: dataElement,
* template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
* // your template can handle all the data types so you don't have to conditionally set it
* // you can also set different templates for different columns based on index
* }));
* });
* newData.push(row);
* });
* return newData;
* }
* ```
*
* @export
* @class Table
* @implements {AfterContentChecked}
*/
@Component({
selector: "ibm-table",
template: `
<table
class="bx--data-table-v2"
[ngClass]="{
'bx--data-table-v2--compact': size === 'sm',
'bx--data-table-v2--tall': size === 'lg',
'bx--data-table-v2--zebra': striped
}">
<thead>
<tr>
<th *ngIf="model.hasExpandableRows()"></th>
<th *ngIf="showSelectionColumn">
<ibm-checkbox
[size]="size !== ('lg' ? 'sm' : 'md')"
[(ngModel)]="selectAllCheckbox"
[indeterminate]="selectAllCheckboxSomeSelected"
aria-label="Select all rows"
(change)="onSelectAllCheckboxChange()">
</ibm-checkbox>
</th>
<ng-container *ngFor="let column of model.header; let i = index">
<th [ngClass]='{"thead_action": column.filterTemplate || this.sort.observers.length > 0}'
*ngIf="column.visible"
[class]="column.className"
[ngStyle]="column.style"
[draggable]="columnsDraggable"
(dragstart)="columnDragStart($event, i)"
(dragend)="columnDragEnd($event, i)">
<div
*ngIf="columnsResizable"
class="column-resize-handle"
(mousedown)="columnResizeStart($event, column)">
</div>
<button
class="bx--table-sort-v2"
*ngIf="this.sort.observers.length > 0 && column.sortable"
[ngClass]="{
'bx--table-sort-v2--active': column.sorted,
'bx--table-sort-v2--ascending': column.ascending
}"
(click)="sort.emit(i)">
<span *ngIf="!column.template" [title]="column.data">{{column.data}}</span>
<ng-template
[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
</ng-template>
<svg
class="bx--table-sort-v2__icon"
width="10" height="5" viewBox="0 0 10 5"
[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)"
[attr.alt]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)">
<title>{{(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)}}</title>
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</button>
<span
class="bx--table-header-label"
*ngIf="this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable)">
<span *ngIf="!column.template" [title]="column.data">{{column.data}}</span>
<ng-template
[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
</ng-template>
</span>
<button
[ngClass]="{'active': column.filterCount > 0}"
*ngIf="column.filterTemplate"
type="button"
aria-expanded="false"
aria-haspopup="true"
[ibmTooltip]="column.filterTemplate"
trigger="click"
[title]="translations.FILTER"
placement="bottom,top"
[data]="column.filterData">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon--sm"
width="16"
height="16"
viewBox="0 0 16 16">
<path d="M0 0v3l6 8v5h4v-5l6-8V0H0zm9 10.7V15H7v-4.3L1.3 3h13.5L9 10.7z"/>
</svg>
<span *ngIf="column.filterCount > 0">
{{column.filterCount}}
</span>
</button>
<div
*ngIf="columnsDraggable && isColumnDragging"
class="drop-area">
<div
*ngIf="columnDraggedHoverIndex == i && columnDraggedPosition == 'left'"
class="drop-indicator-left"></div>
<div
class="drop-area-left"
(dragenter)="columnDragEnter($event, 'left', i)"
(dragleave)="columnDragLeave($event, 'left', i)"
(dragover)="columnDragover($event, 'left', i)"
(drop)="columnDrop($event, 'left', i)">
</div>
<div
class="drop-area-right"
(dragenter)="columnDragEnter($event, 'right', i)"
(dragleave)="columnDragLeave($event, 'right', i)"
(dragover)="columnDragover($event, 'right', i)"
(drop)="columnDrop($event, 'right', i)">
</div>
<div
*ngIf="columnDraggedHoverIndex == i && columnDraggedPosition == 'right'"
class="drop-indicator-right"></div>
</div>
</th>
</ng-container>
<th [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
<!--
Scrollbar pushes body to the left so this header column is added to push
the title bar the same amount and keep the header and body columns aligned.
-->
</th>
</tr>
</thead>
<tbody
*ngIf="!noData; else noDataTemplate"
[ngStyle]="{'overflow-y': 'scroll'}"
(scroll)="onScroll($event)">
<ng-container *ngFor="let row of model.data; let i = index">
<tr *ngIf="!model.isRowFiltered(i)"
(click)="onRowSelect(i)"
[attr.data-parent-row]="(model.isRowExpandable(i) ? 'true' : null)"
[ngClass]="{
'bx--data-table-v2--selected': model.rowsSelected[i],
'bx--parent-row-v2': model.isRowExpandable(i),
'bx--expandable-row-v2': model.rowsExpanded[i],
'tbody_row--selectable': enableSingleSelect,
'tbody_row--success': !model.rowsSelected[i] && model.rowsContext[i] === 'success',
'tbody_row--warning': !model.rowsSelected[i] && model.rowsContext[i] === 'warning',
'tbody_row--info': !model.rowsSelected[i] && model.rowsContext[i] === 'info',
'tbody_row--error': !model.rowsSelected[i] && model.rowsContext[i] === 'error'
}">
<td
*ngIf="model.hasExpandableRows()"
class="bx--table-expand-v2"
[attr.data-previous-value]="(model.rowsExpanded[i] ? 'collapsed' : null)">
<button
*ngIf="model.isRowExpandable(i)"
(click)="model.expandRow(i, !model.rowsExpanded[i])"
[attr.aria-label]="expandButtonAriaLabel"
class="bx--table-expand-v2__button">
<svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
</svg>
</button>
</td>
<td *ngIf="showSelectionColumn">
<ibm-checkbox
aria-label="Select row"
[size]="size !== ('lg' ? 'sm' : 'md')"
[(ngModel)]="model.rowsSelected[i]"
(change)="onRowCheckboxChange(i)">
</ibm-checkbox>
</td>
<ng-container *ngFor="let item of row; let i = index">
<td *ngIf="model.header[i].visible"
[class]="model.header[i].className"
[ngStyle]="model.header[i].style">
<ng-container *ngIf="!item.template">{{item.data}}</ng-container>
<ng-template
[ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{data: item.data}">
</ng-template>
</td>
</ng-container>
</tr>
<tr
*ngIf="model.rowsExpanded[i]"
class="bx--expandable-row-v2"
[attr.data-child-row]="(model.rowsExpanded[i] ? 'true' : null)">
<td [attr.colspan]="model.data.length + 2">
<ng-container *ngIf="!firstExpandedTemplateInRow(row)">{{firstExpandedDataInRow(row)}}</ng-container>
<ng-template
[ngTemplateOutlet]="firstExpandedTemplateInRow(row)"
[ngTemplateOutletContext]="{data: firstExpandedDataInRow(row)}">
</ng-template>
</td>
</tr>
</ng-container>
</tbody>
<ng-template #noDataTemplate><ng-content></ng-content></ng-template>
<tfoot>
<tr *ngIf="this.model.isLoading">
<td class="table_loading-indicator">
<ibm-static-icon icon="loading_rows" size="lg"></ibm-static-icon>
</td>
</tr>
<tr *ngIf="this.model.isEnd">
<td class="table_end-indicator">
<h5>{{translations.END_OF_DATA}}</h5>
<button (click)="scrollToTop($event)" class="btn--secondary-sm">
{{translations.SCROLL_TOP}}
</button>
</td>
</tr>
</tfoot>
</table>
`
})
export class Table {
/**
* Size of the table rows.
*
* @type {("sm" | "md" | "lg")}
* @memberof Table
*/
@Input() size: "sm" | "md" | "lg" = "md";
/**
* Object of all the strings table needs.
* Defaults to the `TABLE` value from the i18n service.
*/
@Input() translations = this.i18n.get().TABLE;
/**
* `TableModel` with data the table is to display.
*
* @type {TableModel}
* @memberof Table
*/
@Input()
set model(m: TableModel) {
if (this._model) {
this._model.dataChange.unsubscribe();
this._model.rowsSelectedChange.unsubscribe();
}
this._model = m;
this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());
this._model.dataChange.subscribe(() => this.updateSelectAllCheckbox());
}
get model(): TableModel {
return this._model;
}
/**
* Controls whether to show the selection checkboxes column or not.
*
* @deprecated in the next major carbon-components-angular version in favour of
* `showSelectionColumn` because of new attribute `enableSingleSelect`
* please use `showSelectionColumn` instead
*/
@Input()
set enableRowSelect(value: boolean) {
this.showSelectionColumn = value;
}
get enableRowSelect () {
return this.showSelectionColumn;
}
/**
* Controls whether to show the selection checkboxes column or not.
*
* @type {boolean}
* @memberof Table
*/
@Input() showSelectionColumn = true;
/**
* Controls whether to enable multiple or single row selection.
*
* @type {boolean}
* @memberof Table
*/
@Input() enableSingleSelect = false;
/**
* Distance (in px) from the bottom that view has to reach before
* `scrollLoad` event is emitted.
*
* @type {number}
* @memberof Table
*/
@Input() scrollLoadDistance = 0;
/**
* Set to `true` to enable users to resize columns.
*
* Works for columns with width set in pixels.
*
* @memberof Table
*/
@Input() columnsResizable = false;
/**
* Set to `true` to enable users to drag and drop columns.
*
* Changing the column order in table changes table model. Be aware of it when you add additional data
* to the model.
*
* @memberof Table
*/
@Input() columnsDraggable = false;
@Input() expandButtonAriaLabel = "Expand row";
@Input() sortDescendingLabel = "Sort rows by this header in descending order";
@Input() sortAscendingLabel = "Sort rows by this header in ascending order";
/**
* Controls if all checkboxes are viewed as selected.
*
* @type {boolean}
* @memberof Table
*/
selectAllCheckbox = false;
/**
* Controls the indeterminate state of the header checkbox.
*
* @type {boolean}
* @memberof Table
*/
selectAllCheckboxSomeSelected = false;
/**
* Set to `false` to remove table rows (zebra) stripes.
*
* @type {boolean}
* @memberof Table
*/
@Input() striped = true;
/**
* Emits an index of the column that wants to be sorted.
*
* @memberof Table
*/
@Output() sort = new EventEmitter<number>();
/**
* Emits if all rows are selected.
*
* @param {TableModel} model
* @memberof Table
*/
@Output() selectAll = new EventEmitter<Object>();
/**
* Emits if all rows are deselected.
*
* @param {TableModel} model
* @memberof Table
*/
@Output() deselectAll = new EventEmitter<Object>();
/**
* Emits if a single row is selected.
*
* @param {Object} ({model: this.model, selectedRowIndex: index})
* @memberof Table
*/
@Output() selectRow = new EventEmitter<Object>();
/**
* Emits if a single row is deselected.
*
* @param {Object} ({model: this.model, deselectedRowIndex: index})
* @memberof Table
*/
@Output() deselectRow = new EventEmitter<Object>();
/**
* Emits when table requires more data to be loaded.
*
* @param {TableModel} model
* @memberof Table
*/
@Output() scrollLoad = new EventEmitter<TableModel>();
get noData() {
return !this.model.data ||
this.model.data.length === 0 ||
this.model.data.length === 1 && this.model.data[0].length === 0;
}
protected _model: TableModel;
protected columnResizeWidth: number;
protected columnResizeMouseX: number;
protected mouseMoveSubscription: Subscription;
protected mouseUpSubscription: Subscription;
protected isColumnDragging = false;
protected columnDraggedHoverIndex = -1;
protected columnDraggedPosition = "";
/**
* Creates an instance of Table.
*
* @param {ApplicationRef} applicationRef
* @memberof Table
*/
constructor(protected applicationRef: ApplicationRef, protected i18n: I18n) {}
columnResizeStart(event, column) {
this.columnResizeWidth = parseInt(column.style.width, 10);
this.columnResizeMouseX = event.clientX;
event.preventDefault();
this.mouseMoveSubscription = fromEvent(document.body, "mousemove").subscribe(event => {
this.columnResizeProgress(event, column);
});
this.mouseUpSubscription = fromEvent(document.body, "mouseup").subscribe(event => {
this.columnResizeEnd(event, column);
});
}
columnResizeProgress(event, column) {
const move = event.clientX - this.columnResizeMouseX;
column.style.width = `${this.columnResizeWidth + move}px`;
}
columnResizeEnd(event, column) {
this.mouseMoveSubscription.unsubscribe();
this.mouseUpSubscription.unsubscribe();
}
onRowSelect(index: number) {
if (!this.showSelectionColumn && this.enableSingleSelect) {
this.model.rowsSelected.forEach((element, index) => {
this.model.selectRow(index, false);
});
this.model.selectRow(index, !this.model.rowsSelected[index]);
}
}
updateSelectAllCheckbox() {
const selectedRowsCount = this.model.selectedRowsCount();
if (selectedRowsCount <= 0) {
// reset select all checkbox if nothing selected
this.selectAllCheckbox = false;
this.selectAllCheckboxSomeSelected = false;
} else if (selectedRowsCount < this.model.data.length) {
this.selectAllCheckboxSomeSelected = true;
}
}
/**
* Triggered whenever the header checkbox is clicked.
* Updates all the checkboxes in the table view.
* Emits the `selectAll` or `deselectAll` event.
*
* @memberof Table
*/
onSelectAllCheckboxChange() {
this.applicationRef.tick(); // give app time to process the click if needed
if (this.selectAllCheckboxSomeSelected) {
this.selectAllCheckbox = false; // clear all boxes
this.deselectAll.emit(this.model);
} else if (this.selectAllCheckbox) {
this.selectAll.emit(this.model);
} else {
this.deselectAll.emit(this.model);
}
this.selectAllCheckboxSomeSelected = false;
for (let i = 0; i < this.model.rowsSelected.length; i++) {
this.model.rowsSelected[i] = this.selectAllCheckbox;
}
}
/**
* Triggered when a single row is clicked.
* Updates the header checkbox state.
* Emits the `selectRow` or `deselectRow` event.
*
* @param {number} index
* @returns
* @memberof Table
*/
onRowCheckboxChange(index: number) {
let startValue = this.model.rowsSelected[0];
if (this.model.rowsSelected[index]) {
this.selectRow.emit({model: this.model, selectedRowIndex: index});
} else {
this.deselectRow.emit({model: this.model, deselectedRowIndex: index});
}
for (let i = 1; i < this.model.rowsSelected.length; i++) {
let one = this.model.rowsSelected[i];
if (!!one !== !!startValue) { // !! essentially converts to boolean and we want undefined to be false
// set indeterminate
this.selectAllCheckbox = false;
this.selectAllCheckboxSomeSelected = true;
return;
}
}
this.selectAllCheckboxSomeSelected = false;
this.selectAllCheckbox = startValue;
}
/**
* Triggered when the user scrolls on the `<tbody>` element.
* Emits the `scrollLoad` event.
*
* @param {any} event
* @memberof Table
*/
onScroll(event) {
const distanceFromBottom = event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop;
if (distanceFromBottom <= this.scrollLoadDistance) {
this.scrollLoad.emit(this.model);
} else {
this.model.isEnd = false;
}
}
columnDragStart(event, columnIndex) {
this.isColumnDragging = true;
this.columnDraggedHoverIndex = columnIndex;
event.dataTransfer.setData("columnIndex", JSON.stringify(columnIndex));
}
columnDragEnd(event, columnIndex) {
this.isColumnDragging = false;
this.columnDraggedHoverIndex = -1;
}
columnDragEnter(event, position, columnIndex) {
this.columnDraggedPosition = position;
this.columnDraggedHoverIndex = columnIndex;
}
columnDragLeave(event, position, columnIndex) {
this.columnDraggedPosition = "";
}
columnDragover(event, position, columnIndex) {
this.columnDraggedHoverIndex = columnIndex;
this.columnDraggedPosition = position;
// needed to tell browser to allow dropping
event.preventDefault();
}
columnDrop(event, position, columnIndex) {
this.isColumnDragging = false;
this.columnDraggedHoverIndex = -1;
this.columnDraggedPosition = "";
this.model.moveColumn(
parseInt(event.dataTransfer.getData("columnIndex"), 10),
columnIndex + (position === "right" ? 1 : 0)
);
}
get scrollbarWidth() {
return getScrollbarWidth();
}
firstExpandedDataInRow(row) {
const found = row.find(d => d.expandedData);
if (found) {
return found.expandedData;
}
return found;
}
firstExpandedTemplateInRow(row) {
const found = row.find(d => d.expandedTemplate);
if (found) {
return found.expandedTemplate;
}
return found;
}
/**
* Triggered when the user scrolls on the `<tbody>` element.
* Emits the `scrollLoad` event.
*
* @param {any} event
* @memberof Table
*/
scrollToTop(event) {
event.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;
this.model.isEnd = false;
}
}
</code></pre>
</div>
<div class="tab-pane fade" id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div></div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'AlertModalStory', 'selector': 'app-alert-modal-story'},{'name': 'Banner', 'selector': 'ibm-banner'},{'name': 'Calendar', 'selector': 'ibm-calendar'},{'name': 'CalendarHeader', 'selector': 'ibm-calendar-header'},{'name': 'CalendarMonth', 'selector': 'ibm-calendar-month-view'},{'name': 'CalendarMonths', 'selector': 'ibm-calendar-months-view'},{'name': 'CalendarQuarter', 'selector': 'ibm-calendar-quarter-view'},{'name': 'CalendarYear', 'selector': 'ibm-calendar-year-view'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'DynamicTableStory', 'selector': 'app-custom-table'},{'name': 'ExpansionTableStory', 'selector': 'app-expansion-table'},{'name': 'Icon', 'selector': 'ibm-icon'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListGroup', 'selector': 'ibm-list-group'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'ModalStory', 'selector': 'app-modal-story'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'NotificationStory', 'selector': 'app-notification-story'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'OverflowTableStory', 'selector': 'app-overflow-table'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'PaginationStory', 'selector': 'app-pagination'},{'name': 'PaginationTableStory', 'selector': 'app-pagination-table'},{'name': 'Pill', 'selector': 'ibm-pill'},{'name': 'PillInput', 'selector': 'ibm-pill-input'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleModal', 'selector': 'app-sample-modal'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'Sprite', 'selector': 'ibm-sprite'},{'name': 'StaticIcon', 'selector': 'ibm-static-icon'},{'name': 'Switch', 'selector': 'ibm-switch'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableStory', 'selector': 'app-table'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'ToastStory', 'selector': 'app-toast-story'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'}];
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
var ACTUAL_COMPONENT = {'name': 'Table'};
</script>
<script src="../js/tree.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</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>