[ACS-9012] Add the option to truncate display value in text column (#10440)

* [ACS-9012] Add the option to truncate disaplay value in text column

* [ACS-9012] Use slice as substr is deprecated

* [ACS-9012] Remove redundant param

docs/core/components/data-column.component.md

@@ -65,6 +65,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | currencyConfig | `CurrencyConfig` | [Default currency config](#default-currency-config) | Currency configuration to customize the formatting and display of currency values within the component. |
 | decimalConfig | `DecimalConfig` | [Default decimal config](#default-decimal-config) | Decimal configuration to customize the formatting and display of decimal values within the component. |
 | dateConfig | `DateConfig` | [Default date config](#default-date-config) | Date configuration to customize the formatting and localization of date values within the component. |
+| maxTextLength | `number` | 250 | Max length of the text displayed in column before truncation. |
 
 ## Properties configuration
 
@@ -467,6 +468,31 @@ const shouldPerformAction = this.columns
 if (shouldPerformAction) { /* action */}
 ```
 
+### Specifying max text length in the column
+
+If you want to restrict max number of characters displayed in the column you can use `maxTextLength` param.
+
+Example of using `maxTextLength` from a JSON config file:
+
+```json
+[
+ {"type": "text", "key": "id", "title": "Id"},
+ {"type": "text", "key": "name", "title": "name", "maxTextLength": 100},
+]
+```
+
+HTML `<data-column>` element example:
+
+```html
+...
+    <data-columns>
+        <data-column [maxTextLength]="100" key="name" title="Name"></data-column>
+        ...
+    </data-columns>
+...
+```
+
+
 ## See also
 
 - [Document list component](../../content-services/components/document-list.component.md)

docs/core/pipes/truncate.pipe.md

@@ -0,0 +1,27 @@
+---
+Title: Truncate pipe
+Added: v7.0.0-alpha.7
+Status: Active
+Last reviewed: 2024-11-28
+---
+
+# Truncate Pipe
+
+Truncates the text when it exceeds specified max length. It also appends provided ellipsis at the end of the string.
+
+## Basic Usage
+
+<!-- {% raw %} -->
+
+```HTML
+<div>
+    {{ textToTruncate | truncate:100:'***' }}
+</div>
+```
+
+<!-- {% endraw %} -->
+
+| Name          | Type     | Default value | Description                                                            |
+| ------------- | -------- | ------------- | ---------------------------------------------------------------------- |
+| maxTextLength | `number` | 250           | Max length of the text that should be displayed prio to truncating.    |
+| ellipsis      | `string` | `...`         | String which will be appended to the text when truncating will happen. |