lightning-base-components 1.26.4-alpha → 1.27.5-alpha

package/src/lightning/datatable/__docs__/datatable.md

@@ -31,18 +31,18 @@ Salesforce Lightning Design System.
 `lightning-datatable` is not supported on mobile devices. Supported features
 include:
 
--   Displaying and formatting of columns with appropriate data types
--   Infinite scrolling of rows
--   Inline editing for some data types
--   Header actions
--   Header wrapping
--   Row-level actions
--   Resizing of columns
--   Selecting of rows
--   Sorting of columns by ascending and descending order
--   Text wrapping and clipping
--   Row numbering column
--   Cell content alignment
+- Displaying and formatting of columns with appropriate data types
+- Infinite scrolling of rows
+- Inline editing for some data types
+- Header actions
+- Header wrapping
+- Row-level actions
+- Resizing of columns
+- Selecting of rows
+- Sorting of columns by ascending and descending order
+- Text wrapping and clipping
+- Row numbering column
+- Cell content alignment
 
 Tables can be populated during initialization using the `data`, `columns`, and
 `key-field` attributes. The `key-field` attribute is required for correct table behavior.
@@ -207,8 +207,8 @@ To return the data in each selected row, use the `getSelectedRows()` method. Thi
     key-field="id"
     data={data}
     columns={columns}></lightning-datatable>
