lightning-base-components 1.13.6-alpha → 1.14.1-alpha

package/src/lightning/datatable/datatable.js

@@ -1,5 +1,6 @@
 import { LightningElement, api, track, unwrap } from 'lwc';
-import datatableTpl from './datatable.html';
+import tableTemplate from './templates/table/table.html';
+import divTemplate from './templates/div/div.html';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -10,7 +11,8 @@ import {
 } from 'lightning/utilsPrivate';
 import { LightningDatatableResizeObserver } from './datatableResizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
-import { generateHeaderIndexes, getDefaultState } from './normalizer';
+import { getDefaultState } from './state';
+import { getColumns, normalizeColumns, generateHeaderIndexes } from './columns';
 import {
     setData,
     getData,
@@ -18,6 +20,8 @@ import {
     setKeyField,
     getKeyField,
     hasValidKeyField,
+    updateCellClassForRoleBasedMode,
+    recomputeCellStyles,
 } from './rows';
 import {
     isResizeColumnDisabled,
@@ -31,7 +35,7 @@ import {
     getColumnsWidths,
     resizeColumnWithDelta,
     getCustomerColumnWidths,
-    getTableWidthStyle,
+    getCSSWidthStyleOfTable,
     updateColumnWidthsMetadata,
     getResizerDefaultState,
 } from './resizer';
@@ -52,7 +56,7 @@ import {
 } from './selector';
 import {
     syncActiveCell,
-    handleCellKeydown,
+    handleKeydownOnCell,
     updateActiveCell,
     setBlurActiveCell,
     setFocusActiveCell,
@@ -63,7 +67,7 @@ import {
     updateTabIndexActiveRow,
     unsetRowNavigationMode,
     updateRowNavigationMode,
-    handleDatatableLosedFocus,
+    handleDatatableFocusOut,
     handleDatatableFocusIn,
     updateTabIndexRow,
     getIndexesActiveCell,
@@ -73,7 +77,7 @@ import {
     resetCellToFocusFromPrev,
     datatableHasFocus,
     setCellClickedForFocus,
-    handleKeyDown,
+    handleKeydownOnTable,
     addFocusStylesToActiveCell,
     refocusCellElement,
 } from './keyboard';
@@ -83,7 +87,6 @@ import {
     hasRowNumberColumn,
     setShowRowNumberColumn,
 } from './rowNumber';
-import { getColumns, normalizeColumns } from './columns';
 import {
     handleLoadMoreCheck,
     isInfiniteLoadingEnabled,
@@ -142,8 +145,6 @@ import DatatableTypes from './types';
 import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
 import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
 
-const typesMap = new WeakMap();
-
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
     ariaLiveActionMode: labelAriaLiveActionMode,
@@ -153,53 +154,87 @@ const i18n = {
  * A table that displays rows and columns of data.
  */
 export default class LightningDatatable extends LightningElement {
-    privateSuppressBottomBar = false;
+    /**
+     * Usage of State Object vs Private Variable:
+     * This is by no means a definitive set of rules and we should add/modify these
+     * guidelines with time as we work on the datatable and find specific reasons.
+     *
+     * In general, the main reason for using the `state` object is to take advantage
+     * of LWC's reactivity. In the `state` object we store properties that are required
+     * to trigger an update/re-render of the datatable.
+     *
+     * There are no observable perf implications of using the state object vs
+     * private variables. See W-10006095 for details.
+     *
+     * Guidelines:
+     *     1. If possible, avoid adding properties to the state object if it does not
+     *        trigger an update or re-render of the datatable.
+     *     2. You may look to add properties to the state object if that property is
+     *        required in different areas of the datatable and/or if not adding to the
+     *        state will significantly add to the complexity of the component.
+     *     3. Goal: Breakdown the 'state' object - Right now the state object contains a
+     *        lot of metadata and we pass around the monolith everywhere even when most
+     *        of the information is not required. If you have the opportunity, look to
+     *        separate or break down the state object even if that means adding a new
+     *        tracked object. This will help us logically separate various modules over
+     *        time and pass around only necessary information leading to cleaner,
+     *        more readable and organized code.
+     */
+
+    // Tracked Objects
     @track state = getDefaultState();
+    @track widthsData = getResizerDefaultState();
 
+    // Private Variables
+    _actionsMinHeightStyle = ''; // Min height required while actions menu is opened
     _columns = [];
-    _hideCheckboxColumn = false;
-    _draftValues = [];
-    customerSelectedRows = null;
-    privateDatatableId = generateUniqueId('lgt-datatable');
     _columnWidthsMode = 'fixed';
-    @track widthsData = getResizerDefaultState();
+    _customerSelectedRows = null;
+    _datatableId = generateUniqueId('lgt-datatable');
+    _draftValues = [];
+    _isResizing = false; // Whether resizing is in progress
+    _privateTypes = {};
+    _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
+    _renderMode = 'table';
     _renderedRowCount = 0;
+    _suppressBottomBar = false;
+
+    /************************* PUBLIC PROPERTIES *************************/
 
     /**
      * Public property for passing `aria-label` down to the child table element.
      */
-    @track ariaLabel = null;
+    ariaLabel = null;
 
     /**
      * Public property for passing `aria-labelledby` down to the child table element.
      */
-    @track ariaLabelledBy = null;
-
-    // Whether resizing is in progress
-    _isResizing = false;
-
-    constructor() {
-        super();
-        if (!typesMap.has(this.constructor)) {
-            const privateTypes = new DatatableTypes(
-                this.constructor.customTypes
-            );
-            typesMap.set(this.constructor, privateTypes);
-        }
-        this._columnWidthManager = new ColumnWidthManager(this.widthsData);
-        this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
+    ariaLabelledBy = null;
 
-        this._renderManager = new RenderManager();
+    /**
+     * Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths.
+     * Set to 'auto' for column widths that are based on the width of the column content and the table width. The default is 'fixed'.
+     * @type {string}
+     * @default fixed
+     */
+    @api
+    get columnWidthsMode() {
+        return this.widthsData.columnWidthsMode;
     }
 
-    get privateTypes() {
-        return typesMap.get(this.constructor);
-    }
+    set columnWidthsMode(value) {
+        const normalizedValue = normalizeString(value, {
+            fallbackValue: 'fixed',
+            validValues: ['fixed', 'auto'],
+        });
+        this._columnWidthManager.columnWidthMode = normalizedValue;
 
-    set columns(value) {
-        this._columns = Array.isArray(value) ? value : [];
-        this.updateColumns(this._columns);
-        this._columnWidthManager.handleColumnsChange(getColumns(this.state));
+        const { state, widthsData } = this;
+        if (widthsData.columnWidthsMode !== normalizedValue) {
+            this._columnWidthManager.handleWidthModeChange(getColumns(state));
+        }
+
+        widthsData.columnWidthsMode = normalizedValue;
     }
 
     /**
@@ -213,22 +248,20 @@ export default class LightningDatatable extends LightningElement {
         return this._columns;
     }
 
+    set columns(value) {
+        this._columns = Array.isArray(value) ? value : [];
+        this.updateColumns(this._columns);
+        this._columnWidthManager.handleColumnsChange(getColumns(this.state));
+    }
+
     /**
-     * This value specifies the number of lines after which the
-     * content will be cut off and hidden. It must be at least 1 or more.
-     * The text in the last line is truncated and shown with an ellipsis.
-     * @type {integer}
+     * The array of data to be displayed.
+     * @type {array}
      */
     @api
-    get wrapTextMaxLines() {
-        return this.state.wrapTextMaxLines;
-    }
-
-    set wrapTextMaxLines(value) {
-        const { state } = this;
-        setWrapTextMaxLines(state, value);
-        this._columnWidthManager.wrapTextMaxLines = state.wrapTextMaxLines;
-        this.updateRowsAndCellIndexes(this.state);
+    // eslint-disable-next-line @lwc/lwc/valid-api
+    get data() {
+        return getData(this.state);
     }
 
     set data(value) {
@@ -245,52 +278,75 @@ export default class LightningDatatable extends LightningElement {
         if (hasValidKeyField(this.state)) {
             this.updateRowsState();
         }
-        if (this.customerSelectedRows) {
-            this.setSelectedRows(this.customerSelectedRows);
+        if (this._customerSelectedRows) {
+            this.setSelectedRows(this._customerSelectedRows);
         }
     }
 
     /**
-     * The array of data to be displayed.
-     * @type {array}
+     * Specifies the default sorting direction on an unsorted column.
+     * Valid options include 'asc' and 'desc'.
+     * The default is 'asc' for sorting in ascending order.
+     * @type {string}
+     * @default asc
      */
     @api
-    // eslint-disable-next-line @lwc/lwc/valid-api
-    get data() {
-        return getData(this.state);
+    get defaultSortDirection() {
+        return getDefaultSortDirection(this.state);
     }
 
-    set keyField(value) {
-        setKeyField(this.state, value);
-        setDirtyValues(this.state, this._draftValues);
-        this.updateRowsState();
+    set defaultSortDirection(value) {
+        setDefaultSortDirection(this.state, value);
+        updateSorting(this.state);
     }
 
     /**
-     * Required for better performance.
-     * Associates each row with a unique ID.
-     * @type {string}
-     * @required
+     * The current values per row that are provided during inline edit.
+     * @type {object}
      */
     @api
-    get keyField() {
-        return getKeyField(this.state);
+    get draftValues() {
+        return getDirtyValues(this.state);
     }
 
-    set hideCheckboxColumn(value) {
-        const { state } = this;
-        const normalizedValue = normalizeBoolean(value);
-        this._hideCheckboxColumn = normalizedValue;
+    set draftValues(value) {
+        this._draftValues = value;
+        setDirtyValues(this.state, value);
 
-        this._columnWidthManager.handleCheckboxColumnChange(
-            state.hideCheckboxColumn,
-            normalizedValue,
-            getColumns(state)
-        );
+        if (hasValidKeyField(this.state)) {
+            this.updateRowsAndCellIndexes(this.state);
+        }
+    }
 
-        this.state.hideCheckboxColumn = normalizeBoolean(value);
-        // update the columns metadata again to update the status.
-        this.updateColumns(this._columns);
+    /**
+     * If present, you can load a subset of data and then display more
+     * when users scroll to the end of the table.
+     * Use with the onloadmore event handler to retrieve more data.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get enableInfiniteLoading() {
+        return isInfiniteLoadingEnabled(this.state);
+    }
+
+    set enableInfiniteLoading(value) {
+        setInfiniteLoading(this.state, value);
+    }
+
+    /**
+     * Specifies an object containing information about cell level, row level, and table level errors.
+     * When it's set, error messages are displayed on the table accordingly.
+     * @type {object}
+     */
+    @api
+    get errors() {
+        return getErrors(this.state);
+    }
+
+    set errors(value) {
+        setErrors(this.state, value);
+        this.updateRowsState();
     }
 
     /**
@@ -300,85 +356,83 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get hideCheckboxColumn() {
-        return this._hideCheckboxColumn;
+        return this.state.hideCheckboxColumn;
     }
 
-    set showRowNumberColumn(value) {
+    set hideCheckboxColumn(value) {
         const { state } = this;
+        const normalizedValue = normalizeBoolean(value);
 
-        this._columnWidthManager.handleRowNumberColumnChange(
-            getRowNumberOffset(state),
-            value,
+        this._columnWidthManager.handleCheckboxColumnChange(
+            state.hideCheckboxColumn,
+            normalizedValue,
             getColumns(state)
         );
 
-        setShowRowNumberColumn(state, value);
+        this.state.hideCheckboxColumn = normalizedValue;
+        // update the columns metadata again to update the status.
         this.updateColumns(this._columns);
     }
 
     /**
-     * If present, the row numbers are shown in the first column.
+     * If present, the table header is hidden.
      * @type {boolean}
      * @default false
      */
     @api
-    get showRowNumberColumn() {
-        return hasRowNumberColumn(this.state);
+    get hideTableHeader() {
+        return this.state.hideTableHeader;
     }
 
-    set rowNumberOffset(value) {
-        const { state, widthsData } = this;
-        setRowNumberOffset(state, value);
-
-        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
+    set hideTableHeader(value) {
+        this.state.hideTableHeader = normalizeBoolean(value);
     }
 
     /**
-     * Determines where to start counting the row number.
-     * The default is 0.
-     * @type {number}
-     * @default 0
+     * If present, a spinner is shown to indicate that more data is loading.
+     * @type {boolean}
+     * @default false
      */
     @api
-    get rowNumberOffset() {
-        return getRowNumberOffset(this.state);
+    get isLoading() {
+        return isLoading(this.state);
     }
 
-    set resizeColumnDisabled(value) {
-        setResizeColumnDisabled(this.widthsData, value);
+    set isLoading(value) {
+        setLoading(this.state, value);
     }
 
     /**
-     * If present, column resizing is disabled.
-     * @type {boolean}
-     * @default false
+     * Required for better performance.
+     * Associates each row with a unique ID.
+     * @type {string}
+     * @required
      */
     @api
-    get resizeColumnDisabled() {
-        return isResizeColumnDisabled(this.widthsData);
+    get keyField() {
+        return getKeyField(this.state);
     }
 
-    set minColumnWidth(value) {
-        const { state, widthsData } = this;
-        setMinColumnWidth(state, widthsData, value);
-        this._columnWidthManager.minColumnWidth = this.minColumnWidth;
+    set keyField(value) {
+        setKeyField(this.state, value);
+        setDirtyValues(this.state, this._draftValues);
+        this.updateRowsState();
     }
 
     /**
-     * The minimum width for all columns.
-     * The default is 50px.
+     * Determines when to trigger infinite loading based on
+     * how many pixels the table's scroll position is from the bottom of the table.
+     * The default is 20.
      * @type {number}
-     * @default 50px
+     * @default 20
      */
     @api
-    get minColumnWidth() {
-        return getMinColumnWidth(this.widthsData);
+    get loadMoreOffset() {
+        return getLoadMoreOffset(this.state);
     }
 
-    set maxColumnWidth(value) {
-        const { state, widthsData } = this;
-        setMaxColumnWidth(state, widthsData, value);
-        this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
+    set loadMoreOffset(value) {
+        setLoadMoreOffset(this.state, value);
     }
 
     /**
@@ -392,175 +446,144 @@ export default class LightningDatatable extends LightningElement {
         return getMaxColumnWidth(this.widthsData);
     }
 
-    set resizeStep(value) {
-        setResizeStep(this.widthsData, value);
+    set maxColumnWidth(value) {
+        const { state, widthsData } = this;
+        setMaxColumnWidth(getColumns(state), widthsData, value);
+        this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
     }
 
     /**
-     * The width to resize the column when a user presses left or right arrow.
-     * The default is 10px.
+     * The maximum number of rows that can be selected.
+     * Checkboxes are used for selection by default,
+     * and radio buttons are used when maxRowSelection is 1.
      * @type {number}
-     * @default 10px
      */
     @api
-    get resizeStep() {
-        return getResizeStep(this.widthsData);
+    get maxRowSelection() {
+        return getMaxRowSelection(this.state);
     }
 
-    set sortedBy(value) {
-        setSortedBy(this.state, value);
-        updateSorting(this.state);
+    set maxRowSelection(value) {
+        const previousSelectionLength = getCurrentSelectionLength(this.state);
+        setMaxRowSelection(this.state, value);
+        if (previousSelectionLength > 0) {
+            this.fireSelectedRowsChange(this.getSelectedRows());
+        }
     }
 
     /**
-     * The column key or fieldName that controls the sorting order.
-     * Sort the data using the onsort event handler.
-     * @type {string}
+     * The minimum width for all columns.
+     * The default is 50px.
+     * @type {number}
+     * @default 50px
      */
     @api
-    get sortedBy() {
-        return getSortedBy(this.state);
-    }
-
-    set sortedDirection(value) {
-        setSortedDirection(this.state, value);
-        updateSorting(this.state);
+    get minColumnWidth() {
+        return getMinColumnWidth(this.widthsData);
     }
 
-    /**
-     * Specifies the sorting direction.
-     * Sort the data using the onsort event handler.
-     * Valid options include 'asc' and 'desc'.
-     * @type {string}
-     */
-    @api
-    get sortedDirection() {
-        return getSortedDirection(this.state);
-    }
-
-    set defaultSortDirection(value) {
-        setDefaultSortDirection(this.state, value);
-        updateSorting(this.state);
+    set minColumnWidth(value) {
+        const { state, widthsData } = this;
+        setMinColumnWidth(getColumns(state), widthsData, value);
+        this._columnWidthManager.minColumnWidth = this.minColumnWidth;
     }
 
     /**
-     * Specifies the default sorting direction on an unsorted column.
-     * Valid options include 'asc' and 'desc'.
-     * The default is 'asc' for sorting in ascending order.
-     * @type {string}
-     * @default asc
+     * @typedef RenderManagerConfig
+     * @type {object}
+     * @property {boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
+     * @property {number} rowHeight - Specifies the height of a row, in px
      */
-    @api
-    get defaultSortDirection() {
-        return getDefaultSortDirection(this.state);
-    }
-
-    set enableInfiniteLoading(value) {
-        setInfiniteLoading(this.state, value);
-    }
 
     /**
-     * If present, you can load a subset of data and then display more
-     * when users scroll to the end of the table.
-     * Use with the onloadmore event handler to retrieve more data.
-     * @type {boolean}
-     * @default false
+     * Reserved for internal use.
+     * Enables and configures advanced rendering modes.
+     *
+     * @type {RenderManagerConfig} value - config object for datatable rendering
      */
     @api
-    get enableInfiniteLoading() {
-        return isInfiniteLoadingEnabled(this.state);
+    get renderConfig() {
+        return this._renderConfig;
     }
 
-    set loadMoreOffset(value) {
-        setLoadMoreOffset(this.state, value);
+    set renderConfig(value) {
+        if (typeof value === 'object' && !isIE11) {
+            const enableViewportRendering = value.viewportRendering;
+            setViewportRendering(this.state, enableViewportRendering);
+
+            this._renderManager.configure(this, value);
+            this._renderConfig = value;
+        }
     }
 
     /**
-     * Determines when to trigger infinite loading based on
-     * how many pixels the table's scroll position is from the bottom of the table.
-     * The default is 20.
-     * @type {number}
-     * @default 20
+     * Allows developer to opt-in to a role-based table.
+     * Allowed options - "role-based" or "default"
+     * `role-based` -> Renders <div>
+     * `default`    -> Renders <table>
+     */
+    /**
+     * Reserved for internal use.
      */
     @api
-    get loadMoreOffset() {
-        return getLoadMoreOffset(this.state);
+    get renderMode() {
+        return this._renderMode;
     }
 
-    set isLoading(value) {
-        setLoading(this.state, value);
+    set renderMode(value) {
+        this._renderMode = normalizeString(value, {
+            fallbackValue: 'default',
+            validValues: ['default', 'role-based'],
+        });
+        this.state.renderModeRoleBased = this._renderMode === 'role-based';
+        updateCellClassForRoleBasedMode(this.state);
     }
 
     /**
-     * If present, a spinner is shown to indicate that more data is loading.
+     * If present, column resizing is disabled.
      * @type {boolean}
      * @default false
      */
     @api
-    get isLoading() {
-        return isLoading(this.state);
+    get resizeColumnDisabled() {
+        return isResizeColumnDisabled(this.widthsData);
     }
 
-    set renderConfig(value) {
-        if (typeof value === 'object' && !isIE11) {
-            const enableViewportRendering = value.viewportRendering;
-            setViewportRendering(this.state, enableViewportRendering);
-
-            this._renderManager.configure(this, value);
-            this._renderConfig = value;
-        }
+    set resizeColumnDisabled(value) {
+        setResizeColumnDisabled(this.widthsData, value);
     }
 
     /**
-     * @typedef RenderManagerConfig
-     * @type {object}
-     * @property {boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
-     * @property {number} rowHeight - Specifies the height of a row, in px
-     */
-
-    /**
-     * Reserved for internal use.
-     * Enables and configures advanced rendering modes.
-     *
-     * @type {RenderManagerConfig} value - config object for datatable rendering
+     * The width to resize the column when a user presses left or right arrow.
+     * The default is 10px.
+     * @type {number}
+     * @default 10px
      */
     @api
-    get renderConfig() {
-        return this._renderConfig;
-    }
-
-    get viewportRendering() {
-        return isViewportRenderingEnabled(this.state);
-    }
-
-    get renderedRows() {
-        if (this.viewportRendering && !isIE11) {
-            return this.state.rows.slice(0, this._renderedRowCount);
-        }
-        return this.state.rows;
+    get resizeStep() {
+        return getResizeStep(this.widthsData);
     }
 
-    set maxRowSelection(value) {
-        const previousSelectionLenght = getCurrentSelectionLength(this.state);
-        setMaxRowSelection(this.state, value);
-        if (previousSelectionLenght > 0) {
-            this.fireSelectedRowsChange(this.getSelectedRows());
-        }
+    set resizeStep(value) {
+        setResizeStep(this.widthsData, value);
     }
 
     /**
-     * The maximum number of rows that can be selected.
-     * Checkboxes are used for selection by default,
-     * and radio buttons are used when maxRowSelection is 1.
+     * Determines where to start counting the row number.
+     * The default is 0.
      * @type {number}
+     * @default 0
      */
     @api
-    get maxRowSelection() {
-        return getMaxRowSelection(this.state);
+    get rowNumberOffset() {
+        return getRowNumberOffset(this.state);
     }
-    set selectedRows(value) {
-        this.customerSelectedRows = value;
-        this.setSelectedRows(value);
+
+    set rowNumberOffset(value) {
+        const { state, widthsData } = this;
+        setRowNumberOffset(state, value);
+
+        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
     }
 
     /**
@@ -572,66 +595,63 @@ export default class LightningDatatable extends LightningElement {
         return getSelectedRowsKeys(this.state);
     }
 
-    set errors(value) {
-        setErrors(this.state, value);
-        this.updateRowsState();
+    set selectedRows(value) {
+        this._customerSelectedRows = value;
+        this.setSelectedRows(value);
     }
 
     /**
-     * Specifies an object containing information about cell level, row level, and table level errors.
-     * When it's set, error messages are displayed on the table accordingly.
-     * @type {object}
+     * If present, the row numbers are shown in the first column.
+     * @type {boolean}
+     * @default false
      */
     @api
-    get errors() {
-        return getErrors(this.state);
+    get showRowNumberColumn() {
+        return hasRowNumberColumn(this.state);
     }
 
-    /**
-     * The current values per row that are provided during inline edit.
-     * @type {object}
-     */
-    @api
-    get draftValues() {
-        return getDirtyValues(this.state);
-    }
+    set showRowNumberColumn(value) {
+        const { state, _columns } = this;
 
-    set draftValues(value) {
-        this._draftValues = value;
-        setDirtyValues(this.state, value);
+        this._columnWidthManager.handleRowNumberColumnChange(
+            getRowNumberOffset(state),
+            value,
+            getColumns(state)
+        );
 
-        if (hasValidKeyField(this.state)) {
-            this.updateRowsAndCellIndexes(this.state);
-        }
+        setShowRowNumberColumn(state, value);
+        this.updateColumns(_columns);
     }
 
     /**
-     * If present, the table header is hidden.
-     * @type {boolean}
-     * @default false
+     * The column key or fieldName that controls the sorting order.
+     * Sort the data using the onsort event handler.
+     * @type {string}
      */
     @api
-    get hideTableHeader() {
-        return this.state.hideTableHeader;
+    get sortedBy() {
+        return getSortedBy(this.state);
     }
 
-    set hideTableHeader(value) {
-        this.state.hideTableHeader = !!value;
+    set sortedBy(value) {
+        setSortedBy(this.state, value);
+        updateSorting(this.state);
     }
 
-    get hasValidKeyField() {
-        if (hasValidKeyField(this.state)) {
-            return true;
-        }
-        // eslint-disable-next-line no-console
-        console.error(
-            `The "keyField" is a required attribute of lightning:datatable.`
-        );
-        return false;
+    /**
+     * Specifies the sorting direction.
+     * Sort the data using the onsort event handler.
+     * Valid options include 'asc' and 'desc'.
+     * @type {string}
+     */
+    @api
+    get sortedDirection() {
+        return getSortedDirection(this.state);
     }
 
-    get showSelectAllCheckbox() {
-        return !getHideSelectAllCheckbox(this.state);
+    set sortedDirection(value) {
+        setSortedDirection(this.state, value);
+        updateSorting(this.state);
     }
 
     /**
@@ -641,50 +661,298 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get suppressBottomBar() {
-        return this.privateSuppressBottomBar;
+        return this._suppressBottomBar;
     }
 
     set suppressBottomBar(value) {
-        this.privateSuppressBottomBar = !!value;
-    }
-
-    set columnWidthsMode(value) {
-        const normalizedValue = normalizeString(value, {
-            fallbackValue: 'fixed',
-            validValues: ['fixed', 'auto'],
-        });
-        this._columnWidthManager.columnWidthMode = normalizedValue;
-
-        const { state, widthsData } = this;
-        if (widthsData.columnWidthsMode !== normalizedValue) {
-            this._columnWidthManager.handleWidthModeChange(getColumns(state));
-        }
-
-        widthsData.columnWidthsMode = normalizedValue;
+        this._suppressBottomBar = normalizeBoolean(value);
     }
 
     /**
-     * Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths.
-     * Set to 'auto' for column widths that are based on the width of the column content and the table width. The default is 'fixed'.
-     * @type {string}
-     * @default fixed
+     * This value specifies the number of lines after which the
+     * content will be cut off and hidden. It must be at least 1 or more.
+     * The text in the last line is truncated and shown with an ellipsis.
+     * @type {integer}
      */
     @api
-    get columnWidthsMode() {
-        return this.widthsData.columnWidthsMode;
+    get wrapTextMaxLines() {
+        return this.state.wrapTextMaxLines;
     }
 
-    connectedCallback() {
-        const {
-            handleResizeColumn,
-            handleUpdateColumnSort,
-            handleCellFocusByClick,
-            handleFalseCellBlur,
-            handleSelectionCellClick,
-        } = this;
+    set wrapTextMaxLines(value) {
+        const { state } = this;
+        setWrapTextMaxLines(state, value);
+        this._columnWidthManager.wrapTextMaxLines = state.wrapTextMaxLines;
+        this.updateRowsAndCellIndexes(state);
+    }
 
-        this.template.addEventListener(
-            'selectallrows',
+    /************************** PUBLIC METHODS ***************************/
+
+    /**
+     * Returns data in each selected row.
+     * @returns {array} An array of data in each selected row.
+     */
+    @api
+    getSelectedRows() {
+        const data = unwrap(getData(this.state));
+        return this.state.rows.reduce((prev, row, index) => {
+            if (row.isSelected) {
+                prev.push(data[index]);
+            }
+            return prev;
+        }, []);
+    }
+
+    /**
+     * Opens the inline edit panel for the datatable's currently active cell. If the active cell is not
+     * editable, then the panel is instead opened for the first editable cell in the table. Given two
+     * distinct cells, C_x and C_y, C_x is considered "first" in the cell ordering if the following condition
+     * evaluates to true:
+     *
+     * (C_x.rowIndex < C_y.rowIndex) || (C_x.rowIndex === C_y.rowIndex && C_x.columnIndex < C_y.columnIndex)
+     *
+     * If there is no data in the table or there are no editable cells in the table then calling this function
+     * results in a no-op.
+     */
+    @api
+    openInlineEdit() {
+        openInlineEditOnActiveCell(this);
+    }
+
+    /************************** PRIVATE GETTERS **************************/
+
+    /**
+     * Retrieves the grid container:
+     * 1. For a table-based table, it will retrieve the <table role="grid"> element
+     * 2. For a role-based table, it will retrieve the <div role="grid"> element
+     * 3. If it is a tree grid, it will retrieve the <table role="treegrid"> element
+     */
+    get gridContainer() {
+        return (
+            this.template.querySelector('[role="grid"]') ||
+            this.template.querySelector('[role="treegrid"]')
+        );
+    }
+
+    get computedTableContainerClass() {
+        return classSet({
+            'slds-table_header-fixed_container': !this.hideTableHeader,
+            'slds-scrollable_x': !this._isResizing,
+        }).toString();
+    }
+
+    get computedTableClass() {
+        const headerType = this.hideTableHeader ? 'hidden' : 'fixed';
+        return classSet(
+            `slds-table slds-table_header-${headerType} slds-table_bordered slds-table_edit`
+        )
+            .add({
+                'slds-table_resizable-cols': this.hasResizebleColumns,
+                'slds-tree slds-table_tree': hasTreeDataType(this.state),
+            })
+            .toString();
+    }
+
+    get computedTableRole() {
+        return hasTreeDataType(this.state) ? 'treegrid' : 'grid';
+    }
+
+    get computedTableStyle() {
+        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
+            return ['table-layout:auto'].join(';');
+        }
+        return [
+            'table-layout:fixed',
+            getCSSWidthStyleOfTable(this.widthsData),
+        ].join(';');
+    }
+
+    get computedTbodyStyle() {
+        if (
+            hasRowNumberColumn(this.state) &&
+            getRowNumberOffset(this.state) >= 0
+        ) {
+            return (
+                'counter-reset: row-number ' + getRowNumberOffset(this.state)
+            );
+        }
+        return '';
+    }
+
+    /**
+     * Sets the min height and the table width on the container
+     * that wraps [role="grid"].
+     * 1. Min Height is required for the case when the header actions
+     *    dropdown is opened and there are no rows present. The dropdown
+     *    would be cut off. To prevent that, we set a min height on the table.
+     * 2. The table width is required for horizontal scroll. If the table
+     *    is overflowing horizontally, we need to set the width in order
+     *    to be able to view the remaining columns on scroll.
+     */
+    get computedScrollerStyle() {
+        const minHeight = this._actionsMinHeightStyle
+            ? `${this._actionsMinHeightStyle};`
+            : '';
+        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
+            return `${minHeight}overflow-x:auto`;
+        }
+        return `${minHeight}${getCSSWidthStyleOfTable(this.widthsData)}`;
+    }
+
+    get scrollerXStyles() {
+        const styles = {
+            height: '100%',
+        };
+
+        if (this.showStatusBar) {
+            styles['padding-bottom'] = '3rem';
+        }
+
+        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
+            styles['overflow-x'] = 'auto';
+        }
+
+        return Object.entries(styles)
+            .map(([key, value]) => key + ':' + value)
+            .join(';');
+    }
+
+    /**
+     * Private method to get datatable header element
+     * used when getting checkboxColumnHeaderId for
+     * aria-labelledby in checkbox column
+     * @returns {(HTMLElement|null)}
+     */
+    get checkboxColumnHeaderElement() {
+        return this.template.querySelector(
+            'lightning-primitive-header-factory'
+        );
+    }
+
+    /**
+     * Private method to get computedCheckboxColumnHeaderId
+     * from checkboxColumnHeaderElement for
+     * aria-labelledby in checkbox column
+     */
+    get computedCheckboxColumnHeaderId() {
+        return this.checkboxColumnHeaderElement
+            ? this.checkboxColumnHeaderElement.computedColumnHeaderId
+            : null;
+    }
+
+    get computedAriaLiveClassForNavMode() {
+        const keyboardMode = this.state.keyboardMode;
+        return classSet()
+            .add({
+                'slds-hide': keyboardMode !== 'NAVIGATION',
+                'slds-assistive-text': keyboardMode === 'NAVIGATION',
+            })
+            .toString();
+    }
+
+    get computedAriaLiveClassForActionMode() {
+        const keyboardMode = this.state.keyboardMode;
+        return classSet()
+            .add({
+                'slds-hide': keyboardMode !== 'ACTION',
+                'slds-assistive-text': keyboardMode === 'ACTION',
+            })
+            .toString();
+    }
+
+    /**
+     * aria-rowcount is the count of TRs in the table
+     * It includes the # of rows of data + column header row (since this is also a TR)
+     * A table with no rows of data still has an aria-rowcount of 1
+     */
+    get ariaRowCount() {
+        return this.state.rows.length + 1;
+    }
+
+    get hasValidKeyField() {
+        if (hasValidKeyField(this.state)) {
+            return true;
+        }
+        // eslint-disable-next-line no-console
+        console.error(
+            `The "keyField" is a required attribute of lightning:datatable.`
+        );
+        return false;
+    }
+
+    get numberOfColumns() {
+        return getColumns(this.state).length;
+    }
+
+    get hasResizebleColumns() {
+        return !isResizeColumnDisabled(this.widthsData);
+    }
+
+    get privateTypes() {
+        return this._privateTypes;
+    }
+
+    get viewportRendering() {
+        return isViewportRenderingEnabled(this.state);
+    }
+
+    get renderedRows() {
+        if (this.viewportRendering && !isIE11) {
+            return this.state.rows.slice(0, this._renderedRowCount);
+        }
+        return this.state.rows;
+    }
+
+    get showSelectAllCheckbox() {
+        return !getHideSelectAllCheckbox(this.state);
+    }
+
+    get showStatusBar() {
+        return isInlineEditTriggered(this.state) && !this.suppressBottomBar;
+    }
+
+    get tableError() {
+        return getTableError(this.state);
+    }
+
+    get i18n() {
+        return i18n;
+    }
+
+    /************************** LIFECYCLE HOOKS **************************/
+
+    /**
+     * Initialize the following:
+     * 1. DatatableTypes
+     * 2. ColumnWidthManager
+     * 3. RenderManager
+     */
+    constructor() {
+        super();
+
+        this._privateTypes = new DatatableTypes(this.constructor.customTypes);
+
+        this._columnWidthManager = new ColumnWidthManager(this.widthsData);
+        this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
+
+        this._renderManager = new RenderManager();
+    }
+
+    /**
+     * Attach event handlers for various events on `lightning-datatable`
+     */
+    connectedCallback() {
+        const {
+            handleResizeColumn,
+            handleUpdateColumnSort,
+            handleCellFocusByClick,
+            handleFalseCellBlur,
+            handleSelectionCellClick,
+        } = this;
+
+        // Row Selection and De-selection
+        this.template.addEventListener(
+            'selectallrows',
             handleSelectionCellClick.bind(this)
         );
         this.template.addEventListener(
@@ -705,18 +973,22 @@ export default class LightningDatatable extends LightningElement {
             handleRowSelectionChange.bind(this)
         );
 
+        // Column Resizing
         this.template.addEventListener(
             'resizecol',
             handleResizeColumn.bind(this)
         );
+
+        // Column Sorting
         this.template.addEventListener(
             'privateupdatecolsort',
             handleUpdateColumnSort.bind(this)
         );
 
+        // Cell Interaction
         this.template.addEventListener(
             'privatecellkeydown',
-            handleCellKeydown.bind(this)
+            handleKeydownOnCell.bind(this)
         );
 
         this.template.addEventListener(
@@ -728,7 +1000,7 @@ export default class LightningDatatable extends LightningElement {
             handleFalseCellBlur.bind(this)
         );
 
-        // row-level-actions
+        // Row Level Actions
         this.template.addEventListener(
             'privatecellactiontriggered',
             handleRowActionTriggered.bind(this)
@@ -742,7 +1014,7 @@ export default class LightningDatatable extends LightningElement {
             handleCellButtonClick.bind(this)
         );
 
-        // header-actions
+        // Header Actions
         this.template.addEventListener(
             'privatecellheaderactionmenuopening',
             handleHeaderActionMenuOpening.bind(this)
@@ -756,75 +1028,41 @@ export default class LightningDatatable extends LightningElement {
             handleHeaderActionTriggered.bind(this)
         );
 
-        // inline-edit
+        // Inline Edit
         this.template.addEventListener(
             'privateeditcell',
             handleEditCell.bind(this)
         );
     }
 
+    /**
+     * Renders the appropriate template - div.html or table.html,
+     * based on the `render-mode` value passed in.
+     * By default, table.html is rendered
+     */
     render() {
-        return datatableTpl;
+        return this.state.renderModeRoleBased ? divTemplate : tableTemplate;
     }
 
-    handleTrRowKeyDown(event) {
-        // we probably should not be doing this unless we actually are interested in it
-        if (
-            this.state.keyboardMode === 'NAVIGATION' &&
-            this.state.rowMode === true
-        ) {
-            event.stopPropagation();
-
-            const tr = event.currentTarget;
-            const rowKeyValue = tr.getAttribute('data-row-key-value');
-            const keyCode = event.keyCode;
-            const rowHasChildren = !!tr.getAttribute('aria-expanded');
-            const rowExpanded = tr.getAttribute('aria-expanded') === 'true';
-            const rowLevel = tr.getAttribute('aria-level');
+    renderedCallback() {
+        const { state, template, widthsData } = this;
 
-            const evt = {
-                target: tr,
-                detail: {
-                    rowKeyValue,
-                    keyCode,
-                    rowHasChildren,
-                    rowExpanded,
-                    rowLevel,
-                    keyEvent: event,
-                },
-            };
+        // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
+        // It does the work of removing and adding the attribute if the value is empty(ish) or a normal string.
+        synchronizeAttrs(this.gridContainer, {
+            'aria-label': this.ariaLabel,
+            'aria-labelledby': this.ariaLabelledBy,
+        });
 
-            reactToKeyboardOnRow(this, this.state, evt);
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.privateWidthObserver) {
-            this.privateWidthObserver.disconnect();
-        }
-
-        this._renderManager.disconnectResizeObserver();
-    }
-
-    renderedCallback() {
-        const { state, template, widthsData } = this;
-
-        // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
-        // It does the work of removing and adding the attribute if the value is empty(ish) or a normal string.
-        synchronizeAttrs(this.template.querySelector('table'), {
-            'aria-label': this.ariaLabel,
-            'aria-labelledby': this.ariaLabelledBy,
-        });
-
-        if (!this.privateWidthObserver) {
-            this.privateWidthObserver = new LightningDatatableResizeObserver(
+        if (!this._privateWidthObserver) {
+            this._privateWidthObserver = new LightningDatatableResizeObserver(
                 template,
                 state,
                 widthsData,
                 this._columnWidthManager
             );
-        } else if (!this.privateWidthObserver.isConnected()) {
-            this.privateWidthObserver.observe(template);
+        } else if (!this._privateWidthObserver.isConnected()) {
+            this._privateWidthObserver.observe(template);
         }
 
         if (this._columnWidthManager.isResizingUpdateQueued()) {
@@ -845,9 +1083,15 @@ export default class LightningDatatable extends LightningElement {
             }
         }
 
+        // Managing the cell widths is only required for the role-based table
+        if (state.renderModeRoleBased) {
+            // TODO: Look to further optimize - Do this only when required
+            recomputeCellStyles(this.privateTypes, state);
+        }
+
         handlePrefetch.call(this, template, state);
         // customerSelectedRows is only valid till render, after it, the one used should be the one from the state.
-        this.customerSelectedRows = null;
+        this._customerSelectedRows = null;
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
 
@@ -866,256 +1110,77 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
-    setSelectedRows(value) {
-        setSelectedRowsKeys(this.state, value);
-        handleRowSelectionChange.call(this);
-    }
-
-    updateRowsState() {
-        const { state, widthsData, template } = this;
-        // calculate cell to focus next before indexes are updated
-        setCellToFocusFromPrev(state, template);
-
-        this.updateRowsAndCellIndexes(state);
-
-        if (this.viewportRendering) {
-            this._renderManager.updateViewportRendering(this);
-        }
-
-        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        // update celltofocus next to null if the row still exists after indexes calculation
-        updateCellToFocusFromPrev(state);
-        syncSelectedRowsKeys(state, this.getSelectedRows()).ifChanged(() => {
-            // Only trigger row selection event once after all the setters have executed
-            // Otherwise, event can be fired with stale data if not all setters have been triggered
-            if (!this._rowSelectionEventPending) {
-                this._rowSelectionEventPending = true;
-                Promise.resolve().then(() => {
-                    if (this._rowSelectionEventPending) {
-                        this.fireSelectedRowsChange(this.getSelectedRows());
-                        this._rowSelectionEventPending = false;
-                    }
-                });
-            }
-        });
-        syncActiveCell(state);
-
-        if (state.keyboardMode === 'NAVIGATION') {
-            updateTabIndexActiveCell(state);
-            updateTabIndexActiveRow(state);
-        }
-        // if there is previously focused cell which was deleted set focus from celltofocus next
-        if (state.cellToFocusNext && state.activeCell) {
-            setFocusActiveCell(this.template, this.state);
-        }
-    }
-
-    updateColumns(columns) {
-        const { state, widthsData, template } = this;
-        const hadTreeDataTypePreviously = hasTreeDataType(state);
-        // calculate cell to focus next before indexes are updated
-        setCellToFocusFromPrev(state, template);
-        normalizeColumns(state, columns, this.privateTypes);
-        setDirtyValues(state, this._draftValues);
-        updateRowNavigationMode(hadTreeDataTypePreviously, state);
-        state.headerIndexes = generateHeaderIndexes(getColumns(state));
-        // Updates state.wrapText and when isWrapableType, sets internal header actions
-        updateHeaderActions(state);
-        this.updateRowsAndCellIndexes(state);
-        updateSelectionState(state);
-        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        updateColumnWidthsMetadata(state, widthsData);
-        // set the celltofocus next to null if the column still exists after indexes calculation
-        updateCellToFocusFromPrev(state);
-
-        if (getColumns(state).length !== getColumnsWidths(widthsData).length) {
-            if (getData(state).length > 0) {
-                // when there are column changes, update the active cell
-                syncActiveCell(state);
-            }
-        }
-        if (state.keyboardMode === 'NAVIGATION') {
-            updateTabIndexActiveCell(state);
-            updateTabIndexActiveRow(state);
-        }
-        // if there is previously focused cell which was deleted set focus from celltofocus next
-        if (state.cellToFocusNext && state.activeCell) {
-            setFocusActiveCell(this.template, this.state);
-        }
-    }
-
-    get computedTableHeaderClass() {
-        if (this.state.hideTableHeader) {
-            return 'slds-assistive-text';
-        }
-        return undefined;
-    }
-
-    // Min height required while actions menu is opened
-    _actionsMinHeightStyle = '';
-
-    get computedScrollerStyle() {
-        const minHeight = this._actionsMinHeightStyle
-            ? `${this._actionsMinHeightStyle};`
-            : '';
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return `${minHeight}overflow-x:auto`;
-        }
-        return `${minHeight}${getTableWidthStyle(this.widthsData)}`;
-    }
-
-    get computedTableContainerClass() {
-        return classSet({
-            'slds-table_header-fixed_container': !this.hideTableHeader,
-        })
-            .add({ 'slds-scrollable_x': !this._isResizing })
-            .toString();
-    }
-
-    get computedTableClass() {
-        const headerType = this.hideTableHeader ? 'hidden' : 'fixed';
-        return classSet(
-            `slds-table slds-table_header-${headerType} slds-table_bordered slds-table_edit`
-        )
-            .add({ 'slds-table_resizable-cols': this.hasResizebleColumns })
-            .add({ 'slds-tree slds-table_tree': hasTreeDataType(this.state) })
-            .toString();
-    }
-
-    get computedTableRole() {
-        return hasTreeDataType(this.state) ? 'treegrid' : 'grid';
-    }
-
-    get computedTableStyle() {
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return ['table-layout:auto'].join(';');
-        }
-        return ['table-layout:fixed', getTableWidthStyle(this.widthsData)].join(
-            ';'
-        );
-    }
-
-    get computedAriaLiveClassForNavMode() {
-        return classSet()
-            .add({ 'slds-hide': this.state.keyboardMode !== 'NAVIGATION' })
-            .add({
-                'slds-assistive-text': this.state.keyboardMode === 'NAVIGATION',
-            })
-            .toString();
-    }
-
-    get computedAriaLiveClassForActionMode() {
-        return classSet()
-            .add({ 'slds-hide': this.state.keyboardMode !== 'ACTION' })
-            .add({
-                'slds-assistive-text': this.state.keyboardMode === 'ACTION',
-            })
-            .toString();
-    }
-
-    get ariaLiveNavigationModeText() {
-        return `${i18n.ariaLiveNavigationMode}`;
-    }
-
-    get ariaLiveActionModeText() {
-        return `${i18n.ariaLiveActionMode}`;
-    }
-
-    get ariaRowCount() {
-        // aria-rowcount is the count of TRs in the table
-        // It includes the # of rows of data + column header row (since this is also a TR)
-        // In this case, a table with no rows of data still has an aria-rowcount of 1
-        return this.state.rows.length + 1;
-    }
-
-    get computedTbodyStyle() {
-        if (
-            hasRowNumberColumn(this.state) &&
-            getRowNumberOffset(this.state) >= 0
-        ) {
-            return (
-                'counter-reset: row-number ' + getRowNumberOffset(this.state)
-            );
+    disconnectedCallback() {
+        if (this._privateWidthObserver) {
+            this._privateWidthObserver.disconnect();
         }
-        return '';
-    }
 
-    get hasSelectableRows() {
-        return !this.state.hideCheckboxColumn;
+        this._renderManager.disconnectResizeObserver();
     }
 
-    get hasResizebleColumns() {
-        return !isResizeColumnDisabled(this.widthsData);
-    }
+    /************************** EVENT HANDLERS ***************************/
 
     /**
-     * Private method to get datatable header element
-     * used when getting checkboxColumnHeaderId for
-     * aria-labelledby in checkbox column
-     * @returns {(HTMLElement|null)}
+     * Handles the `keydown` event on <table> and the
+     * corresponding <div> on the role-based table
+     *
+     * @param {KeyboardEvent} event - `keydown`
      */
-    get checkboxColumnHeaderElement() {
-        return this.template.querySelector(
-            'lightning-primitive-header-factory'
-        );
+    handleTableKeydown(event) {
+        handleKeydownOnTable.call(this, event);
     }
 
     /**
-     * Private method to get computedCheckboxColumnHeaderId
-     * from checkboxColumnHeaderElement for
-     * aria-labelledby in checkbox column
+     * Handles the `keydown` event on data row <tr> (table-based) and div[role="row"] (role-based)
+     *
+     * @param {KeyboardEvent} event - `keydown`
      */
-    get computedCheckboxColumnHeaderId() {
-        return this.checkboxColumnHeaderElement
-            ? this.checkboxColumnHeaderElement.computedColumnHeaderId
-            : null;
-    }
-
-    get numberOfColumns() {
-        return getColumns(this.state).length;
-    }
-
-    get showLoadingIndicator() {
-        return isLoading(this.state);
-    }
+    handleKeydownOnDataRow(event) {
+        // we probably should not be doing this unless we actually are interested in it
+        if (
+            this.state.keyboardMode === 'NAVIGATION' &&
+            this.state.rowMode === true
+        ) {
+            event.stopPropagation();
 
-    get scrollerXStyles() {
-        const styles = {
-            height: '100%',
-        };
+            const tr = event.currentTarget;
+            const rowKeyValue = tr.getAttribute('data-row-key-value');
+            const keyCode = event.keyCode;
+            const rowHasChildren = !!tr.getAttribute('aria-expanded');
+            const rowExpanded = tr.getAttribute('aria-expanded') === 'true';
+            const rowLevel = tr.getAttribute('aria-level');
 
-        if (this.showStatusBar) {
-            styles['padding-bottom'] = '3rem';
-        }
+            const evt = {
+                target: tr,
+                detail: {
+                    rowKeyValue,
+                    keyCode,
+                    rowHasChildren,
+                    rowExpanded,
+                    rowLevel,
+                    keyEvent: event,
+                },
+            };
 
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            styles['overflow-x'] = 'auto';
+            reactToKeyboardOnRow(this, this.state, evt);
         }
-
-        return Object.entries(styles)
-            .map(([key, value]) => key + ':' + value)
-            .join(';');
-    }
-
-    get showStatusBar() {
-        return isInlineEditTriggered(this.state) && !this.suppressBottomBar;
-    }
-
-    get tableError() {
-        return getTableError(this.state);
-    }
-
-    handleUpdateColumnSort(event) {
-        event.stopPropagation();
-        const { fieldName, columnKey, sortDirection } = event.detail;
-
-        this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
+    /**
+     * Handles the `scroll` event on the table container
+     *
+     * @param {Event} event - `scroll`
+     */
     handleHorizontalScroll(event) {
         handleInlineEditPanelScroll.call(this, event);
     }
 
+    /**
+     * Handles the `scroll` event on the child of the
+     * table container at div.slds-scrollable_y
+     *
+     * @param {Event} event - `scroll`
+     */
     handleVerticalScroll(event) {
         if (this.enableInfiniteLoading) {
             handleLoadMoreCheck.call(this, event);
@@ -1128,64 +1193,101 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
-    fireSelectedRowsChange(selectedRows) {
-        const event = new CustomEvent('rowselection', {
-            detail: { selectedRows },
-        });
+    /**
+     * Handles the `click` event on the <table> element and
+     * the corresponding <div> in the role-based table
+     *
+     * @param {MouseEvent} event - `click`
+     */
+    handleCellClick(event) {
+        // handles the case when clicking on the margin/pading of the td/th
+        const targetTagName = event.target.tagName.toLowerCase();
 
-        this.dispatchEvent(event);
-    }
+        if (targetTagName === 'td' || targetTagName === 'th') {
+            // get the row/col key value from the primitive cell.
+            const { rowKeyValue, colKeyValue } =
+                event.target.querySelector(':first-child');
 
-    fireSortedColumnChange(fieldName, columnKey, sortDirection) {
-        const event = new CustomEvent('sort', {
-            detail: { fieldName, columnKey, sortDirection },
-        });
-        this.dispatchEvent(event);
-    }
+            const { state, template } = this;
+            if (
+                state.rowMode ||
+                !isActiveCell(state, rowKeyValue, colKeyValue)
+            ) {
+                if (state.rowMode && state.activeCell) {
+                    unsetRowNavigationMode(state);
+                    const { rowIndex } = getIndexesActiveCell(state);
+                    updateTabIndexRow(state, rowIndex, -1);
+                }
+                this.setActiveCell(rowKeyValue, colKeyValue);
+            }
 
-    fireOnResize(isUserTriggered) {
-        const { state, widthsData } = this;
-        const event = new CustomEvent('resize', {
-            detail: {
-                columnWidths: getCustomerColumnWidths(state, widthsData),
-                isUserTriggered: !!isUserTriggered,
-            },
-        });
-        this.dispatchEvent(event);
+            if (!datatableHasFocus(state, template)) {
+                setCellClickedForFocus(state);
+            }
+        }
     }
 
-    safariHeaderFix() {
-        // W-6363867, W-7143375 Safari Refresh Bug
-        if (isSafari) {
-            const thead = this.template.querySelector('thead');
-
-            if (thead) {
-                /* Safari hack: hide and show the table head to force a browser repaint */
-                thead.style.display = 'none';
+    /**
+     * Handles the `privateupdatecolsort` event on lightning-datatable
+     *
+     * @param {CustomEvent} event - `privateupdatecolsort`
+     */
+    handleUpdateColumnSort(event) {
+        event.stopPropagation();
+        const { fieldName, columnKey, sortDirection } = event.detail;
 
-                // eslint-disable-next-line @lwc/lwc/no-async-operation
-                requestAnimationFrame(() => {
-                    thead.style.display = '';
-                });
-            }
-        }
+        this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
+    /**
+     * Handles the `resizecol` event on lightning-datatable
+     *
+     * @param {CustomEvent} event - `resizecol`
+     */
     handleResizeColumn(event) {
         event.stopPropagation();
         const { state, widthsData } = this;
         const { colIndex, widthDelta } = event.detail;
         if (widthDelta !== 0) {
-            resizeColumnWithDelta(state, widthsData, colIndex, widthDelta);
+            resizeColumnWithDelta(
+                getColumns(state),
+                widthsData,
+                colIndex,
+                widthDelta
+            );
             this.fireOnResize(true);
             this.safariHeaderFix();
         }
     }
 
-    get tableTabIndex() {
-        return this.state.focusIsInside ? '-1' : '0';
+    /**
+     * Handles the `privateresizestart` event on the <tr> and the corresponding
+     * <div> in the role-based table on the column header row
+     *
+     * @param {CustomEvent} event - `privateresizestart`
+     */
+    handleResizeStart(event) {
+        event.stopPropagation();
+        this._isResizing = true;
     }
 
+    /**
+     * Handles the `privateresizeend` event on the <tr> and the corresponding
+     * <div> in the role-based table on the column header row
+     *
+     * @param {CustomEvent} event - `privateresizeend`
+     */
+    handleResizeEnd(event) {
+        event.stopPropagation();
+        this._isResizing = false;
+    }
+
+    /**
+     * Handles the `selectallrows`, `deselectallrows`, `selectrow`, `deselectrow`
+     * events on lightning-datatable
+     *
+     * @param {CustomEvent} event - `selectallrows`, `deselectallrows`, `selectrow`, `deselectrow`
+     */
     handleSelectionCellClick(event) {
         this.handleCellFocusByClick(event);
 
@@ -1200,6 +1302,11 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    /**
+     * Handles the `privatecellfocusedbyclick` event on lightning-datatable
+     *
+     * @param {CustomEvent} event - `privatecellfocusedbyclick`
+     */
     handleCellFocusByClick(event) {
         event.stopPropagation();
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
@@ -1216,47 +1323,11 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
-    handleCellClick(event) {
-        // handles the case when clicking on the margin/pading of the td/th
-        const targetTagName = event.target.tagName.toLowerCase();
-
-        if (targetTagName === 'td' || targetTagName === 'th') {
-            // get the row/col key value from the primitive cell.
-            const { rowKeyValue, colKeyValue } =
-                event.target.querySelector(':first-child');
-
-            const { state, template } = this;
-            if (
-                state.rowMode ||
-                !isActiveCell(state, rowKeyValue, colKeyValue)
-            ) {
-                if (state.rowMode && state.activeCell) {
-                    unsetRowNavigationMode(state);
-                    const { rowIndex } = getIndexesActiveCell(state);
-                    updateTabIndexRow(state, rowIndex, -1);
-                }
-                this.setActiveCell(rowKeyValue, colKeyValue);
-            }
-
-            if (!datatableHasFocus(state, template)) {
-                setCellClickedForFocus(state);
-            }
-        }
-    }
-
-    setActiveCell(rowKeyValue, colKeyValue) {
-        const { template, state } = this;
-        const { rowIndex, colIndex } = getIndexesByKeys(
-            state,
-            rowKeyValue,
-            colKeyValue
-        );
-        setBlurActiveCell(template, state);
-        updateActiveCell(state, rowKeyValue, colKeyValue);
-        addFocusStylesToActiveCell(template, state);
-        updateTabIndex(state, rowIndex, colIndex, 0);
-    }
-
+    /**
+     * Handles the `privatecellfalseblurred` event on lightning-datatable
+     *
+     * @param {CustomEvent} event - `privatecellfalseblurred`
+     */
     handleFalseCellBlur(event) {
         event.stopPropagation();
         const { template, state } = this;
@@ -1268,71 +1339,52 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Returns data in each selected row.
-     * @returns {array} An array of data in each selected row.
-     */
-    @api
-    getSelectedRows() {
-        const data = unwrap(getData(this.state));
-        return this.state.rows.reduce((prev, row, index) => {
-            if (row.isSelected) {
-                prev.push(data[index]);
-            }
-            return prev;
-        }, []);
-    }
-
-    /**
-     * Opens the inline edit panel for the datatable's currently active cell. If the active cell is not
-     * editable, then the panel is instead opened for the first editable cell in the table. Given two
-     * distinct cells, C_x and C_y, C_x is considered "first" in the cell ordering if the following condition
-     * evaluates to true:
+     * Handles the `focusin` event on <table> and the corresponding
+     * <div> on the role-based table
      *
-     * (C_x.rowIndex < C_y.rowIndex) || (C_x.rowIndex === C_y.rowIndex && C_x.columnIndex < C_y.columnIndex)
-     *
-     * If there is no data in the table or there are no editable cells in the table then calling this function
-     * results in a no-op.
+     * @param {FocusEvent} event - `focusin`
      */
-    @api
-    openInlineEdit() {
-        openInlineEditOnActiveCell(this);
-    }
-
     handleTableFocusIn(event) {
         handleDatatableFocusIn.call(this, event);
     }
 
+    /**
+     * Handles the `focusout` event on <table> and the corresponding
+     * <div> on the role-based table
+     *
+     * @param {FocusEvent} event - `focusout`
+     */
     handleTableFocusOut(event) {
-        handleDatatableLosedFocus.call(this, event);
+        handleDatatableFocusOut.call(this, event);
     }
 
     /**
-     * @return {Object} containing the visible dimensions of the table { left, right, top, bottom, }
+     * Handles the `ieditfinished` event on the inline edit panel -
+     * `lightning-primitive-datatable-iedit-panel`
+     *
+     * @param {CustomEvent} event - `ieditfinished`
      */
-    getViewableRect() {
-        const scrollerX = this.template
-            .querySelector('.slds-scrollable_x')
-            .getBoundingClientRect();
-        const scrollerY = this.template
-            .querySelector('.slds-scrollable_y')
-            .getBoundingClientRect();
-
-        return {
-            left: scrollerX.left,
-            right: scrollerX.right,
-            top: scrollerY.top,
-            bottom: scrollerY.bottom,
-        };
-    }
-
     handleInlineEditFinish(event) {
         handleInlineEditFinish.call(this, event);
     }
 
+    /**
+     * Handles the `masscheckboxchange` event on the inline edit panel -
+     * `lightning-primitive-datatable-iedit-panel`
+     *
+     * @param {CustomEvent} event - `masscheckboxchange`
+     */
     handleMassCheckboxChange(event) {
         handleMassCheckboxChange.call(this, event);
     }
 
+    /**
+     * Handles the `privatesave` event on the status bar -
+     * `lightning-primitive-datatable-status-bar` and
+     * fires the `save` custom event
+     *
+     * @param {CustomEvent} event - `privatesave`
+     */
     handleInlineEditSave(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -1349,6 +1401,13 @@ export default class LightningDatatable extends LightningElement {
         );
     }
 
+    /**
+     * Handles the `privatecancel` event on the status bar -
+     * `lightning-primitive-datatable-status-bar` and
+     * fires the `cancel` custom event
+     *
+     * @param {CustomEvent} event - `privatecancel`
+     */
     handleInlineEditCancel(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -1365,17 +1424,163 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
-    handleTableKeydown(event) {
-        handleKeyDown.call(this, event);
+    /************************ EVENT DISPATCHERS **************************/
+
+    fireSelectedRowsChange(selectedRows) {
+        const event = new CustomEvent('rowselection', {
+            detail: { selectedRows },
+        });
+
+        this.dispatchEvent(event);
     }
 
-    handleResizeStart(event) {
-        event.stopPropagation();
-        this._isResizing = true;
+    fireSortedColumnChange(fieldName, columnKey, sortDirection) {
+        const event = new CustomEvent('sort', {
+            detail: { fieldName, columnKey, sortDirection },
+        });
+        this.dispatchEvent(event);
     }
 
-    handleResizeEnd(event) {
-        event.stopPropagation();
-        this._isResizing = false;
+    fireOnResize(isUserTriggered) {
+        const { state, widthsData } = this;
+        const event = new CustomEvent('resize', {
+            detail: {
+                columnWidths: getCustomerColumnWidths(
+                    getColumns(state),
+                    widthsData
+                ),
+                isUserTriggered: !!isUserTriggered,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+
+    /************************* HELPER FUNCTIONS **************************/
+
+    updateRowsState() {
+        const { state, widthsData, template } = this;
+        // calculate cell to focus next before indexes are updated
+        setCellToFocusFromPrev(state, template);
+
+        this.updateRowsAndCellIndexes(state);
+
+        if (this.viewportRendering) {
+            this._renderManager.updateViewportRendering(this);
+        }
+
+        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
+        // update celltofocus next to null if the row still exists after indexes calculation
+        updateCellToFocusFromPrev(state);
+        syncSelectedRowsKeys(state, this.getSelectedRows()).ifChanged(() => {
+            // Only trigger row selection event once after all the setters have executed
+            // Otherwise, event can be fired with stale data if not all setters have been triggered
+            if (!this._rowSelectionEventPending) {
+                this._rowSelectionEventPending = true;
+                Promise.resolve().then(() => {
+                    if (this._rowSelectionEventPending) {
+                        this.fireSelectedRowsChange(this.getSelectedRows());
+                        this._rowSelectionEventPending = false;
+                    }
+                });
+            }
+        });
+        syncActiveCell(state);
+
+        if (state.keyboardMode === 'NAVIGATION') {
+            updateTabIndexActiveCell(state);
+            updateTabIndexActiveRow(state);
+        }
+        // if there is previously focused cell which was deleted set focus from celltofocus next
+        if (state.cellToFocusNext && state.activeCell) {
+            setFocusActiveCell(this.template, this.state);
+        }
+    }
+
+    updateColumns(columns) {
+        const { state, widthsData, template } = this;
+        const hadTreeDataTypePreviously = hasTreeDataType(state);
+        // calculate cell to focus next before indexes are updated
+        setCellToFocusFromPrev(state, template);
+        normalizeColumns(state, columns, this.privateTypes);
+        setDirtyValues(state, this._draftValues);
+        updateRowNavigationMode(hadTreeDataTypePreviously, state);
+        state.headerIndexes = generateHeaderIndexes(getColumns(state));
+        // Updates state.wrapText and when isWrapableType, sets internal header actions
+        updateHeaderActions(state);
+        this.updateRowsAndCellIndexes(state);
+        updateSelectionState(state);
+        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
+        updateColumnWidthsMetadata(getColumns(state), widthsData);
+        // set the celltofocus next to null if the column still exists after indexes calculation
+        updateCellToFocusFromPrev(state);
+
+        if (getColumns(state).length !== getColumnsWidths(widthsData).length) {
+            if (getData(state).length > 0) {
+                // when there are column changes, update the active cell
+                syncActiveCell(state);
+            }
+        }
+        if (state.keyboardMode === 'NAVIGATION') {
+            updateTabIndexActiveCell(state);
+            updateTabIndexActiveRow(state);
+        }
+        // if there is previously focused cell which was deleted set focus from celltofocus next
+        if (state.cellToFocusNext && state.activeCell) {
+            setFocusActiveCell(this.template, this.state);
+        }
+    }
+
+    setSelectedRows(value) {
+        setSelectedRowsKeys(this.state, value);
+        handleRowSelectionChange.call(this);
+    }
+
+    setActiveCell(rowKeyValue, colKeyValue) {
+        const { template, state } = this;
+        const { rowIndex, colIndex } = getIndexesByKeys(
+            state,
+            rowKeyValue,
+            colKeyValue
+        );
+        setBlurActiveCell(template, state);
+        updateActiveCell(state, rowKeyValue, colKeyValue);
+        addFocusStylesToActiveCell(template, state);
+        updateTabIndex(state, rowIndex, colIndex, 0);
+    }
+
+    /**
+     * @return {Object} containing the visible dimensions of the table { left, right, top, bottom, }
+     */
+    getViewableRect() {
+        const scrollerX = this.template
+            .querySelector('.slds-scrollable_x')
+            .getBoundingClientRect();
+        const scrollerY = this.template
+            .querySelector('.slds-scrollable_y')
+            .getBoundingClientRect();
+
+        return {
+            left: scrollerX.left,
+            right: scrollerX.right,
+            top: scrollerY.top,
+            bottom: scrollerY.bottom,
+        };
+    }
+
+    // W-6363867, W-7143375 Safari Refresh Bug
+    safariHeaderFix() {
+        if (isSafari) {
+            const thead = this.template.querySelector('thead');
+
+            if (thead) {
+                /* Safari hack: hide and show the table head to force a browser repaint */
+                thead.style.display = 'none';
+
+                // eslint-disable-next-line @lwc/lwc/no-async-operation
+                requestAnimationFrame(() => {
+                    thead.style.display = '';
+                });
+            }
+        }
     }
 }