diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/properties/resultset-table-properties/resultset-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/properties/resultset-table-properties/resultset-table-properties.component.html
index 538a4a313..875671541 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/properties/resultset-table-properties/resultset-table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/properties/resultset-table-properties/resultset-table-properties.component.html
@@ -11,57 +11,51 @@
| Description |
- | margin: any (string | object) |
- |
+ collectionResource: object[] |
+ [] |
- Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
- 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an
- object with 'top', 'bottom', 'left' and 'right' properties in order to
- specify different padding sizes.
+ An array of objects with the values to display in the table. The key is
+ the column and the value is the property to be displayed in the cell.
|
+
+ | showGoToPage: boolean |
+ true |
+ Show page navigation select. |
+
| itemsPerPage: number |
5 |
Number of items per page. |
-
- | showGoToPage: boolean |
- false |
- Show page navigation select. |
-
| itemsPerPageOptions: number[] |
[]
|
-
- An array of objects representing the selectable options of the items per
- page input.
- |
+ An array of numbers representing the items per page options. |
- | collectionResource: object[] |
- [] |
-
- An array of objects with the values to display in the table. The key is
- the column and the value is the property to be displayed in the cell.
- |
+ tabIndexValue: number |
+ 0 |
+ Value of the tabindex attribute given to the sortable icon. |
- | onGoToPage: EventEmitter |
+ itemsPerPageFunction: EventEmitter |
|
- This event will emit the new page when the user interacts with the page
- navigation buttons or select.
+ This event will emit in case of the user selects an item per page option.
+ The value selected will be passed as a parameter.
|
- | itemsPerPageFunction: EventEmitter |
+ margin: string | object |
|
- This function will be called when the user picks an option for the
- itemsPerPage select. The value selected will be passed as a parameter.
+ Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
+ 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an
+ object with 'top', 'bottom', 'left' and 'right' properties in order to
+ specify different padding sizes.
|
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/resultset-table-directives/resultset-table-directives.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/resultset-table-directives/resultset-table-directives.component.html
index 4b7cb5a74..42388d370 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/resultset-table-directives/resultset-table-directives.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/resultset-table/resultset-table-directives/resultset-table-directives.component.html
@@ -15,8 +15,8 @@ Directives
- - isSortable:false
- - propertyName:''
+ - isSortable: false
+ - propertyName: ''
|
@@ -24,9 +24,12 @@ Directives
An array of objects representing if the column is going to be sorted and
the key value.
- - isSortable: boolean value if it is sorteable.
-
- propertyName: string with the key from the array of objects.
+ isSortable: Boolean value to indicate whether the column is
+ sortable or not.
+
+ -
+ propertyName: String with the key from the array of objects.
@@ -36,11 +39,6 @@ Directives
|
Column definition. |
-
- | tabIndexValue: number |
- 0 |
- Value of the tabindex for the sortable icon. |
-
| dxcCellDef: Iterable<string> |
|
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.html
index 00d7d5972..ea7d4b45c 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.html
@@ -20,103 +20,106 @@
-
-
- {{item['id']}}
- |
-
-
-
- {{item['name']}}
- |
-
-
-
- {{item['city']}}
- |
-
-
-
-
- |
-
-
+
+
+ {{ item["id"] }}
+ |
+
+
+
+ {{ item["name"] }}
+ |
+
+
+
+ {{ item["city"] }}
+ |
+
+
+
+
+ |
+
+
- header
subheader |
- header
subheader |
- header
subheader |
-
-
+ header
subheader |
+ header
subheader |
+ header
subheader |
+
+
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
- Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat.
|
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
|
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
-
+
+
| cell data |
cell data |
cell data |
-
+
-
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.ts
index f2dffb33c..b7a77b34c 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/table-preview/table-preview.component.ts
@@ -86,4 +86,8 @@ export class TablePreviewComponent implements OnInit, Stylable {
ngOnInit(): void {
this.className = this.getDynamicStyle();
}
+
+ itemsPerPageFunction(event) {
+ console.log("event:", event);
+ }
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/components/dxc-header-row/dxc-header-row.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/components/dxc-header-row/dxc-header-row.component.ts
index e7fc1df7b..dcb982300 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/components/dxc-header-row/dxc-header-row.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/components/dxc-header-row/dxc-header-row.component.ts
@@ -13,12 +13,12 @@ import { SortService } from "../../services/sort.service";
id="header-{{ columnName }}-{{ parentClassName }}"
propertyname="{{ propertyName }}"
[ngClass]="[isSortable ? 'isSortable' : '']"
+ [tabIndex]="isSortable ? tabIndexValue : -1"
>
{{ columnName }}
`,
styleUrls: ["./dxc-header-row-component.scss"],
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/directives/dxc-column-def.directive.ts b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/directives/dxc-column-def.directive.ts
index c309374ab..54a73e6a7 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/directives/dxc-column-def.directive.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/directives/dxc-column-def.directive.ts
@@ -7,7 +7,6 @@ import {
} from "@angular/core";
import { DxcCellDef } from "./dxc-cell-def.directive";
import { DXC_RESULTSET_TABLE } from "./../tokens";
-import { coerceNumberProperty } from '@angular/cdk/coercion';
/** Base interface for a cell definition. Captures a column's cell template definition. */
@@ -40,15 +39,6 @@ export class DxcColumnDef extends _DxcColumnDefBase {
@Input("sortable") sortable = { isSortable: false, propertyName: "" };
- @Input()
- get tabIndexValue(): number {
- return this._tabIndexValue;
- }
- set tabIndexValue(value: number) {
- this._tabIndexValue = coerceNumberProperty(value);
- }
- private _tabIndexValue;
-
/** @docs-private */
@ContentChild(DxcCellDef, { static: true }) cell: DxcCellDef;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/table.ts b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/table.ts
index 2a1ec622b..833d01c52 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/table.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/table.ts
@@ -59,9 +59,25 @@ import { DxcColumnDef } from "./directives/dxc-column-def.directive";
import { PaginationService } from "./services/pagination.service";
import { SortService } from "./services/sort.service";
import { Ordering } from "./directives/sorting.directive";
-import { coerceArray } from "@angular/cdk/coercion";
+import { coerceArray, coerceNumberProperty } from "@angular/cdk/coercion";
import { HostBinding } from "@angular/core";
+type Space =
+ | "xxsmall"
+ | "xsmall"
+ | "small"
+ | "medium"
+ | "large"
+ | "xlarge"
+ | "xxlarge";
+
+type Size = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
/** Interface used to provide an outlet for rows to be inserted into. */
export interface RowOutlet {
viewContainer: ViewContainerRef;
@@ -182,10 +198,17 @@ export const CDK_TABLE_TEMPLATE = `
],
})
export class DxcResultTable
- implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+ implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit
+{
+ /**
+ * Number of items per page.
+ */
@Input()
itemsPerPage: number = 5;
-
+ /**
+ * An array of objects with the values to display in the table.
+ * The key is the column and the value is the property to be displayed in the cell.
+ */
@Input()
get collectionResource(): Array {
return this._collectionResource;
@@ -194,14 +217,38 @@ export class DxcResultTable
this._collectionResource = coerceArray(value);
}
private _collectionResource;
-
- @Input() margin: string;
-
+ /**
+ * Size of the margin to be applied to the component
+ * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in
+ * order to specify different padding sizes.
+ */
+ @Input() margin: Space | Size;
+ /**
+ * An array of numbers representing the items per page options.
+ */
@Input() public itemsPerPageOptions: number[];
-
+ /**
+ * Show page navigation select.
+ */
@Input() public showGoToPage: boolean = true;
-
- @Output() itemsPerPageFunction: EventEmitter = new EventEmitter();
+ /**
+ * Value of the tabindex attribute given to the sortable icon.
+ */
+ @Input()
+ get tabIndexValue(): number {
+ return this._tabIndexValue;
+ }
+ set tabIndexValue(value: number) {
+ this._tabIndexValue = coerceNumberProperty(value);
+ }
+ private _tabIndexValue = 0;
+ /**
+ * This event will emit in case of the user selects an item per page
+ * option. The value selected will be passed as a parameter.
+ */
+ @Output() itemsPerPageFunction: EventEmitter =
+ new EventEmitter();
collectionData: BehaviorSubject> = new BehaviorSubject([]);
@@ -414,12 +461,11 @@ export class DxcResultTable
const factory = this.resolver.resolveComponentFactory(
DxcHeaderRowComponent
);
- const viewRef = this._headerOutlet.viewContainer.createComponent(
- factory
- );
+ const viewRef =
+ this._headerOutlet.viewContainer.createComponent(factory);
viewRef.instance.columnName = key;
viewRef.instance.isSortable = value.sortable.isSortable; //Save if header is sortable in the created component
- viewRef.instance.tabIndexValue = value.tabIndexValue;
+ viewRef.instance.tabIndexValue = this.tabIndexValue;
viewRef.instance.state = this.getMapStateHeaders().get(key); //Get header's current state for sorting and save it in the created component
viewRef.instance.parentClassName = this.className; // just in case there are more tables in the page
viewRef.instance.propertyName = value.sortable.propertyName;