@ni/nimble-components 20.4.1 → 20.4.3

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 20 Sep 2023 02:32:58 GMT
+   * Generated on Wed, 20 Sep 2023 16:15:01 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -23702,7 +23702,13 @@
       tableGroupExpandLabel: 'Expand group',
       tableGroupsCollapseAllLabel: 'Collapse all groups',
       tableCellActionMenuLabel: 'Options',
-      tableColumnHeaderGroupedIndicatorLabel: 'Grouped'
+      tableColumnHeaderGroupedLabel: 'Grouped',
+      tableColumnHeaderSortedAscendingLabel: 'Sorted ascending',
+      tableColumnHeaderSortedDescendingLabel: 'Sorted descending',
+      tableSelectAllLabel: 'Select all rows',
+      tableGroupSelectAllLabel: 'Select all rows in group',
+      tableRowSelectLabel: 'Select row',
+      tableRowOperationColumnLabel: 'Row operations'
   };
 
   const tableGroupCollapseLabel = DesignToken.create({
@@ -23721,17 +23727,47 @@
       name: 'table-cell-action-menu-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableCellActionMenuLabel);
-  const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create({
-      name: 'table-column-header-grouped-indicator-label',
+  const tableColumnHeaderGroupedLabel = DesignToken.create({
+      name: 'table-column-header-grouped-label',
       cssCustomPropertyName: null
-  }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel);
+  }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedLabel);
+  const tableColumnHeaderSortedAscendingLabel = DesignToken.create({
+      name: 'table-column-header-sorted-ascending-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingLabel);
+  const tableColumnHeaderSortedDescendingLabel = DesignToken.create({
+      name: 'table-column-header-sorted-descending-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingLabel);
+  const tableSelectAllLabel = DesignToken.create({
+      name: 'table-select-all-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableSelectAllLabel);
+  const tableGroupSelectAllLabel = DesignToken.create({
+      name: 'table-group-select-all-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableGroupSelectAllLabel);
+  const tableRowSelectLabel = DesignToken.create({
+      name: 'table-row-select-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowSelectLabel);
+  const tableRowOperationColumnLabel = DesignToken.create({
+      name: 'table-row-operation-column-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowOperationColumnLabel);
 
   const supportedLabels = {
       groupCollapse: tableGroupCollapseLabel,
       groupExpand: tableGroupExpandLabel,
       groupsCollapseAll: tableGroupsCollapseAllLabel,
       cellActionMenu: tableCellActionMenuLabel,
-      columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+      columnHeaderGrouped: tableColumnHeaderGroupedLabel,
+      columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,
+      columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel,
+      selectAll: tableSelectAllLabel,
+      groupSelectAll: tableGroupSelectAllLabel,
+      rowSelect: tableRowSelectLabel,
+      rowOperationColumn: tableRowOperationColumnLabel
   };
   /**
    * Label provider for the Nimble table (and its sub-components and columns)
@@ -23755,8 +23791,26 @@
       attr({ attribute: 'cell-action-menu' })
   ], LabelProviderTable.prototype, "cellActionMenu", void 0);
   __decorate$1([
-      attr({ attribute: 'column-header-grouped-indicator' })
-  ], LabelProviderTable.prototype, "columnHeaderGroupedIndicator", void 0);
+      attr({ attribute: 'column-header-grouped' })
+  ], LabelProviderTable.prototype, "columnHeaderGrouped", void 0);
+  __decorate$1([
+      attr({ attribute: 'column-header-sorted-ascending' })
+  ], LabelProviderTable.prototype, "columnHeaderSortedAscending", void 0);
+  __decorate$1([
+      attr({ attribute: 'column-header-sorted-descending' })
+  ], LabelProviderTable.prototype, "columnHeaderSortedDescending", void 0);
+  __decorate$1([
+      attr({ attribute: 'select-all' })
+  ], LabelProviderTable.prototype, "selectAll", void 0);
+  __decorate$1([
+      attr({ attribute: 'group-select-all' })
+  ], LabelProviderTable.prototype, "groupSelectAll", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-select' })
+  ], LabelProviderTable.prototype, "rowSelect", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-operation-column' })
+  ], LabelProviderTable.prototype, "rowOperationColumn", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table'
   });
@@ -63461,6 +63515,14 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentSortDirection", void 0);
+  function isColumnInternalsProperty(changedProperty, ...args) {
+      for (const arg of args) {
+          if (changedProperty === arg) {
+              return true;
+          }
+      }
+      return false;
+  }
 
   /**
    * The base class for table columns
@@ -63831,6 +63893,25 @@ img.ProseMirror-separator {
     .row {
         position: relative;
     }
+
+    .accessibly-hidden {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             .table-row-container::before {
                 content: '';
@@ -63870,15 +63951,27 @@ img.ProseMirror-separator {
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"
     >
         <slot></slot>
-        ${'' /* Omit title attribute for sort indicators because aria-sort is set on the 1st sorted column */}
+        ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
         ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-            <${iconArrowUpTag} class="sort-indicator" aria-hidden="true"></${iconArrowUpTag}>
+            <${iconArrowUpTag}
+                class="sort-indicator"
+                title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
+                aria-hidden="true"
+            ></${iconArrowUpTag}>
         `)}
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-            <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
+            <${iconArrowDownTag}
+                class="sort-indicator"
+                title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
+                aria-hidden="true"
+            ></${iconArrowDownTag}>
         `)}
         ${when(x => x.isGrouped, html `
-            <${iconTwoSquaresInBracketsTag} class="grouped-indicator" title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}"></${iconTwoSquaresInBracketsTag}>
+            <${iconTwoSquaresInBracketsTag}
+                class="grouped-indicator"
+                title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+            ></${iconTwoSquaresInBracketsTag}>
         `)}
     </template>
 `;
@@ -63965,7 +64058,7 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
-    .checkbox-container {
+    .row-operations-container {
         display: flex;
     }
 
@@ -64063,6 +64156,7 @@ img.ProseMirror-separator {
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
                 class="action-menu"
+                title="${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                 ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}
@@ -64129,15 +64223,19 @@ img.ProseMirror-separator {
   // prettier-ignore
   const template$e = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
-        ${when(x => x.selectable && !x.hideSelection, html `
-            <span role="gridcell" class="checkbox-container">
-                <${checkboxTag}
-                    ${ref('selectionCheckbox')}
-                    class="selection-checkbox"
-                    @change="${(x, c) => x.onSelectionChange(c.event)}"
-                    @click="${(_, c) => c.event.stopPropagation()}"
-                >
-                </${checkboxTag}>
+        ${when(x => !x.rowOperationGridCellHidden, html `
+            <span role="gridcell" class="row-operations-container">
+                ${when(x => x.selectable && !x.hideSelection, html `
+                    <${checkboxTag}
+                        ${ref('selectionCheckbox')}
+                        class="selection-checkbox"
+                        @change="${(x, c) => x.onSelectionChange(c.event)}"
+                        @click="${(_, c) => c.event.stopPropagation()}"
+                        title="${x => tableRowSelectLabel.getValueFor(x)}"
+                        aria-label="${x => tableRowSelectLabel.getValueFor(x)}"
+                    >
+                    </${checkboxTag}>
+                `)}
             </span>
         `)}
         ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
@@ -64145,31 +64243,31 @@ img.ProseMirror-separator {
         <span class="row-front-spacer"></span>
 
         <span ${ref('cellContainer')} class="cell-container">
-            ${repeat(x => x.columnStates, html `
-                ${when(x => !x.column.columnHidden, html `
+            ${repeat(x => x.columns, html `
+                ${when(x => !x.columnHidden, html `
                     <${tableCellTag}
                         class="cell"
-                        :cellState="${x => x.cellState}"
-                        :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
-                        :column="${x => x.column}"
-                        column-id="${x => x.column.columnId}"
+                        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
+                        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
+                        :column="${x => x}"
+                        column-id="${x => x.columnId}"
                         :recordId="${(_, c) => c.parent.recordId}"
-                        ?has-action-menu="${x => !!x.column.actionMenuSlot}"
-                        action-menu-label="${x => x.column.actionMenuLabel}"
-                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
-                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
-                        :nestingLevel="${x => x.cellIndentLevel};"
+                        ?has-action-menu="${x => !!x.actionMenuSlot}"
+                        action-menu-label="${x => x.actionMenuLabel}"
+                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
+                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]};"
                     >
 
-                        ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
+                        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
                             <slot
-                                name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
+                                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
                                 slot="cellActionMenu"
                             ></slot>
                         `)}
                     </${tableCellTag}>
                 `)}
-            `)}
+            `, { recycle: false, positioning: true })}
         </span>
     </template>
 `;
@@ -64184,41 +64282,39 @@ img.ProseMirror-separator {
           this.selectable = false;
           this.selected = false;
           this.hideSelection = false;
+          /**
+           * @internal
+           * */
+          this.columnNotifiers = [];
           this.columns = [];
           this.nestingLevel = 0;
           this.menuOpen = false;
+          this.rowOperationGridCellHidden = false;
+          /**
+           * @internal
+           * An array that parallels the `columns` array and contains the indent
+           * level of each column's cell.
+           * */
+          this.cellIndentLevels = [];
+          /**
+           * @internal
+           * An array that parallels the `columns` array and contains the cell state
+           * of each column's cell.
+           * */
+          this.cellStates = [];
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
           // the selection checkbox 'checked' value should be ingored.
           // https://github.com/microsoft/fast/issues/5750
           this.ignoreSelectionChangeEvents = false;
       }
-      get columnStates() {
-          return this.columns.map((column, i) => {
-              const fieldNames = column.columnInternals.dataRecordFieldNames;
-              let cellState;
-              if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
-                  const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
-                  const cellRecord = Object.fromEntries(column.columnInternals.cellRecordFieldNames.map((k, j) => [
-                      k,
-                      cellDataValues[j]
-                  ]));
-                  const columnConfig = column.columnInternals.columnConfig;
-                  cellState = {
-                      cellRecord,
-                      columnConfig
-                  };
-              }
-              const cellIndentLevel = i === 0 && this.nestingLevel > 0 ? this.nestingLevel - 1 : 0;
-              return { column, cellState, cellIndentLevel };
-          });
-      }
       get ariaSelected() {
           if (this.selectable) {
               return this.selected ? 'true' : 'false';
           }
           return null;
       }
+      /** @internal */
       onSelectionChange(event) {
           if (this.ignoreSelectionChangeEvents) {
               return;
@@ -64232,10 +64328,12 @@ img.ProseMirror-separator {
           };
           this.$emit('row-selection-toggle', detail);
       }
+      /** @internal */
       onCellActionMenuBeforeToggle(event, column) {
           this.currentActionMenuColumn = column;
           this.emitActionMenuToggleEvent('row-action-menu-beforetoggle', event.detail, column);
       }
+      /** @internal */
       onCellActionMenuToggle(event, column) {
           this.menuOpen = event.detail.newState;
           this.emitActionMenuToggleEvent('row-action-menu-toggle', event.detail, column);
@@ -64248,6 +64346,15 @@ img.ProseMirror-separator {
               }
           }
       }
+      /** @internal */
+      handleChange(source, args) {
+          if (source instanceof ColumnInternals
+              && typeof args === 'string'
+              && (isColumnInternalsProperty(args, 'columnConfig')
+                  || isColumnInternalsProperty(args, 'dataRecordFieldNames'))) {
+              this.updateCellStates();
+          }
+      }
       emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
           const detail = {
               newState: menuButtonEventDetail.newState,
@@ -64257,6 +64364,58 @@ img.ProseMirror-separator {
           };
           this.$emit(eventType, detail);
       }
+      columnsChanged() {
+          this.updateCellIndentLevels();
+          this.updateCellStates();
+          this.observeColumns();
+      }
+      dataRecordChanged() {
+          this.updateCellStates();
+      }
+      nestingLevelChanged() {
+          this.updateCellIndentLevels();
+      }
+      updateCellIndentLevels() {
+          this.cellIndentLevels = this.columns.map((_, i) => {
+              if (i === 0 && this.nestingLevel > 0) {
+                  return this.nestingLevel - 1;
+              }
+              return 0;
+          });
+      }
+      removeColumnObservers() {
+          this.columnNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.columnNotifiers = [];
+      }
+      observeColumns() {
+          this.removeColumnObservers();
+          this.columnNotifiers = this.columns.map(column => {
+              const notifier = Observable.getNotifier(column.columnInternals);
+              notifier.subscribe(this);
+              return notifier;
+          });
+      }
+      updateCellStates() {
+          this.cellStates = this.columns.map(column => {
+              const fieldNames = column.columnInternals.dataRecordFieldNames;
+              let cellState;
+              if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
+                  const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
+                  const cellRecord = Object.fromEntries(column.columnInternals.cellRecordFieldNames.map((k, j) => [
+                      k,
+                      cellDataValues[j]
+                  ]));
+                  const columnConfig = column.columnInternals.columnConfig;
+                  cellState = {
+                      cellRecord,
+                      columnConfig
+                  };
+              }
+              return cellState;
+          });
+      }
       hasValidFieldNames(keys) {
           return keys.every(key => key !== undefined);
       }
@@ -64301,12 +64460,18 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'menu-open', mode: 'boolean' })
   ], TableRow.prototype, "menuOpen", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })
+  ], TableRow.prototype, "rowOperationGridCellHidden", void 0);
   __decorate$1([
       observable
-  ], TableRow.prototype, "selectionCheckbox", void 0);
+  ], TableRow.prototype, "cellIndentLevels", void 0);
   __decorate$1([
-      volatile
-  ], TableRow.prototype, "columnStates", null);
+      observable
+  ], TableRow.prototype, "cellStates", void 0);
+  __decorate$1([
+      observable
+  ], TableRow.prototype, "selectionCheckbox", void 0);
   __decorate$1([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
@@ -64440,6 +64605,8 @@ img.ProseMirror-separator {
                     class="selection-checkbox"
                     @change="${(x, c) => x.onSelectionChange(c.event)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
+                    title="${x => tableGroupSelectAllLabel.getValueFor(x)}"
+                    aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}"
                 >
                 </${checkboxTag}>
             </span>
@@ -64451,6 +64618,7 @@ img.ProseMirror-separator {
                 content-hidden
                 class="expand-collapse-button"
                 tabindex="-1"
+                title="${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}"
             >
                 <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
                 ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}
@@ -64588,29 +64756,34 @@ img.ProseMirror-separator {
             <div class="glass-overlay">
                 <div role="rowgroup" class="header-row-container">
                     <div class="header-row" role="row">
-                        <span class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                        <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                            ${when(x => x.showRowOperationColumn, html `
+                                <span class="accessibly-hidden">
+                                    ${x => tableRowOperationColumnLabel.getValueFor(x)}
+                                </span>
+                            `)}
                             ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
-                                <span role="columnheader" class="checkbox-container">
+                                <span class="checkbox-container">
                                     <${checkboxTag}
                                         ${ref('selectionCheckbox')}
                                         class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
                                         @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
+                                        title="${x => tableSelectAllLabel.getValueFor(x)}"
+                                        aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
                                     >
                                     </${checkboxTag}>
                                 </span>
                             `)}
-                            <span role="gridcell">
-                                <${buttonTag}
-                                    class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
-                                    content-hidden
-                                    appearance="${ButtonAppearance.ghost}"
-                                    title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
-                                    @click="${x => x.handleCollapseAllGroupRows()}"
-                                >
-                                    <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                                    ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
-                                </${buttonTag}>
-                            </span>
+                            <${buttonTag}
+                                class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
+                                content-hidden
+                                appearance="${ButtonAppearance.ghost}"
+                                title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
+                                @click="${x => x.handleCollapseAllGroupRows()}"
+                            >
+                                <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                                ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
+                            </${buttonTag}>
                         </span>
                         <span class="column-headers-container" ${ref('columnHeadersContainer')}>
                             ${repeat(x => x.visibleColumns, html `
@@ -64671,6 +64844,7 @@ img.ProseMirror-separator {
                                         :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                         :columns="${(_, c) => c.parent.columns}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                        ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
@@ -65766,14 +65940,6 @@ img.ProseMirror-separator {
       }
       return false;
   };
-  const isColumnInternalsProperty = (changedProperty, ...args) => {
-      for (const arg of args) {
-          if (changedProperty === arg) {
-              return true;
-          }
-      }
-      return false;
-  };
   const trackedItems$1 = [
       'rowIds',
       'groupRows',
@@ -66293,6 +66459,13 @@ img.ProseMirror-separator {
       get validity() {
           return this.tableValidator.getValidity();
       }
+      /**
+       * @internal
+       */
+      get showRowOperationColumn() {
+          return (this.selectionMode === TableRowSelectionMode.multiple
+              || this.showCollapseAll);
+      }
       async setData(newData) {
           await this.processPendingUpdates();
           const data = newData.map(record => {
@@ -66597,7 +66770,7 @@ img.ProseMirror-separator {
               this.columnNotifiers.push(notifier);
               const notifierInternals = Observable.getNotifier(column.columnInternals);
               notifierInternals.subscribe(this);
-              this.columnNotifiers.push(notifier);
+              this.columnNotifiers.push(notifierInternals);
           }
       }
       getColumnsParticipatingInSorting() {