lightning-base-components 1.26.4-alpha → 1.27.2-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.                                                                                                                                                                                                                     |
@@ -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.
@@ -1191,27 +1191,33 @@ rows a and b will be selected.
 #### 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 +1285,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 +1330,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 +1351,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 +1378,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 +1425,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 +1438,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 +1480,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.
 
@@ -1555,9 +1560,9 @@ When using custom types, add additional attributes to make all elements of the c
 
 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.
 
--   Right and Left Arrow keys
--   Up and Down Arrow keys
--   Page Up and Page Down keys
+- 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.
 
@@ -1575,8 +1580,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 +1669,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 +1701,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 +1738,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 +1752,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__/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/__requirements__/column_widths_requirements.md

@@ -6,114 +6,114 @@ Refer the below specifications for each mode and what each mode does in various
 
 ### INITIAL RENDER
 
--   should size the columns based on the defined column widths when the column definitions are passed
-    and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
+- should size the columns based on the defined column widths when the column definitions are passed
+  and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
 
--   should size the columns by giving equal widths for all the columns when the column definitions have no defined widths (fixedWidth or initialWidth)
-    and no data is set yet.
-    Width is calculated by taking total available width for datatable and dividing equally amongst the columns. Columns widths
-    for certain types like Row Number, Selection column, Action column are controlled by the component and are fixed.
+- should size the columns by giving equal widths for all the columns when the column definitions have no defined widths (fixedWidth or initialWidth)
+  and no data is set yet.
+  Width is calculated by taking total available width for datatable and dividing equally amongst the columns. Columns widths
+  for certain types like Row Number, Selection column, Action column are controlled by the component and are fixed.
 
--   should use same column widths as set currently when data is set at a later point and column definitions are already available.
+- should use same column widths as set currently when data is set at a later point and column definitions are already available.
 
 ### SUBSEQUENT RENDERS
 
--   should adjust column widths and distribute widths according to first two rules when column definitions are changed. Change in
-    column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
-    of columns with changes for them to take effect.
+- should adjust column widths and distribute widths according to first two rules when column definitions are changed. Change in
+  column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
+  of columns with changes for them to take effect.
 
--   should use same column widths as set currently when the data is changed. Change in data could be either new data passed or data removed
-    or change in existing data.
+- should use same column widths as set currently when the data is changed. Change in data could be either new data passed or data removed
+  or change in existing data.
 
--   should adjust column widths as per first two rules when the row number offset defined by `rowNumberOffset` attribute is changed.
+- should adjust column widths as per first two rules when the row number offset defined by `rowNumberOffset` attribute is changed.
 
--   should adjust column widths as per first two rules when the browser window is resized.
+- should adjust column widths as per first two rules when the browser window is resized.
 
--   should adjust column widths as per first two rules when the container containing the datatable changes in width.
+- should adjust column widths as per first two rules when the container containing the datatable changes in width.
 
