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

  - added documentation / demo
  - added and implemented `StarkTableRowActions` interface

ISSUES CLOSED: #1143

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

@@ -32,14 +32,36 @@
     }
   }
 
-  table {
-    width: 100%;
+  .table-container {
+    overflow: auto;
+
+    &,
+    &:focus,
+    &:hover,
+    &:active {
+      outline: none;
+    }
+  }
+
+  .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 {
     td,
     th {
       &.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>
@@ -108,13 +108,14 @@
 		<ng-content select=".stark-table-columns"></ng-content>
 
 		<stark-table-column
-			*ngIf="tableRowsActionBarConfig && tableRowsActionBarConfig.actions"
+			*ngIf="tableRowActions && tableRowActions.actions"
 			[sortable]="false"
 			[name]="'STARK.TABLE.ACTIONS' | translate"
+			[stickyEnd]="tableRowActions.isFixed"
 		>
 			<ng-template let-context>
 				<stark-action-bar
-					[actionBarConfig]="tableRowsActionBarConfig"
+					[actionBarConfig]="tableRowActions"
 					[actionBarScope]="context.rowData"
 					mode="compact"
 				></stark-action-bar>

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

@@ -21,8 +21,7 @@ import { StarkTableMultisortDialogComponent } from "./dialogs/multisort.componen
 import { StarkTableComponent } from "./table.component";
 import { StarkTableColumnComponent } from "./column.component";
 import { StarkPaginationComponent } from "../../pagination/components";
-import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter } from "../entities";
-import { StarkActionBarConfig } from "../../action-bar/components/action-bar-config.intf";
+import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "../entities";
 import Spy = jasmine.Spy;
 import createSpy = jasmine.createSpy;
 
@@ -38,7 +37,7 @@ import createSpy = jasmine.createSpy;
 			[rowsSelectable]="rowsSelectable"
 			[multiSelect]="multiSelect"
 			[orderProperties]="orderProperties"
-			[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+			[tableRowActions]="tableRowActions"
 			[rowClassNameFn]="rowClassNameFn"
 			(rowClicked)="rowClickHandler($event)"
 		>
@@ -57,7 +56,7 @@ class TestHostComponent {
 	public rowsSelectable?: boolean;
 	public multiSelect?: string;
 	public multiSort?: string;
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 	public tableFilter: StarkTableFilter;
 	public orderProperties?: string[];
 	public rowClassNameFn?: (row: object, index: number) => string;
@@ -144,7 +143,7 @@ describe("TableComponent", () => {
 			expect(component.multiSelect).toBe(hostComponent.multiSelect);
 			expect(component.multiSort).toBe(hostComponent.multiSort);
 			expect(component.orderProperties).toBe(hostComponent.orderProperties);
-			expect(component.tableRowsActionBarConfig).toBe(hostComponent.tableRowsActionBarConfig);
+			expect(component.tableRowActions).toBe(hostComponent.tableRowActions);
 		});
 	});
 

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

@@ -34,7 +34,8 @@ import {
 	StarkColumnSortChangedOutput,
 	StarkTableColumnProperties,
 	StarkTableColumnSortingDirection,
-	StarkTableFilter
+	StarkTableFilter,
+	StarkTableRowActions
 } from "../entities";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 import { StarkPaginationComponent, StarkPaginationConfig } from "../../pagination/components";
@@ -196,7 +197,16 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	 * {@link StarkActionBarConfig} object for the action bar component to be displayed in all the rows
 	 */
 	@Input()
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
+
+	/**
+	 * @deprecated - use {@link this.tableRowActions}
+	 */
+	@Input()
+	public set tableRowsActionBarConfig(config: StarkActionBarConfig) {
+		this.logger.warn("[tableRowsActionBarConfig] attribute on <stark-table> is deprecated. Use [tableRowActions] instead.");
+		this.tableRowActions = <StarkTableRowActions>config;
+	}
 
 	/**
 	 * Function to generate classNames for rows

packages/stark-ui/src/modules/table/entities.ts

@@ -5,3 +5,4 @@ export * from "./entities/column-filter-changed-output.intf";
 export * from "./entities/table-column-filter.intf";
 export * from "./entities/table-column-sorting-direction.type";
 export * from "./entities/table-filter.intf";
+export * from "./entities/table-row-actions.intf";

packages/stark-ui/src/modules/table/entities/table-row-actions.intf.ts

@@ -0,0 +1,12 @@
+import { StarkActionBarConfig } from "@nationalbankbelgium/stark-ui";
+
+/**
+ * StarkTableRowActions interface
+ */
+export interface StarkTableRowActions extends StarkActionBarConfig {
+	/**
+	 * Should the actions always be shown on the right side of the table (sticky)
+	 * Default: false
+	 */
+	isFixed?: boolean;
+}

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-fixed-actions";

showcase/src/app/demo-ui/components/table-regular/table-regular.component.html

@@ -5,7 +5,7 @@
 	[filter]="filter"
 	[orderProperties]="order"
 	[paginationConfig]="pagination"
-	[tableRowsActionBarConfig]="rowActionBarConfig"
+	[tableRowActions]="tableRowActions"
 	multiSort
 	(rowClicked)="handleRowClicked($event)"
 >

showcase/src/app/demo-ui/components/table-regular/table-regular.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{
@@ -49,7 +49,7 @@ export class TableRegularComponent implements OnInit {
 
 	public pagination: StarkPaginationConfig;
 
-	public rowActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
@@ -74,7 +74,7 @@ export class TableRegularComponent implements OnInit {
 
 		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 
-		this.rowActionBarConfig = {
+		this.tableRowActions = {
 			actions: [
 				{
 					id: "edit-item",

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

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

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

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

showcase/src/app/demo-ui/components/table-with-fixed-actions/table-with-fixed-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-fixed-actions/table-with-fixed-actions.component.ts

@@ -0,0 +1,166 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } 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-fixed-actions",
+	templateUrl: "./table-with-fixed-actions.component.html",
+	styleUrls: ["./table-with-fixed-actions.component.scss"]
+})
+export class TableWithFixedActionsComponent implements OnInit {
+	public data: object[];
+
+	public columns: StarkTableColumnProperties[];
+
+	public filter: StarkTableFilter;
+
+	public pagination: StarkPaginationConfig;
+
+	public tableRowActions: StarkTableRowActions;
+
+	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.tableRowActions = {
+			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
+				}
+			],
+			isFixed: true
+		};
+	}
+}