-<lightning-button 
-    label="Get Selected Row" 
+<lightning-button
+    label="Get Selected Row"
     onclick={handleGetSelected}></lightning-button>
 <p>{selectedStr}</p>
 ```
@@ -299,14 +299,14 @@ aspects of your columns.
 | Property           | Type    | Description                                                                                                                                                                                                                                                                           |
 | ------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | actions            | object  | Appends a dropdown menu of actions to a column. You must pass in a list of label-name pairs.                                                                                                                                                                                          |
-| cellAttributes     | object  | Provides additional customization, such as appending an icon to the output. For more information, see **Appending an Icon to Column Data**.                                                                                                                                           |
+| cellAttributes     | object  | Provides additional customization using `alignment` and `class` properties, in addition to `icon*` properties such as for appending an icon to the output. For more information, see **Appending an Icon to Column Data**.                                                            |
 | editable           | boolean | Specifies whether a column supports inline editing. The default is false.                                                                                                                                                                                                             |
 | fieldName          | string  | Required. The name that binds the columns attributes to the associated data. Each columns attribute must correspond to an item in the data array.                                                                                                                                     |
-| fixedWidth         | integer | Specifies the width of a column in pixels and makes the column non-resizable.If both `fixedWidth` and `initialWidth` values are provided, `initialWidth` is ignored.                                                                                                                  |
+| fixedWidth         | integer | Specifies the width of a column in pixels and makes the column non-resizable. If both `fixedWidth` and `initialWidth` values are provided, `initialWidth` is ignored.                                                                                                                 |
 | hideDefaultActions | boolean | Specifies whether to hide the default header actions on a column. The default is false. For more information, see **Creating Header Actions**.                                                                                                                                        |
 | hideLabel          | boolean | Specifies whether to hide the label on a column. The default is false. For more information, see **Displaying an Icon Instead of a Column Label**.                                                                                                                                    |
 | iconName           | string  | The Lightning Design System name of the icon. Names are written in the format standard:opportunity. The icon is appended to the left of the header label. If `hideLabel` is provided, only the icon displays in the column header.                                                    |
-| imgSrc             | string  | The URI for a custom icon. The icon is appended to the left of the header label. If `hideLabel` is provided, only the icon displays in the column header. If there's an error loading the URI, `iconName` is used as a fallback.                                                |
+| imgSrc             | string  | The URI for a custom icon. The icon is appended to the left of the header label. If `hideLabel` is provided, only the icon displays in the column header. If there's an error loading the URI, `iconName` is used as a fallback.                                                      |
 | initialWidth       | integer | The width of the column when it's initialized, which must be within the `min-column-width` and` max-column-width` values, or within 50px and 1000px if they are not provided.                                                                                                         |
 | label              | string  | Required. The text label displayed in the column header. If `hideLabel` and `iconName` are set, the label is used as hover text for the icon and as the value of `aria-label`.                                                                                                        |
 | sortable           | boolean | Specifies whether the column can be sorted. The default is false.                                                                                                                                                                                                                     |
@@ -610,7 +610,7 @@ const columns = [
 
 #### Adding Styles To Columns
 
-Pass Lightning Design System classes to `cellAttributes` when using standard data types.
+Pass Lightning Design System (SLDS) classes to the `class` cell attribute when using standard data types. The classes you add are applied to all rows in a column.
 
 ```javascript
 const columns = [
@@ -1074,13 +1074,13 @@ handleResize(event) {
 
 ##### Managing the Resizing of Column Widths
 
-The `column-widths-mode` attribute accepts values of `fixed` (default) or `auto`. Use this attribute with the `fixedWidth` and `initialWidth` column properties to provide granular control on your column widths. See **Implementing Fixed Width Mode** and **Implementing Auto Width Mode** for more information.
+The `column-widths-mode` attribute accepts values of `fixed` (default) or `auto`. To provide granular control on your column widths, use this attribute with the `fixedWidth` and `initialWidth` column properties. See **Implementing Fixed Width Mode** and **Implementing Auto Width Mode** for more information.
 
 Widths for the following columns are fixed and cannot be changed.
 
--   Row Number column
--   Selection (checkbox) column
--   Action column
+- Row Number column
+- Selection (checkbox) column
+- Action column
 
 ##### Implementing Fixed Width Mode
 
@@ -1090,10 +1090,10 @@ You can specify your own widths using `fixedWidth` or `initialWidth`. The widths
 
 Setting new data on the columns doesn't trigger resizing for columns, unless the new column definition specifies a change in `fixedWidth` or `initialWidth` values. In `fixed` mode, the columns automatically resizes and maintain equal widths when:
 
--   The browser window is resized
--   The parent container width for the datatable is changed
--   The `row-number-offset` value is changed
--   More or less data is passed in
+- The browser window is resized
+- The parent container width for the datatable is changed
+- The `row-number-offset` value is changed
+- More or less data is passed in
 
 When you manually resize a column to a larger width, the other columns maintain their widths, displaying a scrollbar to enable scrolling to the end of the table columns. When you manually resize to a smaller width, the other columns also maintain their widths.
 
@@ -1103,8 +1103,8 @@ You can resize manually using a mouse or a keyboard. On a keyboard, press enter
 
 To trigger resizing of columns according to the length or size of data in a column, set `column-widths-mode="auto"`. In `auto` width mode, the columns automatically resize when:
 
--   Data changes in at least one row and the number of rows stays the same
--   The column definition changes, such as a change in a column property or the number of columns
+- Data changes in at least one row and the number of rows stays the same
+- The column definition changes, such as a change in a column property or the number of columns
 
 Pass a new reference of columns with changes for resize to take effect. The columns don't resize if there's only a change in the number of records in the data.
 
@@ -1118,9 +1118,9 @@ When you manually resize a column, the other columns maintain their widths. This
 
 The columns keep their width ratios while adjusting the column widths when:
 
--   The browser window is resized
--   The parent container width for the datatable is changed
--   The `rowNumberOffset` value is changed
+- The browser window is resized
+- The parent container width for the datatable is changed
+- The `rowNumberOffset` value is changed
 
 Auto width mode is supported for containers with block display, which corresponds to the `display: block` CSS property.
 `lightning-datatable` doesn't fully support containers with `display:inline-block` or flex properties.
@@ -1158,8 +1158,7 @@ To render a checkbox for single row selection, set `single-row-selection-mode="c
 
 #### Selecting Rows Programmatically
 
-The `selected-rows` attribute enables programmatic selection of rows, which is
-useful when you want to preselect rows.
+The `selected-rows` attribute enables you to preselect rows.
 
 ```html
 <lightning-datatable
@@ -1184,34 +1183,62 @@ To select a row programmatically, pass in the row `key-field` value.
 ```
 
 If `max-row-selection` is set to a value less than the number of selected rows,
-only the specified number of rows will be selected. For example, if you set
+only the specified number of rows is selected. For example, if you set
 `max-row-selection` to 2 and pass in `['a', 'b', 'c']` to `selected-rows`, only
-rows a and b will be selected.
+rows a and b are selected.
+
+#### Disabling Rows Programmatically
+
+Use the `disabled-rows` attribute to prevent users from changing the selection status of specified rows. Pass row identifiers into `disabled-rows` to prevent the rows from being selected. Pass row identifiers into both `disabled-rows` and `selected-rows` to prevent the rows from being deselected.
+
+```html
+<template>
+    <lightning-datatable
+    key-field="id"
+    columns={columns}
+    data={data}
+    disabled-rows={disabledRows}>
+</lightning-datatable>
+</template>
+```
+
+To disable a row programmatically, pass in the row `key-field` value to the `disabled-rows` attribute.
+For example, `disabledRows = ['a', 'b'];` where `a` and `b` correspond to the `id` values of the rows to be disabled.
+
+Rows that are both disabled and selected count towards the `max-row-selection`.
+For example, if you set `max-row-selection` to 2, and pass in `['a', 'b']` to both
+`disabled-rows` and `selected-rows`, the user can't select additional rows.
 
 #### Sorting Data By Column
 
 To enable sorting of row data by a column label, set `sortable` to `true` for
-the column on which you want to enable sorting. Set `sortedBy` to match the
-`fieldName` attribute on the column. Clicking a column header sorts rows by
-ascending order unless the `defaultSortDirection` is changed, and clicking it
-subsequently reverses the order. Handle the `onsort` event handler to update
-the table with the new column index and sort direction.
+the column on which you want to enable sorting. Clicking a column header sorts rows by ascending order, and clicking it subsequently reverses the order. Handle the `onsort` event to update the table with the new column index and sort direction.
 
-Here's an example of the method that's called by the `onsort`
-event handler.
+Here's an example of an `onsort` event handler.
 
 ```javascript
-        // The method onsort event handler
-        updateColumnSorting(event) {
-            var fieldName = event.detail.fieldName;
-            var sortDirection = event.detail.sortDirection;
-            // assign the latest attribute with the sorted column fieldName and sorted direction
-            this.sortedBy = fieldName;
-            this.sortedDirection = sortDirection;
-            this.data = this.sortData(fieldName, sortDirection);
-       }
+data = data;
+columns = columns;
+sortDirection = 'asc';
+sortedBy;
+// The method onsort event handler
+handleSort(event) {
+    const { fieldName: sortedByField, sortDirection } = event.detail;
+    const cloneData = [...this.data];
+
+    cloneData.sort(this.sortBy(sortedByField, sortDirection === 'asc' ? 1 : -1));
+    this.data = cloneData;
+    this.sortDirection = sortDirection;
+    this.sortedBy = sortedByField;
+}
 ```
 
+The handler assigns `fieldName` to `sortedByField`, which stores the name of the field that is currently being sorted. It also retrieves `sortDirection` from the `sort` event. On first sort, `sortDirection` is `asc`.
+
+To keep the original data intact, `cloneData` creates a shallow copy of the `data` array. The handler passes in the comparison function `sortBy` and pass it to the [array sort() method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). Then it updates the `data` property with the sorted data, `sortDirection` with the new sort direction, and `sortedBy` with the sorted column.
+
+For more information, see the Sortable Column example in the Example tab.
+
 #### Working with Inline Editing
 
 When you make a column editable, a pencil icon appears when you hover over the
@@ -1279,18 +1306,19 @@ To display errors for a column, you must make the column editable. When there's
 
 For cells with standard types, the datatable uses the `lightning-input` component to handle editing of the cell content, and also to aid in handling error messages. To display error messages with custom data types, you can use `lightning-input` with the attribute `data-inputable` in your edit template. Then use the same techniques described here for displaying errors.
 
-To display error messages for any editable columns, specify the `errors` attribute in your  `lightning-datatable` component.
+To display error messages for any editable columns, specify the `errors` attribute in your `lightning-datatable` component.
 
 The `errors` attribute represents an object that specifies a `rows` property to provide information for the rows that contain errors and a `table` property to provide error information to display for the table.
 
 The `errors` attribute represents an object that accepts one or both of these properties.
 
 - `rows`-Provides information to display errors at the row level.
-- `table`-Provides information to display errors at the bottom of the table.  See **Display Errors for the Table**.
+- `table`-Provides information to display errors at the bottom of the table. See **Display Errors for the Table**.
 
 The `rows` object keys are the datatable’s `key-field` values, which provide a unique identifier for each row. Using this `key-field` value, you can provide custom errors on specific rows.
 
 Customize the error messages using these properties in the `rows` object.
+
 - `title`-Title for the error tooltip.
 - `messages`-Text of error messages, listed in an array.
 - `fieldNames`-Fields that triggered errors. Order the field names in a simple array to match the messages in the `messages` array.
@@ -1323,7 +1351,6 @@ In this example, you can click a button to trigger the errors to display.
 
 For row-level errors, define the error messages and field names in the `errors` object. To map the messages to `fieldNames`, specify an array of field names in the same order in which you specify the messages. In the example, when the error is triggered, the borders for the `amount` and `contact` cells in the row with the `key-field` 1 turn red to represent the error state. The messages are displayed in the tooltip in the number column, not on the cells themselves.
 
-
 ```javascript
     triggerError(event) {
            this.errors = {
@@ -1345,7 +1372,6 @@ For row-level errors, define the error messages and field names in the `errors`
 
 To display custom error messages under each field that has an error, you can specify the `fieldNames` property as an object of key-value pairs specifying the field name and the message like this:
 
-
 ```javascript
     triggerError(event) {
            this.errors = {
@@ -1373,7 +1399,6 @@ If a cell is in the error state, the error message appears below the field when
 
 To display error messages at the bottom of the table, use the `table` property in the `error` object like this:
 
-
 ```javascript
   triggerError(event) {
            this.errors = {
@@ -1421,6 +1446,7 @@ To display errors on rows and at the bottom of the table, declare both the `rows
             };
         }
 ```
+
 #### Text Wrapping and Clipping
 
 You can wrap or clip text within columns. Text wrapping expands the rows vertically to reveal more content. Text clipping truncates the content to a single line within the column.
@@ -1433,11 +1459,11 @@ content is clipped by default.
 
 Text wrapping and clipping are not supported for row number columns and the following data types:
 
--   action
--   boolean
--   button
--   button-icon
--   date-local
+- action
+- boolean
+- button
+- button-icon
+- date-local
 
 For `text` data type, text clipping converts newline characters to spaces and condenses multiple spaces or tabs to one space. Text clipping suppresses line breaks, truncates content to fit a single line in the column, and adds a trailing ellipsis. Text wrapping breaks lines and hyphenates words as needed to fit the column.
 
@@ -1475,9 +1501,9 @@ To return the name of the action, use the `event.target.action.name` property.
 
 You can also wrap or clip the text in the column header with the `wrap-table-header` attribute. The property has three possible values:
 
--   none (default)
--   all
--   by-column
+- none (default)
+- all
+- by-column
 
 `none` causes clipping on all column headers and `all` causes wrapping on all column headers. `by-column` wraps the header for columns that have the **Wrap text** setting enabled and clips the header for columns that have the **Clip text** setting enabled.
 
@@ -1549,21 +1575,21 @@ You can use data tables in navigation mode and action mode using the keyboard.
 To enter navigation mode, tab into the data table, which triggers focus on the
 first data cell in the table body on initial load. Use the arrow keys to move around the table. If you use the arrow key to move to another cell and then click away from the datatable, tab back into the datatable to place focus on the last cell you were on.
 
-To enter action mode, press the Enter key or Space Bar. You can navigate to each actionable element in the table using the Tab key.
+To enter action mode, press Enter or the Spacebar. You can navigate to each actionable element in the table using the Tab key.
 
-When using custom types, add additional attributes to make all elements of the component accessible. To make elements focusable, pass `tabindex="internalTabIndex"` all the way down to every component or element in the custom type. All focusable elements also must include `data-navigation="enable"`. If you don't want the element to be focusable, use `tabindex=-1`. For more information, see [Datatable Accessibility](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-a11y.html).
+When focus is on a cell that contains a link, press Enter to activate the link. If the link is a URL, the browser directs you to the website. If the link is a phone number or email, your browser prompts you to open the appropriate app for the link.
 
-Columns can be resized in action mode. First, navigate to the header using the arrow keys. Then, press the Tab key to activate the column divider to resize a column. You can resize a column by increasing or decreasing its width using one of the following key combinations.
+When using custom types, add additional attributes to make all elements of the component accessible. To make elements focusable, pass `tabindex={internalTabIndex}` all the way down to every component or element in the custom type. All focusable elements also must include `data-navigation="enable"`. If you don't want the element to be focusable, use `tabindex=-1`. For more information, see [Datatable Accessibility](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-a11y.html) in the Lightning Web Components Developer Guide.
 
--   Right and Left Arrow keys
--   Up and Down Arrow keys
--   Page Up and Page Down keys
+##### Resize Columns Using Arrow Keys
 
-When you resize a column, the new column width is announced by assistive technology. To finish resizing the column and return to navigation mode, press the Esc key.
+Columns can be resized in action mode. First, navigate to the column header using the arrow keys. Then, press the Tab key to activate the column divider to resize a column. You can resize a column by increasing or decreasing its width using one of the following key combinations.
 
-When focus is on a cell that contains a link, pressing enter to navigate to
-the link is currently not supported. This limitation applies to cells that
-contain data of type url, phone, and email.
+- Right and Left Arrow keys
+- Up and Down Arrow keys
+- Page Up and Page Down keys
+
+When you resize a column, the new column width is announced by assistive technology. To finish resizing the column and return to navigation mode, press the Esc key.
 
 ##### Apply Focus on an Active Cell
 
@@ -1575,8 +1601,8 @@ To programmatically apply focus to the active cell, use the `focus()` method. Fo
     key-field="id"
     data={data}
     columns={columns}></lightning-datatable>
-<lightning-button 
-    label="Focus" 
+<lightning-button
+    label="Focus"
     onclick={handleFocus}></lightning-button>
 ```
 
@@ -1664,16 +1690,16 @@ The event fired when the a table column is resized, which depends on which width
 
 In the default `fixed` width mode, the `resize` event is fired when:
 
--   The table renders initially
--   You manually resize a column
--   The number of columns changes on a subsequent rerender
+- The table renders initially
+- You manually resize a column
+- The number of columns changes on a subsequent rerender
 
 In `auto` width mode, the event is fired only when you manually resize a column. See **Implementing Fixed Width Mode** and **Implementing Auto Width Mode** for more information.
 
 The `resize` event is _not_ fired in the following cases.
 
--   You resize the browser or viewport, causing adjustments in the column widths
--   You change the column definition, but not the number of columns, causing adjustments in the column widths.
+- You resize the browser or viewport, causing adjustments in the column widths
+- You change the column definition, but not the number of columns, causing adjustments in the column widths.
 
 The `resize` event returns the following parameters.
 
@@ -1696,9 +1722,9 @@ The event fired when the row is selected.
 
 The `rowselection` event returns the following parameter.
 
-| Parameter    | Type   | Description                             |
-| ------------ | ------ | --------------------------------------- |
-| selectedRows | object | The data in the rows that are selected. |
+| Parameter     | Type   | Description                                                                                                            |
+| ------------- | ------ | ---------------------------------------------------------------------------------------------------------------------- |
+| selectedRows  | object | The data in the rows that are selected.                                                                                |
 | config.action | string | The type of selection event. Valid options include 'selectAllRows', 'deselectAllRows', 'rowSelect', and 'rowDeselect'. |
 
 The event properties are as follows.
@@ -1733,10 +1759,11 @@ The event fired when a column is sorted.
 
 The `sort` event returns the following parameters.
 
-| Parameter     | Type   | Description                                                    |
-| ------------- | ------ | -------------------------------------------------------------- |
-| fieldName     | string | The fieldName that controls the sorting.                       |
-| sortDirection | string | The sorting direction. Valid options include 'asc' and 'desc'. |
+| Parameter         | Type    | Description                                                    |
+| ----------------- | ------- | -------------------------------------------------------------- |
+| fieldName         | string  | The fieldName that controls the sorting.                       |
+| isMultiColumnSort | boolean | Reserved for internal use. Defaults to false.                  |
+| sortDirection     | string  | The sorting direction. Valid options include 'asc' and 'desc'. |
 
 The event properties are as follows.
 
@@ -1746,7 +1773,6 @@ The event properties are as follows.
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                             |
 
-
 #### LWC Recipes
 
 The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

package/src/lightning/datatable/__docs__/max-edit-limit.md

@@ -0,0 +1,35 @@
+#### Limiting the Number of Editable Rows (Internal Use Only)
+
+**Note: This feature is for internal use only.**
+
+The `max-edit-limit` attribute controls the maximum number of distinct rows that can contain draft values at save time. This feature is designed specifically for scenarios where checkbox selection is used exclusively for mass data updates within the datatable.
+
+```html
+<lightning-datatable
+    key-field="Id"
+    data={data}
+    columns={columns}
+    max-edit-limit="10"
+>
+</lightning-datatable>
+```
+
+In this example, the datatable allows a maximum of 10 rows to be edited simultaneously. The limit applies to the combined total of:
+
+- Rows with existing draft values (from inline editing)
+- Rows selected via checkboxes (for mass editing operations)
+
+#### Behavior When the Edit Limit is Reached
+
+When adding more rows would exceed the specified limit, the datatable automatically:
+
+- **Disables row selection checkboxes** to prevent additional row selections
+- **Hides edit icons** on rows that cannot be edited due to the limit
+- **Preserves editing capabilities** for rows that are already edited or selected
+- **Trims programmatically set selections** to respect the limit when using the `selected-rows` API
+
+This ensures that users can continue working with their current edits while preventing the limit from being exceeded. Rows that already contain draft values or are currently selected remain fully editable to support mass editing workflows.
+
+#### Programmatic Selection
+
+When using the `selected-rows` API to programmatically select rows, the datatable automatically limits the selection to respect the `max-edit-limit`. If there are already rows with draft values, the number of rows that can be selected is reduced accordingly to ensure the total number of editable rows (edited + selected) doesn't exceed the limit.

package/src/lightning/datatable/__docs__/multi-column-sorting.md

@@ -12,8 +12,8 @@ Multi-column sorting uses the same pattern as single-column sorting with some ad
 
 Changes to specific attributes of `lightning-datatable` enable developers to use multi-column sorting. These changes include:
 
--   `sorted-by`: Accepts either a single column's `fieldName` or an array of `fieldNames`.
--   `sorted-direction`: Accepts either a single value of 'asc' or 'desc' or an array of such values.
+- `sorted-by`: Accepts either a single column's `fieldName` or an array of `fieldNames`.
+- `sorted-direction`: Accepts either a single value of 'asc' or 'desc' or an array of such values.
 
 The nth value in the `sorted-direction` array represents the sorting direction of the nth column listed in the `sorted-by` array. For example, a `sorted-direction` array may look like `['asc', 'desc', 'asc']` and its `sorted-by` array may be `['age', 'weight', 'height']`. In this case, `age` is sorted ascending, `weight` is sorted descending, and `height` is sorted ascending.
 
@@ -52,8 +52,8 @@ Multi-column sorting can be accessed either directly within the datatable or con
 
 To access multi-column sort from within the datatable itself, add the following attributes to lightning-datatable:
 
--   `render-mode`: Multi-column sorting is available for `role-based` and `role-based-inline` modes.
--   `show-actions-menu`: Displays a button menu in the top-right corner of the datatable, where multi-column sorting rules can be configured through a modal.
+- `render-mode`: Multi-column sorting is available for `role-based` and `role-based-inline` modes.
+- `show-actions-menu`: Displays a button menu in the top-right corner of the datatable, where multi-column sorting rules can be configured through a modal.
 
 The `lightning-datatable` markup for multi-column sorting should look like this:
 

package/src/lightning/datatable/__docs__/row-hover-highlight-class.md

@@ -0,0 +1,20 @@
+#### Adding Column Styles On Row Hover and Focus (Internal Use Only)
+
+**Note: This feature is for internal use only.**
+
+To apply SLDS classes to a column on row hover or focus, pass the classes to the `highlightClass` cell attribute.
+
+```javascript
+const columns = [
+    {
+        label: 'Account Name',
+        fieldName: 'Name',
+        cellAttributes: {
+            class: 'slds-text-color_success',
+            highlightClass: 'slds-theme_alert-texture slds-text-title_caps',
+        },
+    }, // other column data
+];
+```
+
+If the `class` cell attribute is also present, only the classes you provide via `highlightClass` are applied on row hover or focus.

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

@@ -20,9 +20,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

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

@@ -20,9 +20,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             boolean: getRandom() < 0.5,
             website: 'www.salesforce.com',
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             currency: Math.floor(getRandom() * 100),
-            date: new Date(Date.now() + 86400000 * Math.ceil(getRandom() * 20)),
+            date: new Date(Date.now() + (86400000 * Math.ceil(getRandom() * 20))),
             dateLocal: new Date(Date.now()),
             email: 'test@salesforce.com',
             location: {

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

@@ -21,9 +21,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

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

@@ -21,9 +21,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

package/src/lightning/datatable/__examples__/withInfiniteLoading/generateDataWithDelay.js

@@ -3,10 +3,9 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-// eslint-disable-next-line @lwc/lwc/no-async-await
 export default async function generateData({ amountOfRecords }) {
     // Adding fake delay
-    // eslint-disable-next-line @lwc/lwc/no-async-operation
+
     await new Promise((resolve) => setTimeout(resolve, 2000));
 
     // seeded PRNG function
@@ -25,9 +24,9 @@ export default async function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

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

@@ -21,18 +21,16 @@ export default class DatatableWithInfiniteLoading extends LightningElement {
     totalNumberOfRows = 250;
     loadMoreOffset = 20;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
     async connectedCallback() {
         const data = await generateDataWithDelay({ amountOfRecords: 100 });
         this.data = data;
     }
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
     async handleLoadMore(event) {
         const datatable = event.target;
-        //Displays a spinner to signal that data is being loaded
+        // Displays a spinner to signal that data is being loaded
         datatable.isLoading = true;
-        //Displays "Loading" text when more data is being loaded
+        // Displays "Loading" text when more data is being loaded
         this.loadMoreStatus = 'Loading';
 
         const newData = await generateDataWithDelay({ amountOfRecords: 50 });

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

@@ -20,9 +20,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

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

@@ -20,9 +20,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });

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

@@ -20,9 +20,9 @@ export default function generateData({ amountOfRecords }) {
             name: `Name (${index})`,
             website: 'www.salesforce.com',
             amount: Math.floor(getRandom() * 100),
-            phone: `${Math.floor(getRandom() * 9000000000) + 1000000000}`,
+            phone: `${Math.floor((getRandom() * 9000000000)) + 1000000000}`,
             closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(getRandom() * 20)
+                Date.now() + (86400000 * Math.ceil(getRandom() * 20))
             ),
         };
     });