lightning-base-components 1.14.7-alpha → 1.15.3-alpha

package/src/lightning/datatable/__examples__/withRowActions/withRowActions.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const actions = [
     { label: 'Show details', name: 'show_details' },
@@ -23,9 +23,8 @@ export default class DatatableWithRowActions extends LightningElement {
     columns = columns;
     record = {};
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 
     handleRowAction(event) {

package/src/lightning/datatable/__examples__/withRowNumbers/generateData.js

@@ -0,0 +1,13 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: Math.floor(Math.random() * 1000000000),
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const columns = [
     { label: 'Label', fieldName: 'name' },
@@ -14,9 +14,8 @@ export default class BasicDatatable extends LightningElement {
     columns = columns;
     rowOffset = 0;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 
     increaseRowOffset() {

package/src/lightning/datatable/__wdio__/utam/utam.html

@@ -0,0 +1,32 @@
+<template>
+    <div style="height:160px">
+        <lightning-datatable
+            data-render-mode="default"
+            key-field="id"
+            columns={columns}
+            data={data}
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}
+            is-loading={loading}>
+        </lightning-datatable>
+    </div>
+    <div style="height:160px">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            columns={columns}
+            data={data}
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}
+            is-loading={loading}
+            render-mode="role-based">
+        </lightning-datatable>
+    </div>
+    
+    <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
+    <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>
+</template>

package/src/lightning/datatable/__wdio__/utam/utam.js

@@ -0,0 +1,91 @@
+import { LightningElement } from 'lwc';
+
+const data = [
+    { id: 1, name: 'Billy Simmons', age: 40, email: 'billy@salesforce.com' },
+    { id: 2, name: 'Kelsey Denesik', age: 35, email: 'kelsey@salesforce.com' },
+    { id: 3, name: 'Kyle Ruecker', age: 50, email: 'kyle@salesforce.com' },
+    {
+        id: 4,
+        name: 'Krystina Kerluke',
+        age: 37,
+        email: 'krystina@salesforce.com',
+    },
+];
+
+const actions = [
+    { label: 'Show details', name: 'show_details' },
+    { label: 'Delete', name: 'delete' },
+];
+
+const columns = [
+    { label: 'Name', fieldName: 'name' },
+    {
+        label: 'Age',
+        fieldName: 'age',
+        type: 'number',
+        sortable: true,
+        cellAttributes: { alignment: 'left' },
+    },
+    {
+        label: 'Email',
+        fieldName: 'email',
+        type: 'email',
+        hideDefaultActions: true,
+    },
+    {
+        type: 'action',
+        typeAttributes: { rowActions: actions, menuAlignment: 'right' },
+    },
+];
+
+export default class DemoApp extends LightningElement {
+    data = data;
+    columns = columns;
+    defaultSortDirection = 'asc';
+    sortDirection = 'asc';
+    sortedBy;
+    loading = false;
+
+    // Used to sort the 'Age' column
+    sortBy(field, reverse, primer) {
+        const key = primer
+            ? function (x) {
+                  return primer(x[field]);
+              }
+            : function (x) {
+                  return x[field];
+              };
+
+        return function (a, b) {
+            a = key(a);
+            b = key(b);
+            return reverse * ((a > b) - (b > a));
+        };
+    }
+
+    onHandleSort(event) {
+        const { fieldName: sortedBy, sortDirection } = event.detail;
+        const cloneData = [...this.data];
+
+        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
+        this.data = cloneData;
+        this.sortDirection = sortDirection;
+        this.sortedBy = sortedBy;
+    }
+
+    handleLoadingClick() {
+        this.loading = !this.loading;
+    }
+
+    handleMoreRowsClick() {
+        const control = [
+            {
+                id: 20,
+                name: 'Jacqueline Palmer',
+                age: 60,
+                email: 'jacqueline@salesforce.com',
+            },
+        ];
+        this.data = this.data.concat(this.data).concat(control);
+    }
+}

package/src/lightning/datatable/__wdio__/utam/utam.spec.js

@@ -0,0 +1,214 @@
+const Datatable = require('pageobjects/datatable');
+const Button = require('pageobjects/button');
+
+const tableTypes = {
+    default: '[data-render-mode="default"]',
+    roleBased: '[data-render-mode="role-based"]',
+};
+
+describe('Datatable UTAM Page Object Tests', () => {
+    Object.keys(tableTypes).forEach((type) => {
+        describe(`${type} table`, () => {
+            const TABLE_SELECTOR = tableTypes[type];
+
+            let root;
+
+            beforeEach(async () => {
+                await browser.url('/datatable/utam');
+                root = await $('datatable-utam');
+                await root.waitForDisplayed();
+            });
+
+            it('should get the cell value by row and column index', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByIndex(1, 2);
+                expect(cellValue).toBe('Billy Simmons');
+            });
+            it('should get the cell value by row index and column label', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByLabel(2, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should get the number of rows in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getNumRows();
+                expect(cellValue).toBe(4);
+            });
+            it('should tell if the table has any rows', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.hasRows();
+                expect(cellValue).toBe(true);
+            });
+            it('should toggle selection of row - comprehensive', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                for (let i = 1; i <= 4; i++) {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                }
+
+                await datatable.toggleRowSelection(1);
+                expect(await datatable.isRowSelected(1)).toBe('true');
+                [2, 3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.isRowSelected(2)).toBe('true');
+                [3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+                expect(await datatable.isRowSelected(4)).toBe('false');
+
+                await datatable.toggleRowSelection(4);
+                expect(await datatable.isRowSelected(4)).toBe('true');
+            });
+            it('should toggle selection of row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('false');
+            });
+            it('should get the number of selected rows when not all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.getNumSelectedRows()).toBe(1);
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.getNumSelectedRows()).toBe(2);
+            });
+            it('should get the number of selected rows when all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.clickSelectAllCheckbox();
+                expect(await datatable.getNumSelectedRows()).toBe(4);
+            });
+            it('should get the number of columns in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getNumColumns()).toBe(5);
+            });
+            it('should tell whether or not a column is sortable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSortableColumn('Age')).toBe(true);
+
+                // Need to speak to UTAM (about isPresent) or find a better way to write this method
+                // If column is not sortable, the test fails with the error:
+                // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
+                // expect(await datatable.isSortableColumn('Name')).toBe(false);
+            });
+            it('should tell whether or not the row is selectable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSelectableRow(1)).toBe(true);
+            });
+            it('should get the width of a column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const datatableElement = await root.shadow$(
+                    'lightning-datatable'
+                );
+                const columnHeader = await datatableElement.shadow$(
+                    '[aria-label="Name"]'
+                );
+
+                // Remove intermediate white spaces
+                let expectedWidth = await columnHeader.getAttribute('style');
+                expectedWidth = expectedWidth.replace(/\s/g, '');
+                let actualWidth = await datatable.getWidth('Name');
+                actualWidth = actualWidth.replace(/\s/g, '');
+
+                // Using indexOf in case of presence of ';'
+                expect(actualWidth.indexOf(expectedWidth) >= 0).toBe(true);
+            });
+            it('should tell whether or not a column has header actions', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasHeaderActions('Name')).toBe(true);
+                expect(await datatable.hasHeaderActions('Age')).toBe(true);
+                // false fails; need to check for true or null; check with UTAM if expected
+                expect(await datatable.hasHeaderActions('Email')).toBe(null);
+            });
+            it('should get the text of the rowheader cell of the specified row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getRowHeaderText(2)).toBe(
+                    'Kelsey Denesik'
+                );
+            });
+            it('should click column header of the sortable column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                let cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('40');
+
+                await datatable.clickSortHeaderButton('Age');
+
+                cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should tell whether the specified row has row actions or not', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasRowActionInRow(2)).toBe(true);
+            });
+            it('should tell whether or not the datatable has the loading indicator visible', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isLoading()).toBe(false);
+
+                const button = await utam.load(Button, {
+                    element: await root.shadow$('lightning-button'),
+                });
+                await button.click();
+
+                expect(await datatable.isLoading()).toBe(true);
+            });
+        });
+    });
+});

