diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html
index 06c6a578c..65c428672 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html
@@ -6,13 +6,13 @@
Description |
- margin: any (string | object) |
+ margin: string | 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.
+ in order to specify different margin sizes.
|
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts
index 7088ed359..f416bf9c5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts
@@ -4,6 +4,22 @@ import { BehaviorSubject } from "rxjs";
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
import { CssUtils } from "../utils";
+type Space =
+ | "xxsmall"
+ | "xsmall"
+ | "small"
+ | "medium"
+ | "large"
+ | "xlarge"
+ | "xxlarge";
+
+type Margin = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
@Component({
selector: "dxc-table",
templateUrl: "./dxc-table.component.html",
@@ -11,11 +27,16 @@ import { CssUtils } from "../utils";
providers: [CssUtils, BackgroundProviderService],
})
export class DxcTableComponent {
- @Input() margin;
- @HostBinding("class") className;
+ /**
+ * 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 margin sizes.
+ */
+ @Input() margin: Space | Margin;
+ @HostBinding("class") className;
defaultInputs = new BehaviorSubject({});
-
currentBackgroundColor: string;
constructor(private utils: CssUtils) {}
@@ -39,8 +60,8 @@ export class DxcTableComponent {
getDynamicStyle(inputs) {
return css`
div#divTable {
- ${this.utils.getMargins(this.margin)}
- ${this.calculateWidth(this.margin)};
+ ${this.utils.getMargins(inputs.margin)}
+ ${this.calculateWidth(inputs.margin)};
overflow-y: auto;
&::-webkit-scrollbar {
width: 8px;
@@ -103,9 +124,12 @@ export class DxcTableComponent {
`;
}
- private calculateWidth = (margin: any) => {
- return margin ?`width: calc(100% - ${this.utils.getMarginValue(margin, "left")} - ${this.utils.getMarginValue(
- margin,"right")})`: '';
- }
-
+ private calculateWidth = (margin: Space | Margin) => {
+ return margin
+ ? `width: calc(100% - ${this.utils.getMarginValue(
+ margin,
+ "left"
+ )} - ${this.utils.getMarginValue(margin, "right")})`
+ : "";
+ };
}