lightning-base-components 1.14.6-alpha → 1.15.1-alpha

package/src/lightning/datatable/datatable.js

@@ -82,6 +82,7 @@ import {
     refocusCellElement,
     isCellElement,
     getActiveCellElement,
+    getDataRow,
     FOCUS_CLASS,
 } from './keyboard';
 import {
@@ -138,10 +139,15 @@ import {
     isViewportRenderingEnabled,
     setViewportRendering,
     getDTWrapperHeight,
-    setFirstVisibleIndex,
     setVirtualize,
     RenderManager,
 } from './renderManager';
+import {
+    handleVariableRowHeights,
+    resetRowHeights,
+    resetTableHeight,
+    findFirstVisibleIndex,
+} from './virtualization';
 
 import { hasTreeDataType } from './tree';
 import { setErrors, getTableError, getErrors } from './errors';
@@ -200,9 +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';
+    _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
+    _shouldResetHeights = false;
     _suppressBottomBar = false;
 
     /************************* PUBLIC PROPERTIES *************************/
@@ -283,6 +292,7 @@ export default class LightningDatatable extends LightningElement {
         // do necessary updates since rows have changed
         if (hasValidKeyField(this.state)) {
             this.updateRowsState();
+            resetTableHeight(this.state);
         }
         if (this._customerSelectedRows) {
             this.setSelectedRows(this._customerSelectedRows);
@@ -797,8 +807,8 @@ export default class LightningDatatable extends LightningElement {
      * virtualization is enabled
      */
     get computedTbodyStyle() {
-        const style = [];
-        const { firstVisibleIndex, bufferSize, virtualize, rows, rowHeight } =
+        const style = {};
+        const { firstVisibleIndex, bufferSize, virtualize, tableHeight } =
             this.state;
         if (
             hasRowNumberColumn(this.state) &&
@@ -809,11 +819,11 @@ export default class LightningDatatable extends LightningElement {
                 0
             );
             const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
-            style.push(`counter-reset: row-number ${rowNumber}`);
+            style['counter-reset'] = `row-number ${rowNumber}`;
         }
         if (virtualize) {
-            const length = rows.length;
-            style.push('position: relative', `height:${length * rowHeight}px`);
+            style.position = 'relative';
+            style.height = `${tableHeight}px`;
         }
         return styleToString(style);
     }
@@ -938,11 +948,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;
     }
 
@@ -1124,10 +1139,7 @@ export default class LightningDatatable extends LightningElement {
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
-
-            const role = '[role="' + this.computedTableRole + '"]';
-
-            this.template.querySelector(role).style = this.computedTableStyle;
+            this.updateTableAndScrollerStyleOnRender();
         }
 
         // Managing the cell widths is only required for the role-based table
@@ -1142,17 +1154,23 @@ export default class LightningDatatable extends LightningElement {
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
         // reset focus styles on re-render
-        if (state.activeCell && state.activeCell.focused) {
-            const cellElement = getActiveCellElement(template, state);
-            if (
-                cellElement &&
-                cellElement.parentElement &&
-                !cellElement.parentElement.classList.contains(FOCUS_CLASS)
-            ) {
-                setFocusActiveCell(template, state, null, null, false);
+        if (this._shouldResetFocus) {
+            // since focus is now getting reset, can change this back to false
+            this._shouldResetFocus = false;
+            if (state.activeCell && state.activeCell.focused) {
+                const cellElement = getActiveCellElement(template, state);
+                if (
+                    cellElement &&
+                    cellElement.parentElement &&
+                    !cellElement.parentElement.classList.contains(FOCUS_CLASS)
+                ) {
+                    setFocusActiveCell(template, state, null, null, false);
+                }
             }
         }
 
+        this.updateVirtualizedRowHeights();
+
         if (this.viewportRendering || state.virtualize) {
             const resizeTarget = this.template.querySelector(
                 'div.dt-outer-container'
@@ -1175,6 +1193,18 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateTableAndScrollerStyleOnRender() {
+        const role = '[role="' + this.computedTableRole + '"]';
+        const tableElement = this.template.querySelector(role);
+        const scrollYEle = this.template.querySelector('.slds-scrollable_y');
+        if (tableElement) {
+            tableElement.style = this.computedTableStyle;
+        }
+        if (scrollYEle) {
+            scrollYEle.style = this.computedScrollerStyle;
+        }
+    }
+
     disconnectedCallback() {
         if (this._privateWidthObserver) {
             this._privateWidthObserver.disconnect();
@@ -1253,7 +1283,10 @@ export default class LightningDatatable extends LightningElement {
 
         handleInlineEditPanelScroll.call(this, event);
         if (this.state.virtualize) {
-            setFirstVisibleIndex(this.state, event.target.scrollTop);
+            this.state.firstVisibleIndex = findFirstVisibleIndex(
+                this.state,
+                event.target.scrollTop
+            );
         } else if (this.viewportRendering) {
             this._renderManager.handleScroll(this.state, event);
         }
@@ -1347,6 +1380,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
+        this._shouldResetHeights = true;
     }
 
     /**
@@ -1419,10 +1453,19 @@ export default class LightningDatatable extends LightningElement {
      * Handles the `focusout` event on <table> and the corresponding
      * <div> on the role-based table
      *
+     * This gets called both when we expect the table to lose focus
+     * and when the active cell loses focus after renderedRows changes
+     * on a virtualized table, in which case we don't want to lose focus.
+     *
+     * We account for this by setting activeCell.focused to the value of
+     * _shouldResetFocus, which will be true if and only if focus was
+     * lost due to a renderedRows change for a virtualized table.
+     *
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
+        this.state.activeCell.focused = this._shouldResetFocus;
     }
 
     /**
@@ -1601,6 +1644,41 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateVirtualizedRowHeights() {
+        const state = this.state;
+        const virtualizedRows = state.virtualize && this.renderedRows.length;
+
+        // no need to handle other virtualization/row height logic
+        // if heights need to be reset
+        if (this._shouldResetHeights) {
+            resetRowHeights(state);
+            this._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
+            handleVariableRowHeights(this.template, state, this.renderedRows);
+        } else if (virtualizedRows && state.fixedHeight) {
+            // if heights are fixed, we only need to check height of first row
+            const rowElement = this.template.querySelector(
+                getDataRow(this.renderedRows[0].key)
+            );
+            // increase height by 1 since first rendered row is missing an extra 1px border
+            if (rowElement) {
+                const height = rowElement.getBoundingClientRect().height + 1;
+                if (state.rowHeight !== height) {
+                    state.rowHeight = height;
+                    resetTableHeight(state);
+                    state.rows.forEach((row) => {
+                        row.style = styleToString({
+                            position: 'absolute',
+                            top: `${row.rowIndex * height}px`,
+                        });
+                    });
+                }
+            }
+        }
+    }
+
     setSelectedRows(value) {
         setSelectedRowsKeys(this.state, value);
         handleRowSelectionChange.call(this);
@@ -1620,7 +1698,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * @return {Object} containing the visible dimensions of the table { left, right, top, bottom, }
+     * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
      */
     getViewableRect() {
         const scrollerX = this.template

package/src/lightning/datatable/headerActions.js

@@ -16,7 +16,7 @@ const DIVIDER_REM_HEIGHT = 1.0625;
  *
  * @param {Object} state The state of the datatable
  * @param {Object} columnDefinition The column definition to extract internal actions from
- * @return {Array} All wrapText internal actions
+ * @returns {Array} All wrapText internal actions
  */
 export function getInternalActions(state, columnDefinition) {
     return [...getActions(state, columnDefinition)];
@@ -113,7 +113,7 @@ function dispatchHeaderActionEvent(dt, action, colKeyValue) {
  *
  * @param {Array} columns Array of all the columns
  * @param {Integer} index The current column index to check
- * @return {String} The computed alignment
+ * @returns {String} The computed alignment
  */
 function getMenuAlignment(columns, index) {
     const isLastColumn = index === columns.length - 1;

package/src/lightning/datatable/keyboard.js

@@ -10,7 +10,7 @@ import {
 } from './tree';
 import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
-import { setFirstVisibleIndex } from './renderManager';
+import { findFirstVisibleIndex } from './virtualization';
 
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
@@ -88,7 +88,7 @@ const SELECTORS = {
  * user keys down on a cell that contains actionable items (ex. edit button, links,
  * email, buttons).
  *
- * @param {Event} event - Custom DOM event (privatecellkeydown) sent by the cell
+ * @param {Event} event Custom DOM event (privatecellkeydown) sent by the cell
  */
 export function handleKeydownOnCell(event) {
     event.stopPropagation();
@@ -110,7 +110,7 @@ export function handleKeydownOnCell(event) {
  * Those events are handled by `handleKeydownOnCell()` and the remaining are
  * handled by this function.
  *
- * @param {*} event
+ * @param {Event} event
  */
 export function handleKeydownOnTable(event) {
     const targetTagName = event.target.tagName.toLowerCase();
@@ -127,10 +127,10 @@ export function handleKeydownOnTable(event) {
  * Changes the datatable state based on the keyboard event sent from the cell component.
  * The result of those changes may trigger a re-render on the table
  *
- * @param {node} template - the custom element root `this.template`
- * @param {object} state - datatable state
- * @param {event} event - custom DOM event sent by the cell
- * @returns {object} - mutated state
+ * @param {Node} template The custom element root `this.template`
+ * @param {Object} state Datatable state
+ * @param {Event} event Custom DOM event sent by the cell
+ * @returns {Object} Mutated state
  */
 function reactToKeyboardInActionMode(template, state, event) {
     switch (event.detail.keyCode) {
@@ -1313,7 +1313,7 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-function getDataRow(rowKeyValue) {
+export function getDataRow(rowKeyValue) {
     return `[data-row-key-value="${rowKeyValue}"]`;
 }
 
@@ -1365,7 +1365,7 @@ function updateScrollTop(state, template, element) {
     } else if (findMeRect.bottom > parentRect.bottom - BOTTOM_MARGIN) {
         scrollableY.scrollTop += SCROLL_OFFSET;
     }
-    setFirstVisibleIndex(state, scrollableY.scrollTop);
+    findFirstVisibleIndex(state, scrollableY.scrollTop);
 }
 
 function scrollToCell(state, template, rowIndex) {
@@ -1380,7 +1380,7 @@ function scrollToCell(state, template, rowIndex) {
 
     const scrollableY = template.querySelector('.slds-scrollable_y');
     scrollableY.scrollTop = scrollTop;
-    setFirstVisibleIndex(state, scrollTop);
+    findFirstVisibleIndex(state, scrollTop);
 }
 
 export function isActiveCellEditable(state) {

package/src/lightning/datatable/renderManager.js

@@ -1,6 +1,7 @@
 import { getScrollOffsetFromTableEnd, normalizeNumberAttribute } from './utils';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { normalizeBoolean, normalizeString } from 'lightning/utilsPrivate';
+import { resetRowHeights } from './virtualization';
 
 export const DEFAULT_ROW_HEIGHT = 30.5;
 const DEFAULT_BUFFER_SIZE = 5;
@@ -31,17 +32,6 @@ export function getDTWrapperHeight() {
     return this.template.querySelector('.slds-scrollable_x').offsetHeight;
 }
 
-/**
- * Sets the first visible index in the datatable state based on
- * a given scrollTop value and the current rowHeight
- *
- * @param {Object} state - datatable state
- * @param {Number} scrollTop - scroll top to calculate first visible index for
- */
-export function setFirstVisibleIndex(state, scrollTop) {
-    state.firstVisibleIndex = Math.floor(scrollTop / state.rowHeight);
-}
-
 function getDefaultPreviousInfo() {
     return {
         renderedRowCount: 0,
@@ -81,7 +71,13 @@ export class RenderManager {
      * @param {RenderManagerConfig} config - set of properties used for render management
      */
     configure(state, getWrapperHeight, config) {
-        const { viewportRendering, rowHeight, virtualize, bufferSize } = config;
+        const {
+            viewportRendering,
+            rowHeight,
+            virtualize,
+            bufferSize,
+            fixedHeight,
+        } = config;
         setVirtualize(state, virtualize);
 
         if (normalizeBoolean(viewportRendering) || state.virtualize) {
@@ -93,6 +89,7 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
+        state.fixedHeight = normalizeBoolean(fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
             this.threshold = ROW_THRESHOLD * state.rowHeight;
@@ -157,9 +154,42 @@ export class RenderManager {
      * @returns {Object} object with firstIndex and lastIndex of rendered range of rows
      */
     getRenderedRange(state) {
-        const { firstVisibleIndex, bufferSize, renderedRowCount, rows } = state;
+        const {
+            firstVisibleIndex,
+            bufferSize,
+            renderedRowCount,
+            rows,
+            fixedHeight,
+            rowHeight,
+            heightCache,
+        } = state;
+
         const firstIndex = Math.max(firstVisibleIndex - bufferSize, 0);
         let lastIndex = firstVisibleIndex - bufferSize + renderedRowCount;
+        const firstVisibleKey =
+            rows[firstVisibleIndex] && rows[firstVisibleIndex].key;
+
+        if (!fixedHeight && heightCache[firstVisibleKey]) {
+            let i = firstVisibleIndex;
+            let currentHeight = 0;
+            const knownRowHeight = rows[i] && heightCache[rows[i].key];
+            // loop through rows until we find last row based on wrapper height
+            while (knownRowHeight && currentHeight < this.wrapperHeight) {
+                currentHeight += knownRowHeight;
+                i = i + 1;
+            }
+            if (currentHeight >= this.wrapperHeight) {
+                // row heights were measured; i represents last visible index
+                lastIndex = i + bufferSize - 1;
+            } else {
+                // row heights not yet measured, i is last visible index with known height
+                // guess lastIndex based on default row height
+                const extraRowEstimate =
+                    (this.wrapperHeight - currentHeight) / rowHeight;
+                lastIndex = i + extraRowEstimate + bufferSize;
+            }
+        }
+
         // without this, we may render too few rows when there
         // aren't enough rows for virtualization to be needed
         if (
@@ -224,6 +254,8 @@ export class RenderManager {
                     const rowCountWithBuffer =
                         this.getRowCountWithBuffer(state);
 
+                    resetRowHeights(state);
+
                     if (
                         rowCountWithBuffer > state.renderedRowCount ||
                         state.virtualize

package/src/lightning/datatable/resizeSensor.js

@@ -40,7 +40,8 @@ class EventQueue {
 
 /**
  * Get element size
- * @param {HTMLElement} element - element to return the size.
+ *
+ * @param {HTMLElement} element Element to return the size.
  * @returns {Object} {width, height}
  */
 function getElementSize(element) {
@@ -73,9 +74,10 @@ function createResizeSensor() {
 }
 
 /**
+ * Attaches the resize event to an element
  *
- * @param {HTMLElement} element - element to listen resize.
- * @param {Function}    resizeListener - resize event listener.
+ * @param {HTMLElement} element Element to listen resize
+ * @param {Function} resizeListener Resize event listener
  */
 function attachResizeEvent(element, resizeListener) {
     if (!element) {
@@ -192,6 +194,12 @@ function attachResizeEvent(element, resizeListener) {
     requestAnimationFrame(reset);
 }
 
+/**
+ * Removes a resize event from an element.
+ *
+ * @param {HTMLElement} element Element to remove resize listener from
+ * @param {Event} event The event to remove
+ */
 function detach(elem, ev) {
     if (!elem) {
         return;

package/src/lightning/datatable/rowSelection.js

@@ -497,7 +497,7 @@ export function resetSelectedRowsKeys(state) {
  * Returns undefined if the row key value is invalid
  *
  * @param {Object} state - the datatable state.
- * @return {String | undefined } the row key or undefined.
+ * @returns {String | undefined } the row key or undefined.
  */
 function getLastRowSelection(state) {
     const lastSelectedRowKey = state.lastSelectedRowKey;

package/src/lightning/datatable/rowSelectionShared.js

@@ -9,31 +9,27 @@
  */
 
 /**
- * Returns whether or not the row is selected using the state and the rowKeyValue
- * The state maintains the list of selected rows from which
- * this value can be retrieved.
+ * Returns whether or not the row is selected using the state and the `rowKeyValue`.
+ * The state maintains the list of selected rows from which this value can be retrieved.
  *
- * @param {Object} state - datatable state object
- * @param {String} rowKeyValue
- * @returns
+ * @param {Object} state Datatable state object
+ * @param {String} rowKeyValue The row key value to lookup
+ * @returns {Boolean} Whether the row is currently selected
  */
 export function isSelectedRow(state, rowKeyValue) {
     return !!state.selectedRowsKeys[rowKeyValue];
 }
 
 /**
- * Returns whether the row (whose row key value is specified)
- * should be disabled or not.
- * Should not disable if the row is selected.
- * If the particular row is not selected, the row should be disabled
- * when max-row-selection > 1 and the selection limit is reached
+ * Returns whether the row (whose row key value is specified) should be disabled or not.
+ * Should not disable if the row is selected. If the particular row is not selected, the
+ * row should be disabled when `max-row-selection` > 1 and the selection limit is reached.
  *
- * Note: Do not disable selection when max-row-selection = 1 and
- * a row has been selected.
+ * NOTE: Do not disable selection when `max-row-selection` is 1 and a row has been selected.
  *
- * @param {Object} state
- * @param {String} rowKeyValue
- * @returns {Boolean} whether the row should be disabled or not
+ * @param {Object} state Datatable state object
+ * @param {String} rowKeyValue The row key value to lookup
+ * @returns {Boolean} Whether the row should be disabled or not
  */
 export function isDisabledRow(state, rowKeyValue) {
     if (!isSelectedRow(state, rowKeyValue)) {
@@ -51,11 +47,10 @@ export function isDisabledRow(state, rowKeyValue) {
 
 /**
  * Returns which input type to use for row selection.
- * If max-row-selection = 1, use radio buttons,
- * otherwise, use checkboxes.
+ * If `max-row-selection` is 1, use radio buttons. Otherwise, use checkboxes.
  *
- * @param {Object} state - datatable's state object
- * @returns
+ * @param {Object} state Datatable state object
+ * @returns {String} `radio` is only one row is allowed to be selected, otherwise `checkbox`
  */
 export function getRowSelectionInputType(state) {
     if (getMaxRowSelection(state) === 1) {
@@ -64,14 +59,32 @@ export function getRowSelectionInputType(state) {
     return 'checkbox';
 }
 
+/**
+ * Retrieves the maximum number of rows that can be selected from state.
+ *
+ * @param {Object} state Datatable state object
+ * @returns {Integer} The maximum rows that can be selected
+ */
 export function getMaxRowSelection(state) {
     return state.maxRowSelection;
 }
 
+/**
+ * Determines the number of rows currently selected.
+ *
+ * @param {Object} state Datatable state object
+ * @returns {Integer} The number of currently selected rows
+ */
 export function getCurrentSelectionLength(state) {
     return getSelectedRowsKeys(state).length;
 }
 
+/**
+ * Retrieves the row keys that are currently selected.
+ *
+ * @param {Object} state Datatable state object
+ * @returns {Array} An array of the row keys that are currently selected
+ */
 export function getSelectedRowsKeys(state) {
     return Object.keys(state.selectedRowsKeys).filter(
         (key) => state.selectedRowsKeys[key]

package/src/lightning/datatable/rows.js

@@ -76,8 +76,7 @@ export function resolveRowClassNames(row) {
  * @param {object} state - data table state
  * @param {string} rowKeyValue - computed id for the row
  * @param {string} colKeyValue - computed id for the column
- *
- * @return {object} The user row that its related to the action.
+ * @returns {object} The user row that its related to the action.
  */
 export function getUserRowByCellKeys(state, rowKeyValue, colKeyValue) {
     const rowIndex = state.indexes[rowKeyValue][colKeyValue][0];
@@ -135,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/sort.js

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

package/src/lightning/datatable/state.js

@@ -3,7 +3,8 @@
  * The state object is further manipulated while it is passed around by datatable
  *
  * TODO: Check to see if there are other items that need to be added to the default state
- * @returns {Object} - intial state of the datatable
+ *
+ * @returns {Object} Intial state of the datatable
  */
 export const getDefaultState = function () {
     return {
@@ -62,6 +63,12 @@ export const getDefaultState = function () {
         rowHeight: 30.5,
         renderedRowCount: 0,
         firstVisibleIndex: 0, // first row that should be visible in viewport
+        fixedHeight: false, // by default, assume that not all rows are same height
+        heightCache: {}, // cache of row heights
+        offsets: [0],
+        offsetRanges: [],
+        firstRowOffset: 0, // how many pixels scrollTop is from top of first visible row
+        tableHeight: 0,
 
         // inline edit
         inlineEdit: {