lightning-base-components 1.14.3-alpha → 1.15.1-alpha

package/src/lightning/datatable/rows.js

@@ -18,7 +18,6 @@ import {
 import { isRowNumberColumn, getRowNumberErrorColumnDef } from './rowNumber';
 import { getRowError } from './errors';
 import { getDirtyValueFromCell } from './inlineEditShared';
-import { DEFAULT_ROW_HEIGHT } from './renderManager';
 
 export function getData(state) {
     return state.data;
@@ -77,8 +76,7 @@ export function resolveRowClassNames(row) {
  * @param {object} state - data table state
  * @param {string} rowKeyValue - computed id for the row
  * @param {string} colKeyValue - computed id for the column
- *
- * @return {object} The user row that its related to the action.
+ * @returns {object} The user row that its related to the action.
  */
 export function getUserRowByCellKeys(state, rowKeyValue, colKeyValue) {
     const rowIndex = state.indexes[rowKeyValue][colKeyValue][0];
@@ -115,8 +113,8 @@ export function uniqueRowKeyGenerator(keyField) {
  * @param {object} state - the current datatable state
  */
 export function updateRowsAndCellIndexes() {
-    const { state, privateTypes: types, _virtualize } = this;
-    const { keyField, renderModeRoleBased } = state;
+    const { state, privateTypes: types } = this;
+    const { keyField, renderModeRoleBased, virtualize, rowHeight } = state;
     const data = getData(state);
     const columns = getColumns(state);
     const computeUniqueRowKey = uniqueRowKeyGenerator(keyField);
@@ -135,6 +133,9 @@ export function updateRowsAndCellIndexes() {
 
         state.indexes[row.key] = { rowIndex };
 
+        row.rowIndex = rowIndex;
+        row.rowNumber = rowIndex + 1; // for UTAM since methods are base-1
+        row.ariaRowIndex = rowIndex + 2; // aria attrs are base-1 and also count header as a row
         row.inputType = getRowSelectionInputType(state);
         row.isSelected = isSelectedRow(state, row.key);
         row.ariaSelected = row.isSelected ? 'true' : false;
@@ -142,10 +143,10 @@ export function updateRowsAndCellIndexes() {
         row.classnames = resolveRowClassNames(row);
         Object.assign(row, getRowStateForTree(rowData, state));
         row.tabIndex = -1;
-        if (_virtualize) {
+        if (virtualize) {
             row.style = styleToString({
                 position: 'absolute',
-                top: `${rowIndex * DEFAULT_ROW_HEIGHT}px`,
+                top: `${rowIndex * rowHeight}px`,
             });
         }
 
@@ -402,7 +403,7 @@ function computeCellEditable(row, column) {
  * @param {object} row - a row data object stored in datatable state. Must be truthy.
  * @param {object} column - a column data object stored in datatable state. Must be truthy.
  */
-function isCellEditable(row, column) {
+export function isCellEditable(row, column) {
     return !!resolveAttributeValue(column.editable, row);
 }
 

package/src/lightning/datatable/sort.js

@@ -10,8 +10,8 @@ const VALID_SORT_DIRECTIONS = {
  * Determines if the supplied sort direction is valid.
  * Refer to `VALID_SORT_DIRECTIONS` for valid solid directions.
  *
- * @param {string} value The sort direction to validate
- * @return {boolean} Whether the supplied sort direction is valid
+ * @param {String} value The sort direction to validate
+ * @returns {Boolean} Whether the supplied sort direction is valid
  */
 export function isValidSortDirection(value) {
     return !!VALID_SORT_DIRECTIONS[value];
@@ -22,7 +22,7 @@ export function isValidSortDirection(value) {
  * the default sort direction is applied first. Clicking again reverses it
  *
  * @param {Object} state The current datatable state
- * @return {string} The default sort direction
+ * @returns {String} The default sort direction
  */
 export function getDefaultSortDirection(state) {
     return state.defaultSortDirection;
@@ -33,7 +33,7 @@ export function getDefaultSortDirection(state) {
  * the default sort direction is applied first. Clicking again reverses it
  *
  * @param {Object} state The current datatable state
- * @param {string} value The value to update the default sort direction to
+ * @param {String} value The value to update the default sort direction to
  */
 export function setDefaultSortDirection(state, value) {
     assert(
@@ -51,7 +51,7 @@ export function setDefaultSortDirection(state, value) {
  * Gets the current sort direction
  *
  * @param {Object} state The current datatable state
- * @return {string} The current sort direction
+ * @returns {String} The current sort direction
  */
 export function getSortedDirection(state) {
     return state.sortedDirection;
@@ -64,7 +64,7 @@ export function getSortedDirection(state) {
  * `sortedDirection` will be `undefined`
  *
  * @param {Object} state The current datatable state
- * @param {string} value The value to update the sort direction to
+ * @param {String} value The value to update the sort direction to
  */
 export function setSortedDirection(state, value) {
     assert(
@@ -81,7 +81,7 @@ export function setSortedDirection(state, value) {
  * of a given column in the datatable
  *
  * @param {Object} state The current datatable state
- * @return {string} The current sort value
+ * @returns {String} The current sort value
  */
 export function getSortedBy(state) {
     return state.sortedBy;
@@ -94,7 +94,7 @@ export function getSortedBy(state) {
  * to `undefined`
  *
  * @param {Object} state The current datatable state
- * @param {string} value The value to update the sort state to
+ * @param {String} value The value to update the sort state to
  */
 export function setSortedBy(state, value) {
     if (typeof value === 'string') {

package/src/lightning/datatable/state.js

@@ -3,7 +3,8 @@
  * The state object is further manipulated while it is passed around by datatable
  *
  * TODO: Check to see if there are other items that need to be added to the default state
- * @returns {Object} - intial state of the datatable
+ *
+ * @returns {Object} Intial state of the datatable
  */
 export const getDefaultState = function () {
     return {
@@ -55,8 +56,19 @@ export const getDefaultState = function () {
         // table render mode
         renderModeRoleBased: false,
 
-        // viewport rendering
+        // viewport rendering and virtualization
         enableViewportRendering: undefined,
+        virtualize: '',
+        bufferSize: 5, // number of extra rows rendered on each side outside of viewport
+        rowHeight: 30.5,
+        renderedRowCount: 0,
+        firstVisibleIndex: 0, // first row that should be visible in viewport
+        fixedHeight: false, // by default, assume that not all rows are same height
+        heightCache: {}, // cache of row heights
+        offsets: [0],
+        offsetRanges: [],
+        firstRowOffset: 0, // how many pixels scrollTop is from top of first visible row
+        tableHeight: 0,
 
         // inline edit
         inlineEdit: {

package/src/lightning/datatable/templates/div/div.html

@@ -35,19 +35,25 @@
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
                     aria-rowcount={ariaRowCount}
-                    aria-colcount={ariaColCount}>
+                    aria-colcount={ariaColCount}
+                    data-num-rows={data.length}
+                    data-num-selected-rows={selectedRows.length}
+                    data-last-rendered-row={_lastRenderedRow}>
                     <template if:false={hasValidKeyField}>
                         <!-- empty since keyField wasn't provided -->
                     </template>
                     <template if:true={hasValidKeyField}>
                         <!-- Corresponds to <thead> -->
-                        <div role="rowgroup">
+                        <div
+                            data-rowgroup-header
+                            role="rowgroup">
                             <!-- TODO: Fix aria-rowindex to not be hardcoded -->
                             <!-- TODO: might need to move the table-header class out or rename -->
                             <!-- Column Header Row -->
                             <div class="slds-line-height_reset table-header"
                                 role="row"
                                 aria-rowindex="1"
+                                data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
@@ -58,6 +64,7 @@
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
+                                        data-col-key-value={def.colKeyValue}
                                         key={def.colKeyValue}>
 
                                         <template if:true={def.fixedWidth}>
@@ -106,8 +113,11 @@
                             </div>
                         </div>
                         <!-- Corresponds to <tbody> -->
-                        <div style={computedTbodyStyle} role="rowgroup">
-                            <template for:each={renderedRows} for:item="row" for:index="rowIndex">
+                        <div
+                            data-rowgroup-body
+                            role="rowgroup"
+                            style={computedTbodyStyle}>
+                            <template for:each={renderedRows} for:item="row">
                                 <!-- Data Rows -->
                                 <div class={row.classnames}
                                     role="row"
@@ -121,126 +131,130 @@
                                     aria-posinset={row.posInSet}
                                     aria-rowindex={row.ariaRowIndex}
                                     style={row.style}
-                                    tabindex={row.tabIndex}>
-                                    <template for:each={row.cells} for:item="cell">
-                                        <template if:true={cell.isCheckbox}>
-                                            <!-- Checkbox Cell -->
-                                            <div class={cell.class}
-                                                style={cell.style}
-                                                role="gridcell"
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-checkbox
-                                                    dt-context-id={_datatableId}
-                                                    has-focus={cell.hasFocus}
+                                    tabindex={row.tabIndex}
+                                    data-row-number={row.rowNumber}>
+                                        <template for:each={row.cells} for:item="cell">
+                                            <template if:true={cell.isCheckbox}>
+                                                <!-- Checkbox Cell -->
+                                                <div class={cell.class}
+                                                    style={cell.style}
+                                                    role="gridcell"
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    key={cell.key}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    row-index={rowIndex}
-                                                    type={row.inputType}
-                                                    is-selected={row.isSelected}
-                                                    is-disabled={row.isDisabled}
-                                                    column-header-id={computedCheckboxColumnHeaderId}>
-                                                </lightning-primitive-cell-checkbox>
-                                            </div>
-                                        </template>
-                                        <template if:true={cell.isDataTypeScope}>
-                                            <!-- Row Header Cell -->
-                                            <div class={cell.class}
-                                                role="rowheader"
-                                                style={cell.style}
-                                                aria-selected={cell.ariaSelected}
-                                                aria-readonly={cell.ariaReadOnly}
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-checkbox
+                                                        dt-context-id={_datatableId}
+                                                        has-focus={cell.hasFocus}
+                                                        data-label={cell.dataLabel}
+                                                        key={cell.key}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        row-index={row.rowIndex}
+                                                        type={row.inputType}
+                                                        is-selected={row.isSelected}
+                                                        is-disabled={row.isDisabled}
+                                                        column-header-id={computedCheckboxColumnHeaderId}>
+                                                    </lightning-primitive-cell-checkbox>
+                                                </div>
+                                            </template>
+                                            <template if:true={cell.isDataTypeScope}>
+                                                <!-- Row Header Cell -->
+                                                <div class={cell.class}
+                                                    role="rowheader"
+                                                    style={cell.style}
                                                     aria-selected={cell.ariaSelected}
+                                                    aria-readonly={cell.ariaReadOnly}
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-error={cell.hasError}
-                                                    has-focus={cell.hasFocus}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
-                                            </div>
-                                        </template>
-                                        <template if:true={cell.isDataType}>
-                                            <!-- Non-Header Cells (Regular Data Cells) -->
-                                            <div class={cell.class}
-                                                role="gridcell"
-                                                style={cell.style}
-                                                aria-selected={cell.ariaSelected}
-                                                aria-readonly={cell.ariaReadOnly}
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-factory
+                                                        types={privateTypes}
+                                                        aria-selected={cell.ariaSelected}
+                                                        data-label={cell.dataLabel}
+                                                        alignment={cell.alignment}
+                                                        has-error={cell.hasError}
+                                                        has-focus={cell.hasFocus}
+                                                        column-label={cell.dataLabel}
+                                                        column-type={cell.columnType}
+                                                        column-sub-type={cell.columnSubType}
+                                                        wrap-text={cell.wrapText}
+                                                        wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                        key={cell.columnType}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        value={cell.value}
+                                                        icon-name={cell.iconName}
+                                                        icon-label={cell.iconLabel}
+                                                        icon-position={cell.iconPosition}
+                                                        icon-alternative-text={cell.iconAlternativeText}
+                                                        editable={cell.editable}
+                                                        display-read-only-icon={cell.displayReadOnlyIcon}
+                                                        type-attribute-0={cell.typeAttribute0}
+                                                        type-attribute-1={cell.typeAttribute1}
+                                                        type-attribute-2={cell.typeAttribute2}
+                                                        type-attribute-3={cell.typeAttribute3}
+                                                        type-attribute-4={cell.typeAttribute4}
+                                                        type-attribute-5={cell.typeAttribute5}
+                                                        type-attribute-6={cell.typeAttribute6}
+                                                        type-attribute-7={cell.typeAttribute7}
+                                                        type-attribute-8={cell.typeAttribute8}
+                                                        type-attribute-9={cell.typeAttribute9}
+                                                        type-attribute-10={cell.typeAttribute10}
+                                                        type-attribute-21={cell.typeAttribute21}
+                                                        type-attribute-22={cell.typeAttribute22}>
+                                                    </lightning-primitive-cell-factory>
+                                                </div>
+                                            </template>
+                                            <template if:true={cell.isDataType}>
+                                                <!-- Non-Header Cells (Regular Data Cells) -->
+                                                <div class={cell.class}
+                                                    role="gridcell"
+                                                    style={cell.style}
                                                     aria-selected={cell.ariaSelected}
+                                                    aria-readonly={cell.ariaReadOnly}
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-focus={cell.hasFocus}
-                                                    has-error={cell.hasError}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
-                                            </div>
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-factory
+                                                        types={privateTypes}
+                                                        aria-selected={cell.ariaSelected}
+                                                        data-label={cell.dataLabel}
+                                                        alignment={cell.alignment}
+                                                        has-focus={cell.hasFocus}
+                                                        has-error={cell.hasError}
+                                                        column-label={cell.dataLabel}
+                                                        column-type={cell.columnType}
+                                                        column-sub-type={cell.columnSubType}
+                                                        wrap-text={cell.wrapText}
+                                                        wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                        key={cell.columnType}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        value={cell.value}
+                                                        icon-name={cell.iconName}
+                                                        icon-label={cell.iconLabel}
+                                                        icon-position={cell.iconPosition}
+                                                        icon-alternative-text={cell.iconAlternativeText}
+                                                        editable={cell.editable}
+                                                        display-read-only-icon={cell.displayReadOnlyIcon}
+                                                        type-attribute-0={cell.typeAttribute0}
+                                                        type-attribute-1={cell.typeAttribute1}
+                                                        type-attribute-2={cell.typeAttribute2}
+                                                        type-attribute-3={cell.typeAttribute3}
+                                                        type-attribute-4={cell.typeAttribute4}
+                                                        type-attribute-5={cell.typeAttribute5}
+                                                        type-attribute-6={cell.typeAttribute6}
+                                                        type-attribute-7={cell.typeAttribute7}
+                                                        type-attribute-8={cell.typeAttribute8}
+                                                        type-attribute-9={cell.typeAttribute9}
+                                                        type-attribute-10={cell.typeAttribute10}
+                                                        type-attribute-21={cell.typeAttribute21}
+                                                        type-attribute-22={cell.typeAttribute22}>
+                                                    </lightning-primitive-cell-factory>
+                                                </div>
                                         </template>
                                     </template>
                                 </div>

package/src/lightning/datatable/templates/table/table.html

@@ -33,7 +33,9 @@
                     onfocusout={handleTableFocusOut}
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
-                    aria-rowcount={ariaRowCount}>
+                    data-num-rows={data.length}
+                    data-num-selected-rows={selectedRows.length}
+                    data-last-rendered-row={_lastRenderedRow}>
                     <template if:false={hasValidKeyField}>
                         <!-- empty since keyField wasn't provided TODO: Why is this here? Test and remove! -->
                     </template>
@@ -41,6 +43,7 @@
                         <thead>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
+                                data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
@@ -50,6 +53,7 @@
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
+                                        data-col-key-value={def.colKeyValue}
                                         key={def.colKeyValue}>
 
                                         <template if:true={def.fixedWidth}>
@@ -109,7 +113,8 @@
                                     aria-expanded={row.isExpanded}
                                     aria-setsize={row.setSize}
                                     aria-posinset={row.posInSet}
-                                    tabindex={row.tabIndex}>
+                                    tabindex={row.tabIndex}
+                                    data-row-number={row.rowNumber}>
                                     <template for:each={row.cells} for:item="cell">
                                         <template if:true={cell.isCheckbox}>
                                             <!-- Checkbox Cell -->
@@ -117,6 +122,7 @@
                                                 role="gridcell"
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-checkbox
                                                     dt-context-id={_datatableId}
@@ -142,6 +148,7 @@
                                                 scope="row"
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}
@@ -190,6 +197,7 @@
                                                 aria-readonly={cell.ariaReadOnly}
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}

package/src/lightning/datatable/tree.js

@@ -1,6 +1,13 @@
 import { getColumns } from './columns';
 import { isTreeType } from './types';
 
+/**
+ * Retrieves the default values for the tree state indicator field names.
+ * These values are used to make logic decisions later and may be updated
+ * during normal operation.
+ *
+ * @returns {Object} The default tree state indicator field names
+ */
 export function getTreeStateIndicatorFieldNames() {
     return {
         children: 'hasChildren',
@@ -11,6 +18,12 @@ export function getTreeStateIndicatorFieldNames() {
     };
 }
 
+/**
+ * Determines if any of the columns in the datatable are of a tree-type.
+ *
+ * @param {Object} state The datatable state
+ * @returns {Boolean} Whether any of the columns are of a tree-type
+ */
 export function hasTreeDataType(state) {
     const columns = getColumns(state);
     return columns.some((column) => {
@@ -18,6 +31,12 @@ export function hasTreeDataType(state) {
     });
 }
 
+/**
+ * Retrieves the first tree-type column from the state.
+ *
+ * @param {Object} state The datatable state
+ * @returns {Object} The first tree-type column, else `null`
+ */
 export function getStateTreeColumn(state) {
     const columns = getColumns(state);
     for (let i = 0; i < columns.length; i++) {
@@ -28,6 +47,12 @@ export function getStateTreeColumn(state) {
     return null;
 }
 
+/**
+ * Dispatches an event when a row is toggled to be expanded or collapsed.
+ *
+ * @param {String} rowKeyValue The row key being acted upon
+ * @param {Boolean} expanded The current expand/collapse state of the row
+ */
 export function fireRowToggleEvent(rowKeyValue, expanded) {
     const customEvent = new CustomEvent('privatetogglecell', {
         bubbles: true,