diff --git a/_data/components/otableData/00table.yml b/_data/components/otableData/00table.yml index 566fae20e..735469ae1 100644 --- a/_data/components/otableData/00table.yml +++ b/_data/components/otableData/00table.yml @@ -260,6 +260,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 +562,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" \ No newline at end of file diff --git a/_data/components/otableData/renderers/12tableColumnRendererChip.yml b/_data/components/otableData/renderers/12tableColumnRendererChip.yml new file mode 100644 index 000000000..8cdd9dd52 --- /dev/null +++ b/_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"] +}] \ No newline at end of file diff --git a/_data/components/otableData/renderers/13tableColumnRendererList.yml b/_data/components/otableData/renderers/13tableColumnRendererList.yml new file mode 100644 index 000000000..d55a27b39 --- /dev/null +++ b/_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"] +}] \ No newline at end of file diff --git a/_data/components/otableData/types/OTableGlobalConfig.yml b/_data/components/otableData/types/OTableGlobalConfig.yml index 18d295e49..40375a2de 100644 --- a/_data/components/otableData/types/OTableGlobalConfig.yml +++ b/_data/components/otableData/types/OTableGlobalConfig.yml @@ -48,5 +48,39 @@ 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 : "false", + 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." +} + +] diff --git a/assets/images/components/tabla/renderers_table.png b/assets/images/components/tabla/renderers_table.png index bd8c9c5e3..a6131c7c7 100644 Binary files a/assets/images/components/tabla/renderers_table.png and b/assets/images/components/tabla/renderers_table.png differ diff --git a/docs/aditional-information/52-versions.md b/docs/aditional-information/52-versions.md index e3ea2fcc7..0f1233c7d 100644 --- a/docs/aditional-information/52-versions.md +++ b/docs/aditional-information/52-versions.md @@ -28,14 +28,18 @@ In this section you can check the different releases of **OntimizeWeb** and its + + 15.8.0 + 15.1.1 + 15.0.1
15.0.0 + 15.3.0 + 15.1.2
15.1.1
15.1.0
15.0.0 + 15.1.0 + 15.1.2
15.1.1
15.1.0
15.0.0 + 15.7.1 - 15.1.1 - 15.0.1
15.0.0 15.2.1
15.2.0 - 15.1.2
15.1.1
15.1.0
15.0.0 - 15.1.0 - 15.1.2
15.1.1
15.1.0
15.0.0 15.7.0 diff --git a/docs/components/data/35-o-table.component.md b/docs/components/data/35-o-table.component.md index 5be87404f..34544ceb7 100644 --- a/docs/components/data/35-o-table.component.md +++ b/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 - + @@ -398,9 +401,30 @@ You can see different predefined table cell renderers in the example below. + + + + + + + + + + + + ``` +```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 ``` +**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 + + + + + + +``` +**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 + + + + + +``` ### Custom renderers