feat(stark-ui): add sticky action column to stark-table

  - added documentation / demo

ISSUES CLOSED: NationalBankBelgium#1143

packages/stark-ui/src/modules/action-bar/components/action-bar-config.intf.ts

@@ -13,4 +13,10 @@ export interface StarkActionBarConfig {
 	 * If false, then action bar will not be present on the page (optional)
 	 */
 	isPresent?: boolean;
+
+	/**
+	 * Should the actions always be shown on the right side of the table (sticky)
+	 * Default: false
+	 */
+	isSticky?: boolean;
 }

packages/stark-ui/src/modules/table/components/_table.component.scss

@@ -32,6 +32,20 @@
     }
   }
 
+  .table-container {
+    overflow: auto;
+  }
+
+  .mat-table-sticky:first-child {
+    padding-right: 10px;
+    border-right: 1px solid rgba(0, 0, 0, 0.12); // material-default
+  }
+
+  .mat-table-sticky:last-child {
+    padding-left: 10px;
+    border-left: 1px solid rgba(0, 0, 0, 0.12); // material-default
+  }
+
   table {
     width: 100%;
 
@@ -40,6 +54,9 @@
       &.hidden {
         display: none;
       }
+      .stark-action-bar .action-bar-wrapper {
+        flex-wrap: nowrap;
+      }
     }
 
     th {

packages/stark-ui/src/modules/table/components/column.component.html

@@ -1,4 +1,4 @@
-<ng-container matColumnDef>
+<ng-container matColumnDef [stickyEnd]="stickyEnd">
 	<!-- custom header that supports multi-column sorting -->
 	<!-- TODO: implement a MultiSort directive based on the Angular Material's MatSort once this is solved: https://github.com/angular/material2/issues/7226 -->
 	<th mat-header-cell *matHeaderCellDef [ngClass]="getHeaderClassNames()">

packages/stark-ui/src/modules/table/components/column.component.ts

@@ -147,6 +147,12 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent implemen
 	@Input()
 	public headerClassName?: string;
 
+	/**
+	 * Make the column stick to the right side of the table
+	 */
+	@Input()
+	public stickyEnd?: boolean = false;
+
 	/**
 	 * Output that will emit a specific column whenever its filter value has changed
 	 */

packages/stark-ui/src/modules/table/components/table.component.html

@@ -64,7 +64,7 @@
 	</div>
 </div>
 
-<div [ngClass]="{ 'fixed-header': isFixedHeaderEnabled }">
+<div [ngClass]="{ 'table-container': true, 'fixed-header': isFixedHeaderEnabled }">
 	<table #matTable mat-table [dataSource]="dataSource" [ngClass]="{ 'multi-sorting': isMultiSorting }">
 		<ng-container matColumnDef="select">
 			<th mat-header-cell *matHeaderCellDef>
@@ -111,6 +111,7 @@
 			*ngIf="tableRowsActionBarConfig && tableRowsActionBarConfig.actions"
 			[sortable]="false"
 			[name]="'STARK.TABLE.ACTIONS' | translate"
+			[stickyEnd]="tableRowsActionBarConfig.isSticky"
 		>
 			<ng-template let-context>
 				<stark-action-bar

showcase/src/app/demo-ui/components/index.ts

@@ -4,3 +4,4 @@ export * from "./table-with-custom-actions";
 export * from "./table-with-transcluded-action-bar";
 export * from "./table-with-fixed-header";
 export * from "./table-with-custom-styling";
+export * from "./table-with-sticky-actions";

showcase/src/app/demo-ui/components/table-with-sticky-actions/index.ts

@@ -0,0 +1 @@
+export * from "./table-with-sticky-actions.component";

showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.html

@@ -0,0 +1,10 @@
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[paginationConfig]="pagination"
+	[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+	customTableActionsType="alt"
+>
+	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_STICKY_ACTIONS</h1></header>
+</stark-table>

showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.scss

@@ -0,0 +1,9 @@
+::ng-deep table {
+  td,
+  th {
+    white-space: nowrap;
+    &.mat-cell {
+      padding-right: 20px;
+    }
+  }
+}

showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts

@@ -0,0 +1,166 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+
+// tslint:disable:no-duplicate-string
+const DUMMY_DATA: object[] = [
+	{
+		id: 1,
+		title: { label: "first title (value: 1)", value: 1 },
+		description: "number one",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 10,
+		title: { label: "second title (value: 2)", value: 2 },
+		description: "second description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 12,
+		title: { label: "third title (value: 3)", value: 3 },
+		description: "the third description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 2,
+		title: { label: "fourth title (value: 4)", value: 4 },
+		description: "description number four",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 23,
+		title: { label: "fifth title (value: 5)", value: 5 },
+		description: "fifth description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 222,
+		title: { label: "sixth title (value: 6)", value: 6 },
+		description: "the sixth description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 112,
+		title: { label: "seventh title (value: 7)", value: 7 },
+		description: "seventh description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 232,
+		title: { label: "eighth title (value: 8)", value: 8 },
+		description: "description number eight",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 154,
+		title: { label: "ninth title (value: 9)", value: 9 },
+		description: "the ninth description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 27,
+		title: { label: "tenth title (value: 10)", value: 10 },
+		description: "description number ten",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 86,
+		title: { label: "eleventh title (value: 11)", value: 11 },
+		description: "eleventh description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	},
+	{
+		id: 44,
+		title: { label: "twelfth title (value: 12)", value: 12 },
+		description: "the twelfth description",
+		info: "This is some info.",
+		more_info: "This is even more info.",
+		even_more_info: "This is a ludicrous amount of info."
+	}
+];
+// tslint:enable:no-duplicate-string
+
+@Component({
+	selector: "showcase-table-with-sticky-actions",
+	templateUrl: "./table-with-sticky-actions.component.html",
+	styleUrls: ["./table-with-sticky-actions.component.scss"]
+})
+export class TableWithStickyActionsComponent implements OnInit {
+	public data: object[];
+
+	public columns: StarkTableColumnProperties[];
+
+	public filter: StarkTableFilter;
+
+	public pagination: StarkPaginationConfig;
+
+	public tableRowsActionBarConfig: StarkActionBarConfig;
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
+
+	public ngOnInit(): void {
+		this.data = DUMMY_DATA;
+
+		this.columns = [
+			{ name: "id", label: "Id" },
+			{
+				name: "title",
+				label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+				cellFormatter: (value: { label: string }): string => "~" + value.label
+			},
+			{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" },
+			// tslint:disable:no-duplicate-string
+			{ name: "info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" },
+			{ name: "more_info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" },
+			{ name: "even_more_info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" }
+			// tslint:enable:no-duplicate-string
+		];
+
+		this.filter = { globalFilterPresent: false, columns: [] };
+
+		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
+
+		this.tableRowsActionBarConfig = {
+			actions: [
+				{
+					id: "edit-item",
+					label: "STARK.ICONS.EDIT_ITEM",
+					icon: "pencil",
+					actionCall: ($event: Event, data: object) => this.logger.debug("EDIT", $event, data),
+					isEnabled: true
+				},
+				{
+					id: "delete-item",
+					label: "STARK.ICONS.DELETE_ITEM",
+					icon: "delete",
+					actionCall: ($event: Event, data: object) => this.logger.debug("DELETE", $event, data),
+					isEnabled: true
+				}
+			],
+			isSticky: true
+		};
+	}
+}

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -82,7 +82,8 @@ import {
 	TableWithCustomStylingComponent,
 	TableWithFixedHeaderComponent,
 	TableWithSelectionComponent,
-	TableWithTranscludedActionBarComponent
+	TableWithTranscludedActionBarComponent,
+	TableWithStickyActionsComponent
 } from "./components";
 
 @NgModule({
@@ -164,6 +165,7 @@ import {
 		TableWithTranscludedActionBarComponent,
 		TableWithFixedHeaderComponent,
 		TableWithCustomStylingComponent,
+		TableWithStickyActionsComponent,
 		DemoToastPageComponent,
 		DemoGenericSearchFormComponent,
 		DemoTransformInputDirectivePageComponent

showcase/src/app/demo-ui/pages/table/demo-table-page.component.html

@@ -33,6 +33,14 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<showcase-table-with-fixed-header></showcase-table-with-fixed-header>
 	</example-viewer>
 
+	<example-viewer
+		exampleTitle="SHOWCASE.DEMO.TABLE.WITH_STICKY_ACTIONS"
+		filesPath="table/with-sticky-actions/table"
+		[extensions]="['HTML', 'TS', 'SCSS']"
+	>
+		<showcase-table-with-sticky-actions></showcase-table-with-sticky-actions>
+	</example-viewer>
+
 	<example-viewer
 		exampleTitle="SHOWCASE.DEMO.TABLE.WITH_CUSTOM_STYLING"
 		filesPath="table/with-custom-styling/table"

showcase/src/assets/examples/table/with-sticky-actions/table.html

@@ -0,0 +1,10 @@
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[paginationConfig]="pagination"
+	[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+	customTableActionsType="alt"
+>
+	<header><h1 class="mb0">Table with sticky row actions</h1></header>
+</stark-table>

showcase/src/assets/examples/table/with-sticky-actions/table.scss

@@ -0,0 +1,9 @@
+::ng-deep table {
+  td,
+  th {
+    white-space: nowrap;
+    &.mat-cell {
+      padding-right: 20px;
+    }
+  }
+}