--   should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
-    (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
-    Manually resized columns will get same fixed width henceforth.
-    Manual resizing can be done either using -
+- should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
+  (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
+  Manually resized columns will get same fixed width henceforth.
+  Manual resizing can be done either using -
 
-*   using mouse
-*   using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
-*   on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
+* using mouse
+* using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
+* on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
 
--   should adjust column widths to fill the container space as per first two rules with the exception of manually-resized columns
-    when the container is resized due to browser resize or container width changes.
+- should adjust column widths to fill the container space as per first two rules with the exception of manually-resized columns
+  when the container is resized due to browser resize or container width changes.
 
 ## AUTO WIDTHS MODE
 
 ### INITIAL RENDER
 
--   should size the columns based on the defined column widths when the column definitions are passed
-    and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
+- should size the columns based on the defined column widths when the column definitions are passed
+  and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
 
--   should set widths of columns based on the visual width distribution of the column labels when the column definitions are passed but no data is set yet.
-    If a column has too long label, the width is clamped by the `maxColumnWidth` attribute set on the datatable which is 1000px by default. If a column gets
-    too small in width, the width is clamped to `minColumnWidth` attribute set on the datatable which is 50px by default.
-    With visual width distribution of labels in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
-    as compared to columns which would take less space given their labels.
+- should set widths of columns based on the visual width distribution of the column labels when the column definitions are passed but no data is set yet.
+  If a column has too long label, the width is clamped by the `maxColumnWidth` attribute set on the datatable which is 1000px by default. If a column gets
+  too small in width, the width is clamped to `minColumnWidth` attribute set on the datatable which is 50px by default.
+  With visual width distribution of labels in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
+  as compared to columns which would take less space given their labels.
 
--   should size columns based on the column labels and defined widths when some columns have fixed or initialWidths defined and some dont and no data is set yet.
+- should size columns based on the column labels and defined widths when some columns have fixed or initialWidths defined and some dont and no data is set yet.
 
--   should set widths of columns based on the visual width distribution of the data in columns when the column definitions are already set and data is now set.
-    With visual width distribution of data in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
-    as compared to columns which would take less space given the data in the columns. Same rules apply w.r.t to clamping to maxColumnWidth or minColumnWidth
-    when width would exceed maxColumnWidth or when width would be less than minColumnWidth resp. If a column with long content has wrapText set to true,
-    that column should take less space than it would have taken if there was no wrapText. It should be given width taking into consideration the visual distribution
-    of this column taking into account text wrapped lines.
+- should set widths of columns based on the visual width distribution of the data in columns when the column definitions are already set and data is now set.
+  With visual width distribution of data in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
+  as compared to columns which would take less space given the data in the columns. Same rules apply w.r.t to clamping to maxColumnWidth or minColumnWidth
+  when width would exceed maxColumnWidth or when width would be less than minColumnWidth resp. If a column with long content has wrapText set to true,
+  that column should take less space than it would have taken if there was no wrapText. It should be given width taking into consideration the visual distribution
+  of this column taking into account text wrapped lines.
 
 ### SUBSEQUENT RENDERS
 
--   should trigger auto-resize of column widths with new ratios of data in columns when the data is changed (same number of rows)
+- should trigger auto-resize of column widths with new ratios of data in columns when the data is changed (same number of rows)
 
--   should not trigger resize of column widths at all when new data is passed or data is removed (different number of rows).
-    The columns should continue to use their set widths.
+- should not trigger resize of column widths at all when new data is passed or data is removed (different number of rows).
+  The columns should continue to use their set widths.
 
--   should trigger auto-resize of column widths with new ratios when column definitions are changed. Change in
-    column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
-    of columns with changes for them to take effect.
+- should trigger auto-resize of column widths with new ratios when column definitions are changed. Change in
+  column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
+  of columns with changes for them to take effect.
 
--   should keep the width ratios and adjust column widths to fit new screen size when the browser window is resized.
+- should keep the width ratios and adjust column widths to fit new screen size when the browser window is resized.
 
--   should keep the width ratios and adjust column widths to fit new container size when the container containing the datatable changes in width.
+- should keep the width ratios and adjust column widths to fit new container size when the container containing the datatable changes in width.
 
--   should adjust column widths with new ratios when the row number offset defined by `rowNumberOffset` attribute is changed.
+- should adjust column widths with new ratios when the row number offset defined by `rowNumberOffset` attribute is changed.
 
--   should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
-    (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
-    Manually resized columns will get same fixed width henceforth.
-    Manual resizing can be done either using -
+- should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
+  (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
+  Manually resized columns will get same fixed width henceforth.
+  Manual resizing can be done either using -
 
-*   using mouse
-*   using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
-*   on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
+* using mouse
+* using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
+* on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
 
--   should adjust column widths to fill the container space as per existing width ratios with the exception of manually-resized columns
-    when the container is resized due to browser resize or container width changes after manual resize of a column.
+- should adjust column widths to fill the container space as per existing width ratios with the exception of manually-resized columns
+  when the container is resized due to browser resize or container width changes after manual resize of a column.
 
 ## Open questions
 
--   TODO - Change from using width values stored in tracked variable to setting widths directly in dom
+- TODO - Change from using width values stored in tracked variable to setting widths directly in dom
 
--   TODO - When to fire resize event in cases above should be agreed upon and documented - Done
+- TODO - When to fire resize event in cases above should be agreed upon and documented - Done
 
 ### IMPLEMENTATION DETAILS
 
--   Datatable instantiates columnWidthManager
+- Datatable instantiates columnWidthManager
 
--   columnWidthManager listens to all the parameters that widthManager should care about and sets flag if resizingIsNeeded
-    after rendering is done.
+- columnWidthManager listens to all the parameters that widthManager should care about and sets flag if resizingIsNeeded
+  after rendering is done.
 
--   columnWidthManager also keep a track of if the width resizing strategy should recalculate width ratios.
+- columnWidthManager also keep a track of if the width resizing strategy should recalculate width ratios.
 
--   During renderedCallback, columnWidthManager adjustColumnsSize is called which then checks the flag to see if resizing is needed
-    and calls appropriate strategy to adjust columns size.
+- During renderedCallback, columnWidthManager adjustColumnsSize is called which then checks the flag to see if resizing is needed
+  and calls appropriate strategy to adjust columns size.
 
--   In case of autoWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
-    and then setting data triggers rerender, another resize and another rerender for widths.
+- In case of autoWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
+  and then setting data triggers rerender, another resize and another rerender for widths.
 
--   In case of fixedWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
-    but setting data doesnt trigger rerender for widths.
+- In case of fixedWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
+  but setting data doesnt trigger rerender for widths.

package/src/lightning/datatable/__requirements__/requirements.md

@@ -1,2 +1,2 @@
--   Column Widths Resizing Requirements
+- Column Widths Resizing Requirements
     > For Specification regarding how datatable calculates column widths Refer _column_widths_requirements.md_