package/src/lightning/datatable/datatable.js

@@ -206,12 +206,12 @@ export default class LightningDatatable extends LightningElement {
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
     _isResizing = false; // Whether resizing is in progress
+    _lastRenderedRow = null; // last rendered row, used for UTAM
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
-    _shouldResetHeights = false;
-    _suppressBottomBar = false;
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
+    _suppressBottomBar = false;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -513,8 +513,8 @@ export default class LightningDatatable extends LightningElement {
      */
 
     /**
-     * Reserved for internal use.
      * Enables and configures advanced rendering modes.
+     * It supports properties 'bufferSize', 'fixedHeight', and 'rowHeight'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -947,13 +947,16 @@ export default class LightningDatatable extends LightningElement {
         if (virtualize) {
             const { firstIndex, lastIndex } =
                 this._renderManager.getRenderedRange(this.state);
+            this._lastRenderedRow = lastIndex + 1; // UTAM rows are 1-indexed
             // we shouldn't lose focus from re-renders caused by a change in renderedRows
             this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
         if (this.viewportRendering && !isIE11) {
+            this._lastRenderedRow = renderedRowCount;
             return rows.slice(0, renderedRowCount);
         }
+        this._lastRenderedRow = rows.length;
         return rows;
     }
 
@@ -1153,7 +1156,12 @@ export default class LightningDatatable extends LightningElement {
         if (this._shouldResetFocus) {
             // since focus is now getting reset, can change this back to false
             this._shouldResetFocus = false;
-            if (state.activeCell && state.activeCell.focused) {
+            // don't return focus to active cell when inline edit panel is open
+            if (
+                state.activeCell &&
+                state.activeCell.focused &&
+                !state.inlineEdit.isPanelVisible
+            ) {
                 const cellElement = getActiveCellElement(template, state);
                 if (
                     cellElement &&
@@ -1376,7 +1384,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
-        this._shouldResetHeights = true;
+        this.state.shouldResetHeights = true;
     }
 
     /**
@@ -1461,7 +1469,9 @@ export default class LightningDatatable extends LightningElement {
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
-        this.state.activeCell.focused = this._shouldResetFocus;
+        if (this.state.activeCell) {
+            this.state.activeCell.focused = this._shouldResetFocus;
+        }
     }
 
     /**
@@ -1646,9 +1656,9 @@ export default class LightningDatatable extends LightningElement {
 
         // no need to handle other virtualization/row height logic
         // if heights need to be reset
-        if (this._shouldResetHeights) {
+        if (this.state.shouldResetHeights) {
             resetRowHeights(state);
-            this._shouldResetHeights = false;
+            this.state.shouldResetHeights = false;
         } else if (virtualizedRows && !state.fixedHeight) {
             // if row heights aren't fixed, we need to update items
             // in state to know where rows should be positioned

package/src/lightning/datatable/inlineEdit.js

@@ -317,11 +317,6 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
 
-    // ensure that focus remains on inline edit panel instead of active cell
-    if (state.activeCell) {
-        state.activeCell.focused = false;
-    }
-
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;

package/src/lightning/datatable/inlineEditShared.js

@@ -14,8 +14,10 @@ export function getDirtyValueFromCell(state, rowKeyValue, colKeyValue) {
 
     if (
         dirtyValues &&
-        dirtyValues[rowKeyValue] &&
-        dirtyValues[rowKeyValue][colKeyValue]
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues.hasOwnProperty(rowKeyValue) &&
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues[rowKeyValue].hasOwnProperty(colKeyValue)
     ) {
         return dirtyValues[rowKeyValue][colKeyValue];
     }

package/src/lightning/datatable/keyboard.js

@@ -12,6 +12,8 @@ import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
 import { findFirstVisibleIndex } from './virtualization';
 
+import { escapeDoubleQuotes } from './utils';
+
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
 
@@ -799,7 +801,13 @@ function stillValidActiveCell(state) {
     const {
         activeCell: { rowKeyValue, colKeyValue },
     } = state;
+
+    let sortableColumns = state.columns.filter((column) => column.sortable);
+
     if (rowKeyValue === HEADER_ROW) {
+        if (state.rows.length && sortableColumns.length === 0) {
+            return false;
+        }
         return state.headerIndexes[colKeyValue] !== undefined;
     }
     return !!(
@@ -830,9 +838,7 @@ export function setFocusActiveCell(
     const { keyboardMode } = state;
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-    // if pressing tab on editable cell, focus will go to inline edit panel instead of cell
-    state.activeCell.focused =
-        !(info && isActiveCellEditable(state)) && isActiveCellValid(state);
+    state.activeCell.focused = !(info && isActiveCellValid(state));
     updateTabIndex(state, rowIndex, colIndex);
 
     let cellElement = getActiveCellElement(template, state);
@@ -1314,13 +1320,15 @@ function isHeaderRow(rowIndex) {
 }
 
 export function getDataRow(rowKeyValue) {
-    return `[data-row-key-value="${rowKeyValue}"]`;
+    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
 }
 
 export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
     const selector = `${getDataRow(
         rowKeyValue
-    )} [data-col-key-value="${colKeyValue}"] > :first-child`;
+    )} [data-col-key-value="${escapeDoubleQuotes(
+        colKeyValue
+    )}"] > :first-child`;
     return template.querySelector(selector);
 }
 

package/src/lightning/datatable/rowSelection.js

@@ -430,7 +430,7 @@ export function setSelectedRowsKeys(state, value) {
 export function syncSelectedRowsKeys(state, selectedRows) {
     let changed = false;
     const { selectedRowsKeys, keyField } = state;
-
+    const maxRowSelection = getMaxRowSelection(state) || getRowsTotal(state);
     if (Object.keys(selectedRowsKeys).length !== selectedRows.length) {
         changed = true;
         state.selectedRowsKeys = updateSelectedRowsKeysFromSelectedRows(
@@ -446,7 +446,13 @@ export function syncSelectedRowsKeys(state, selectedRows) {
             );
         }
     }
-
+    if (maxRowSelection > 1 && changed) {
+        if (selectedRows.length < maxRowSelection) {
+            markDeselectedRowEnabled(state);
+        } else {
+            markDeselectedRowDisabled(state);
+        }
+    }
     updateBulkSelectionState(state);
 
     return {

package/src/lightning/datatable/rows.js

@@ -134,6 +134,8 @@ 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;

package/src/lightning/datatable/state.js

@@ -69,6 +69,7 @@ export const getDefaultState = function () {
         offsetRanges: [],
         firstRowOffset: 0, // how many pixels scrollTop is from top of first visible row
         tableHeight: 0,
+        shouldResetHeights: false,
 
         // inline edit
         inlineEdit: {

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

@@ -35,7 +35,10 @@
                     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>
@@ -128,7 +131,8 @@
                                     aria-posinset={row.posInSet}
                                     aria-rowindex={row.ariaRowIndex}
                                     style={row.style}
-                                    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 -->

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

@@ -33,12 +33,14 @@
                     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>
                     <template if:true={hasValidKeyField}>
-                        <thead>
+                        <thead data-rowgroup-header>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
                                 data-row-key-value="HEADER"
@@ -99,7 +101,7 @@
                                 </template>
                             </tr>
                         </thead>
-                        <tbody style={computedTbodyStyle}>
+                        <tbody data-rowgroup-body style={computedTbodyStyle}>
                             <template for:each={renderedRows} for:item="row" for:index="rowIndex">
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}
@@ -111,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 -->