New documentation about 15.8.0 release (#721)

_data/components/otableData/00table.yml

@@ -243,6 +243,12 @@ attributes: [{
   description: "Visible buttons in export dialog, separated by ';'. Default/no configured: show all. Empty value: hide all",
   required: "",
   default: "no"
+},{
+  name: "selection-on-row-click",
+  type: "yes|no|true|false",
+  description: "Indicates whether row selection is triggered when clicking on a row",
+  required: "",
+  default: "yes"
 }]
 
 inheritedOutputs: [{
@@ -260,6 +266,15 @@ outputs: [{
 },{
   name: "onRowDeleted",
   description: "Event triggered when there some row deletion"
+},{
+  name: "onSearch",
+  description: "Event triggered when quick filter changes"
+},{
+  name: "onSortChange",
+  description: "Emitted when sorting changes"
+},{
+  name: "onFilterByColumnChange ",
+  description: "Emitted when column filters change"
 }]
 
 methods: [{
@@ -553,6 +568,11 @@ methods: [{
   type: "method",
   returns: "Expression",
   description: "Returns the complex expression from the column filters."
+},{
+  name: "updateStateStorage",
+  type: "method",
+  description: "Updates the state storage with the current table configuration  when enabled."
+
 }]
 
 extraComponents: "otableData"

_data/components/otableData/renderers/12tableColumnRendererChip.yml

@@ -0,0 +1,51 @@
+class: "OTableCellRendererChipComponent"
+
+extends: "OBaseTableCellRenderer"
+
+directive: "o-table-cell-renderer-chip"
+title: "Cell renderer: chip"
+
+attributes: [{
+  name: "icon"
+},{
+  name: "translate",
+  type: "boolean",
+  default: "true",
+  description: "Whether to translate the text"
+},{
+  name: "icon-position",
+  type: "left | right",
+  default: "left",
+  description: "Icon position with respect to the text (if exists)"
+},{
+  name: "text",
+  type: "string",
+  default: "",
+  description: "Cell text"
+},
+{
+  name: "svg-icon"
+}]
+inherit_properties: [{
+  component: "OBaseTableCellRenderer",
+  path: "components/data/table/obasetablecellrenderer/api",
+  properties: [{
+    name: "column",
+    type: "property",
+    description: "Name of the column"
+  },{
+    name: "table",
+    type: "property"
+  },{
+    name: "tableColumn",
+    type: "property"
+  },{
+    name: "templateref"
+  }]
+}]
+
+inheritedAttributes: [{
+  component: "OBaseTableCellRenderer",
+  path: "components/data/table/obasetablecellrenderer/api",
+  attributes: ['filter-source', "filterFunction"]
+}]

_data/components/otableData/renderers/13tableColumnRendererList.yml

@@ -0,0 +1,31 @@
+class: "OTableCellRendererListComponent"
+
+extends: "OBaseTableCellRenderer"
+
+directive: "'o-table-cell-renderer-list"
+title: "Cell renderer: list"
+
+attributes: []
+inherit_properties: [{
+  component: "OBaseTableCellRenderer",
+  path: "components/data/table/obasetablecellrenderer/api",
+  properties: [{
+    name: "column",
+    type: "property",
+    description: "Name of the column"
+  },{
+    name: "table",
+    type: "property"
+  },{
+    name: "tableColumn",
+    type: "property"
+  },{
+    name: "templateref"
+  }]
+}]
+
+inheritedAttributes: [{
+  component: "OBaseTableCellRenderer",
+  path: "components/data/table/obasetablecellrenderer/api",
+  attributes: ['filter-source', "filterFunction"]
+}]

_data/components/otableData/types/OTableGlobalConfig.yml

@@ -48,5 +48,37 @@ attributes: [{
   default : "'click'",
   required : "",
   description : "Indicates the row height"
+},{
+  name: "horizontalScroll" ,
+  type: "boolean",
+  default : "false",
+  required : "",
+  description : "Indicates whether horizontal scroll is enabled."
+},{
+  name: "selectionOnRowClick",
+  type: "boolean",
+  default : "",
+  required : "",
+  description : "Indicates whether row selection is triggered when clicking on a row."
+},
+{
+  name: "showChartOnDemandOption",
+  type: "boolean",
+  default : "true",
+  required : "",
+  description : "Indicates whether to show or not the 'Cart on demand' option in the table menu."
+},
+{
+  name: "showReportOnDemandOption",
+  type: "boolean",
+  default : "true",
+  required : "",
+  description : "Indicates whether to show or not the 'Report on demand' option in the table menu."
+},
+{ name: "loading",
+  type: "{threshold: number, minVisibleRows: number}",
+  default : "{threshold:300 , minVisibleRows: 300}",
+  required : "",
+  description : "Configuration object for loading strategy."
 }]
 

docs/aditional-information/52-versions.md

@@ -28,14 +28,21 @@ In this section you can check the different releases of **OntimizeWeb** and its
         </tr>
     </thead>
     <tbody>
+    <tr>
+        <td>15.8.1</td>
+        <td rowspan="3">15.1.1</td>
+        <td rowspan="47">15.0.1<br>15.0.0</td>
+        <td rowspan="2">15.3.0</td>
+        <td rowspan="47">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
+        <td rowspan="7">15.1.0</td>
+        <td rowspan="47">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
+    </tr>
+    <tr>
+        <td>15.8.0</td>
+    </tr>
     <tr>
         <td>15.7.1</td>
-        <td>15.1.1</td>
-        <td rowspan="45">15.0.1<br>15.0.0</td>
         <td rowspan="5">15.2.1<br>15.2.0</td>
-        <td rowspan="45">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
-        <td rowspan="5">15.1.0</td>
-        <td rowspan="45">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
     </tr>
     <tr>
         <td>15.7.0</td>

docs/components/data/35-o-table.component.md

@@ -378,7 +378,7 @@ The data is displayed in the table cells as simple text by default. **OntimizeWe
 
 ### Predefined renderers
 
-**OntimizeWeb** offers you a set of prebuilt table cell renderers to include in your table. This cell renderers are the following data types: *action*, *boolean*, *real*, *currency*, *date*, *integer*, *image*, *percentage* and *service*.
+**OntimizeWeb** offers you a set of prebuilt table cell renderers to include in your table. This cell renderers are the following data types: *action*, *boolean*, *real*, *currency*, *date*, *integer*, *image*, *percentage*, *service*, *chip* and *list*.
 
 For adding a cell renderer to the cells of a table column, you have to configure the attribute `type` in the desired table column with the value that indicates the cell render you want to use. You may need to configure additional parametres depending on the cell renderer configured. Check the examples in the following sections and the attributes for each cell renderer in the **API** section of this page.
 
@@ -387,7 +387,10 @@ You can see different predefined table cell renderers in the example below.
 ![Predefined table cell renderers]({{ "/assets/images/components/tabla/renderers_table.png" | absolute_url }}){: .comp-example-img}
 
 ```html
-<o-table  attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="tableData" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
+<o-table  attr="accounts"
+    columns="PHOTO;NAME;ACCOUNT;ACCOUNTTYP;STARTDATE;HAS_CARDS;CARDS;BALANCE;INTERESRATE;CLOSED;COMMISSION"
+    visible-columns="PHOTO;NAME;ACCOUNT;ACCOUNTTYP;STARTDATE;HAS_CARDS;CARDS;BALANCE;INTERESRATE;COMMISSION"
+    title="ACCOUNTS" [static-data]="tableData" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
   <!--Date Renderer-->
   <o-table-column attr="STARTDATE" title="STARTDATE" type="date"> </o-table-column>
   <!--Currency Renderer-->
@@ -398,9 +401,30 @@ You can see different predefined table cell renderers in the example below.
   <o-table-column attr="NUMCARDS" title="NUMCARDS" type="integer"></o-table-column>
   <!--Boolean Renderer-->
   <o-table-column attr="COMMISSION" title="COMMISSION" type="boolean" render-true-value="check_circle" render-false-value="highlight_off" render-type="icon" boolean-type="string"></o-table-column>
+  <!--Translate Renderer-->
+  <o-table-column attr="HAS_CARDS" title="CARDS">
+    <o-table-cell-renderer-translate [translate-params]="translateArgsFn"></o-table-cell-renderer-translate>
+  </o-table-column>
+  <!--Chip Renderer-->
+  <o-table-column attr="ACCOUNTTYP">
+    <o-table-cell-renderer-chip></o-table-cell-renderer-chip>
+  </o-table-column>
+  <!--List Renderer-->
+  <o-table-column attr="CARDS"  tooltip="yes">
+    <o-table-cell-renderer-list></o-table-cell-renderer-list>
+  </o-table-column>
 </o-table>
 ```
 
+```scss
+.o-table-cell-renderer-chip-savings_account{
+  background-color: #E3ECF4FF;
+}
+.o-table-cell-renderer-chip-personal_account {
+  background-color: #D4C2E9BF;
+}
+```
+
 You can see this live example in the [OntimizeWeb playground]({{site.playgroundurl}}/main/data/table/renderer){:target="_blank"}.
 
 **Action cell renderer**
@@ -578,6 +602,46 @@ You can include the table cell renderer translate in your table column by config
   <o-table-cell-renderer-translate></o-table-cell-renderer-translate>
 </o-table-column>
 ```
+**Chip cell renderer**
+
+The **`chip` table cell renderer** allows displaying the content of a table cell as one or multiple visual chips, with support for icons, SVG icons, and automatic translation, set the column `type` to `chip`
+
+```html
+ <o-table-column attr="status" title="STATUS" type="chip"> </o-table-column>
+
+<!-- Equivalent code -->
+<o-table-column attr="status" title="STATUS">
+   <o-table-cell-renderer-chip></o-table-cell-renderer-chip>
+</o-table-column>
+```
+**List cell renderer**
+
+The **`list` table cell renderer** is used to display array values in a compact and user-friendly way inside a table cell.To use this renderer, set the column `type` to `list`
+
+* If the cell value is an array, only the **first element** is shown.
+* If the array contains more than one element, the number of remaining items is appended using the format `(+N)`.
+* A tooltip displays the **full list of values**, each one on a new line.
+
+This renderer is especially useful when table cells contain lists or multiple values and you want to avoid wide columns.
+
+**Display behavior**
+
+| Cell value        | Displayed text | Tooltip   |
+| ----------------- | -------------- | --------- |
+| `[]`              | *(empty)*      | *(empty)* |
+| `['A']`           | `A`            | `A`       |
+| `['A', 'B']`      | `A (+1)`       | `A\nB`    |
+| `['A', 'B', 'C']` | `A (+2)`       | `A\nB\nC` |
+| `'Single value'`  | `Single value` | *(empty)* |
+
+
+```html
+  <o-table-column  attr="items"   title="Items"  type="list"> </o-table-column>
+  <!-- Equivalent code -->
+  <o-table-column attr="status" title="STATUS">
+    <o-table-cell-renderer-list></o-table-cell-renderer-list>
+  </o-table-column>
+```
 
 ### Custom renderers
 
@@ -930,7 +994,7 @@ Often when displaying numbers in a table, users want to show summary results of
     quick-filter="yes"   filter-case-sensitive="true" >
     <o-table-column attr="BALANCE" title="BALANCE" type="currency" currency-symbol="€" thousand-separator=","></o-table-column>
     <o-table-column attr="INTERESRATE" title="INTERESRATE" type="real" ></o-table-column>
-    <o-table-column-aggregate attr="BALANCE" title="sum">
+    <o-table-column-aggregate attr="BALANCE" title="sum"></o-table-column-aggregate>
     <o-table-column-aggregate attr="INTERESRATE" [aggregate-function]="custom"></o-table-column-aggregate>
 </o-table>
 ```
@@ -1522,11 +1586,11 @@ If the selector `o-table-toolbar` is used together with `position='start'` the c
     <!-- Custom definition button -->
     <o-table-button attr="action1" (onClick)="onAction1()" label="Action1" icon="alarm"></o-table-button>
     <!-- Custom content toolbar in position start -->
-    <o-combo o-grid-toolbar position="start" label="Sort" width="100px"...></o-combo>
+    <o-combo o-table-toolbar position="start" label="Sort" width="100px"...></o-combo>
     <!-- Custom content toolbar in position end -->
-    <o-slide-toggle o-grid-toolbar position="end"....></o-slide-toggle>
+    <o-slide-toggle o-table-toolbar position="end"....></o-slide-toggle>
     ...
-  </o-grid>
+  </o-table>
 ```
 
 ![Add custom content in toolbar in position start]({{ "/assets/images/components/tabla/add-content-toolbar.png" | absolute_url }}){: .comp-example-img}