carbon-components-angular
Version:
Next generation components
1,226 lines (1,042 loc) • 60 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content class">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Classes</li>
<li class="breadcrumb-item" >DataGridInteractionModel</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/table/data-grid-interaction-model.class.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p><code>DataGridInteractionModel</code> provides centralized control over arbitrary 2d grids, following the w3 specs.</p>
<p>Refs:</p>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html">https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices/#grid">https://www.w3.org/TR/wai-aria-practices/#grid</a></li>
</ul>
<p>Example usage (taken from <code>table.component</code>):</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// a standard HTML table
const table = this.elementRef.nativeElement.querySelector("table") as HTMLTableElement;
// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table
const tableAdapter = new TableDomAdapter(table);
// the keydown events that we'll use for keyboard navigation of the table
const keydownEventStream = fromEvent<KeyboardEvent>(table, "keydown");
// the click events we'll use to ensure focus is updated correctly on click
const clickEventStream = fromEvent<MouseEvent>(table, "click");
// the `DataGridInteractionModel` instance!
this.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);
// subscribe to the combined position updates
this.interactionModel.position.subscribe(event => {
const [currentRow, currentColumn] = event.current;
const [previousRow, previousColumn] = event.previous;
// query the TableAdapter for the cell at the current row and column ...
const currentElement = tableAdapter.getCell(currentRow, currentColumn);
// ... and make it focusable it
Table.setTabIndex(currentElement, 0);
// if the model has just initialized don't focus or reset anything
if (previousRow === -1 || previousColumn === -1) { return; }
// query the TableAdapter for the cell at the previous row and column ...
const previousElement = tableAdapter.getCell(previousRow, previousColumn);
// ... and make it unfocusable (now there is only a single focusable cell)
Table.setTabIndex(previousElement, -1);
// finally, focus the current cell (skipped during initilzation)
Table.focus(currentElement);
});</code></pre></div>
</p>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Readonly</span>
<a href="#columnIndex" >columnIndex</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#columnSubject" >columnSubject</a>
</li>
<li>
<span class="modifier">Readonly</span>
<a href="#position" >position</a>
</li>
<li>
<span class="modifier">Readonly</span>
<a href="#rowIndex" >rowIndex</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#rowSubject" >rowSubject</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="#goTo" >goTo</a>
</li>
<li>
<a href="#goToColumn" >goToColumn</a>
</li>
<li>
<a href="#goToRow" >goToRow</a>
</li>
<li>
<a href="#handleClickEvent" >handleClickEvent</a>
</li>
<li>
<a href="#handleKeyboardEvent" >handleKeyboardEvent</a>
</li>
<li>
<a href="#reset" >reset</a>
</li>
<li>
<a href="#resetTabIndexes" >resetTabIndexes</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="#currentRow" >currentRow</a>
</li>
<li>
<a href="#currentColumn" >currentColumn</a>
</li>
<li>
<a href="#lastColumn" >lastColumn</a>
</li>
<li>
<a href="#lastRow" >lastRow</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(keyboardEventStream: Observable<KeyboardEvent>, clickEventStream: Observable<MouseEvent>, tableAdapter: <a href="../classes/TableAdapter.html" target="_self">TableAdapter</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:116</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>DataGridInteractionModel</code> requires knowledge of events, and a representation of your table/grid to be useful.</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>keyboardEventStream</td>
<td>
<code>Observable<KeyboardEvent></code>
</td>
<td>
No
</td>
<td>
<p>an Observable of KeyboardEvents. Should be scoped to the table container.</p>
</td>
</tr>
<tr>
<td>clickEventStream</td>
<td>
<code>Observable<MouseEvent></code>
</td>
<td>
No
</td>
<td>
<p>an Observable of ClickEvents. should only include clicks that take action on items known by the TableAdapter</p>
</td>
</tr>
<tr>
<td>tableAdapter</td>
<td>
<code><a href="../classes/TableAdapter.html" target="_self" >TableAdapter</a></code>
</td>
<td>
No
</td>
<td>
<p>an instance of a concrete class that implements TableAdapter. The standard carbon table uses TableDomAdapter</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnIndex"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>columnIndex</b></span>
<a href="#columnIndex"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<literal type></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:79</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>An Observable that provides the current and previous column indexes.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="columnSubject"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>columnSubject</b></span>
<a href="#columnSubject"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject({ current: 0, previous: -1 })</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:88</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Internal subject to handle changes in column</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="position"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>position</b></span>
<a href="#position"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/DataGridPosition.html" target="_self" >Observable<DataGridPosition></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:71</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>An Observable that provides an aggregated view of the <code>rowIndex</code> and <code>columnIndex</code> Observables</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowIndex"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>rowIndex</b></span>
<a href="#rowIndex"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<literal type></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:75</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>An Observable that provides the current and previous row indexes.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rowSubject"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>rowSubject</b></span>
<a href="#rowSubject"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject({ current: 0, previous: -1 })</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:84</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Internal subject to handle changes in row</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="goTo"></a>
<span class="name">
<span ><b>goTo</b></span>
<a href="#goTo"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>goTo(undefined)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="234"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:234</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Jump to the specified row and column</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="goToColumn"></a>
<span class="name">
<span ><b>goToColumn</b></span>
<a href="#goToColumn"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>goToColumn(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="214"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:214</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Jump to a specific column without changing the row</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>
No
</td>
<td>
<p>column to jump to</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="goToRow"></a>
<span class="name">
<span ><b>goToRow</b></span>
<a href="#goToRow"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>goToRow(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="224"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:224</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Jump to a specific row without changing the column</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
<td>
<p>row to jump to</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="handleClickEvent"></a>
<span class="name">
<span ><b>handleClickEvent</b></span>
<a href="#handleClickEvent"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>handleClickEvent(event: MouseEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="203"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:203</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles moving the position to the clicked cell</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>
<code>MouseEvent</code>
</td>
<td>
No
</td>
<td>
<p>the MouseEvent to handle</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="handleKeyboardEvent"></a>
<span class="name">
<span ><b>handleKeyboardEvent</b></span>
<a href="#handleKeyboardEvent"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>handleKeyboardEvent(event: KeyboardEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="152"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:152</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles moving the position according to the w3 datagrid navigation specs</p>
<p>Refs:</p>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html">https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices/#grid">https://www.w3.org/TR/wai-aria-practices/#grid</a></li>
</ul>
</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>
<code>KeyboardEvent</code>
</td>
<td>
No
</td>
<td>
<p>the KeyboardEvent to handle</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="reset"></a>
<span class="name">
<span ><b>reset</b></span>
<a href="#reset"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>reset()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="259"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:259</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Resets the models focus position</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="resetTabIndexes"></a>
<span class="name">
<span ><b>resetTabIndexes</b></span>
<a href="#resetTabIndexes"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>resetTabIndexes(newTabIndex)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="243"
class="link-to-prism">src/table/data-grid-interaction-model.class.ts:243</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Convenience method to reset the tab indexes on a standard carbon table.
For custom tables you may want to reset the indexes manually and simply call <code>.reset()</code></p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>newTabIndex</td>
<td>
No
</td>
<td>
<code>-1</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="currentRow"></a>
<span class="name"><b>currentRow</b><a href="#currentRow"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>currentRow()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:93</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The latest value emitted by the rowSubject</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="currentColumn"></a>
<span class="name"><b>currentColumn</b><a href="#currentColumn"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>currentColumn()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:100</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The latest value emitted by the columnSubject</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="lastColumn"></a>
<span class="name"><b>lastColumn</b><a href="#lastColumn"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>lastColumn()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:107</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The last column as reported by the adapter</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="lastRow"></a>
<span class="name"><b>lastRow</b><a href="#lastRow"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>lastRow()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/table/data-grid-interaction-model.class.ts:114</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The last row as reported by the adapter</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
BehaviorSubject,
Observable,
combineLatest
} from "rxjs";
import { map } from "rxjs/operators";
import { TableAdapter } from "./table-adapter.class";
import { tabbableSelectorIgnoreTabIndex, getFocusElementList } from "carbon-components-angular/common";
/**
* The current and previous position in the grid.
*
* `current` and `previous` are tuples that follow the `[row, column]` convention.
*/
export interface DataGridPosition {
current: [number, number];
previous: [number, number];
}
/**
* `DataGridInteractionModel` provides centralized control over arbitrary 2d grids, following the w3 specs.
*
* Refs:
* - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html
* - https://www.w3.org/TR/wai-aria-practices/#grid
*
* Example usage (taken from `table.component`):
```typescript
// a standard HTML table
const table = this.elementRef.nativeElement.querySelector("table") as HTMLTableElement;
// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table
const tableAdapter = new TableDomAdapter(table);
// the keydown events that we'll use for keyboard navigation of the table
const keydownEventStream = fromEvent<KeyboardEvent>(table, "keydown");
// the click events we'll use to ensure focus is updated correctly on click
const clickEventStream = fromEvent<MouseEvent>(table, "click");
// the `DataGridInteractionModel` instance!
this.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);
// subscribe to the combined position updates
this.interactionModel.position.subscribe(event => {
const [currentRow, currentColumn] = event.current;
const [previousRow, previousColumn] = event.previous;
// query the TableAdapter for the cell at the current row and column ...
const currentElement = tableAdapter.getCell(currentRow, currentColumn);
// ... and make it focusable it
Table.setTabIndex(currentElement, 0);
// if the model has just initialized don't focus or reset anything
if (previousRow === -1 || previousColumn === -1) { return; }
// query the TableAdapter for the cell at the previous row and column ...
const previousElement = tableAdapter.getCell(previousRow, previousColumn);
// ... and make it unfocusable (now there is only a single focusable cell)
Table.setTabIndex(previousElement, -1);
// finally, focus the current cell (skipped during initilzation)
Table.focus(currentElement);
});
`&